ESP12-E Video Streaming jendela, teks dan tombol tidak ditampilkan seperti yang diharapkan


8

Saya memiliki kamera mini 2MP arducam yang terhubung ke modul ESP8266 (12-E) dan saya mencoba menerapkan streaming video di dalam jendela dengan beberapa teks dan tombol kontrol di sekitarnya, semua di tab / halaman browser yang sama. Saya telah membuat dua halaman HTML untuk digunakan server. Yang pertama adalah halaman web beranda tanpa streaming gambar, hanya halaman sederhana dengan tombol teks dan beberapa CSS. Halaman HTML kedua menyajikan bingkai terus menerus (streaming video) bersama dengan beberapa teks dan tombol ke browser. Ketika halaman rumah dikirim ke browser semuanya ditampilkan seperti yang saya harapkan. Tetapi, ketika halaman web HTML kedua disajikan tetapi beberapa hal aneh terjadi ketika browser (Firefox atau Chrome) menerima balasan dari server (esp12-e).

Biasanya saya akan mengharapkan sebuah jendela kecil menampilkan bingkai terus menerus yang diambil dari kamera dengan beberapa teks di atas jendela itu dan beberapa tombol kontrol di bawahnya. Tapi, bukannya itu dua hal terjadi.

  1. Hanya jendela streaming video yang ditampilkan di tab browser tetapi di sekitar jendela ini hanya ada warna latar belakang abu-abu. Tidak ada tombol, tidak ada teks. Ketika saya membuka Inspektur HTML, di dalam "head", ada beberapa baris kode HTML yang membuat warna abu-abu latar belakang dan beberapa hal CSS yang belum saya tulis di server saya. Entah bagaimana browser membuat baris kode ini secara otomatis dan menambahkannya dalam kode HTML asli saya.
  2. Dalam kode HTML asli saya, di dalam "tubuh", bersama dengan kode untuk jendela streaming, saya memiliki kode untuk elemen teks dan tombol yang akan ditampilkan. Tetapi di browser, bagian-bagian ini hilang. Ketika saya membuka Inspektur, elemen-elemen ini tidak ada! Saya telah mencoba berbagai pendekatan sejauh ini untuk menghindari situasi ini dengan mengisolasi / menyematkan jendela streaming di dalam tab browser. Pendekatan-pendekatan ini adalah: iframe, data URI, multipart / x-mixed replace, form. Sayangnya hasil yang sama terjadi untuk semua pendekatan ini (warna latar belakang abu-abu, jendela streaming di tengah layar dan menghilangnya tombol dan teks).

Satu-satunya yang saya tahu adalah bahwa, ketika browser "melihat" gambar yang masuk dari server itu menghasilkan efek samping ini. Ketika saya membuat HTML hanya dengan teks dan tombol itu ditampilkan dengan baik. Saya melakukan sesuatu yang salah di sini tetapi saya tidak dapat menemukan apa itu.

Di bawah ini saya lampirkan 2 gambar dari apa yang saya dapatkan di tab browser dan kode HTML yang saya kirim dari server esp-12e untuk pengambilan foto

void serveWebpage(WiFiClient client){

  String answer = "HTTP/1.1 200 OK\r\n";     
  answer += "Content-Type: text/html\r\n\r\n";
  answer +="<!DOCTYPE HTML>\r\n"; 

  answer += "<html>\r\n";
  answer +="<head><title> Monitor </title></head>\r\n";

  answer += "<body>\r\n";
  answer += "<h1 style=\"position:relative; left:25px;\"> &#9875     Observation Panel &#9875</h1>\r\n";     // Header Text

  answer += "<a href=\"/videoStream\"><button type=\"button\"  style=\"position:absolute; top:340px;";   // First Button
  answer += "left:95px; color:blue; height:70px; width:90px; font-weight: bold; border-style:outset;";
  answer += "border-width:2px; border-color:black;\"> Video Stream </button></a>\r\n";

  answer += "<a href=\"PhotoCapture\"><button type=\"button\"  style=\"position:absolute; top:340px;";   // Second Button
  answer += "left:195px; color:blue; height:70px; width:90px; font-weight: bold; border-style:outset;";
  answer += "border-width:2px; border-color:black;\"> Video Stream </button></a>\r\n";

  answer += "<div>\r\n";
  answer += "<img src='data:image/jpeg; charset=utf-8; base64,";   // Here the image is wrapped with data URI to display it in the browser


       myCAM.clear_fifo_flag();    // this part is taken from the arducam library exammples. It captures the image and sends it to browser
       myCAM.start_capture();       

       while (!myCAM.get_bit(ARDUCHIP_TRIG, CAP_DONE_MASK));  // wait here until capture has completed
       size_t len = myCAM.read_fifo_length();

       myCAM.CS_LOW();         
       myCAM.set_fifo_burst();     

       #if !(defined (ARDUCAM_SHIELD_V2) && defined (OV2640_CAM))
       SPI.transfer(0xFF);
       #endif   

       static const size_t bufferSize = 4096; //4096
       static uint8_t buffer[bufferSize] = {0xFF};

       while (len) {                
         size_t will_copy = (len < bufferSize) ? len : bufferSize;
         SPI.transferBytes(&buffer[0], &buffer[0], will_copy);
         if (!client.connected()) break;

         client.write(&buffer[0], will_copy);
         len -= will_copy;
       }
  myCAM.CS_HIGH();

  answer +="9k=' />"; // closing the <img> 
  answer +="</div>\r\n";
  answer +="</body>\r\n";
  answer +="</html>\r\n\r\n";

  client.print(answer);  
}  

Video Window_missing tombol dan teks Kode HTML yang saya tulis akan dilayani oleh server esp-12e

Saya membuat beberapa kemajuan akhirnya tetapi tidak 100%. Saya berhasil menampilkan gambar jpeg di iframe dengan menyematkan data dalam format jpeg dari gambar dengan metode URI data di dalam elemen Iframe.

    string = "<iframe srcdoc='<img src=\"data:html/text;base64,/9j/4AAQ..... \" > ' > "; 

Kesalahan saya adalah saya tidak menggunakan tanda kutip dengan urutan yang benar dan data gambar ditafsirkan sebagai teks di browser. Kemudian saya mencoba melakukan hal yang sama dengan fungsi yang saya gunakan untuk mengirim gambar yang diambil dari kamera ke browser. Sayangnya masalah yang sama muncul dan saya tidak dapat memperbaikinya saat ini. Sesuatu terjadi ketika saya mengirim string dengan banyak tanda kutip ke browser karena menafsirkannya sebagai teks dan bukan sebagai format data jpeg seperti ini: / 9j / 4AAQ ...... Saya mengunggah gambar dari inspektur browser saya (menunjukkan browser menerima data saat saya menggunakan fungsi untuk data bingkai yang dikirim kamera) untuk mengetahui dengan lebih mudah apa yang saya maksud. Ada ide tentang ini?

Data diartikan salah karena beberapa kutipan (?)

Inilah ulasan tentang apa yang telah saya selesaikan sejauh ini.Saya membuat HTML dengan Iframe di dalamnya dan juga beberapa tombol. Iframe dan tombol ditampilkan dengan benar di tab browser yang sama. Sekarang, Di dalam iframe saya meletakkan atribut srcdoc dan memasukkan data jpeg mentah langsung di sana (dari sampel sampel jpeg) karena mereka dikodekan (base64) tetapi browser menafsirkan data jpeg ini sebagai teks biasa dan menampilkannya dalam iframe sebagai teks. Kemudian saya menggunakan tag gambar di dalam srcdoc untuk membungkus data jpeg mentah di iframe. Ini berhasil setelah beberapa kesalahan yang saya lakukan dengan tanda kutip di dalam iframe string. Kemudian saya menghapus data jpeg mentah dari tag gambar dan menggantinya dengan fungsi yang membawa data jpeg dari kamera. Saya mengirim bagian pertama dari string jawaban (membuka iframe dan tag img), kemudian saya mengirim data dari kamera dan akhirnya saya mengirim bagian kedua dari string jawaban (menutup iframe dan img tag). Biasanya itu akan berhasil karena saya mengikuti prosedur yang sama seperti sebelumnya. Tetapi browser tidak dapat mengartikan gambar ... lagi.

Di bawah ini, saya telah menambahkan bagian kode untuk gambar sampel yang disandikan (bahwa browser diartikan sebagai gambar) dan kemudian fungsi kamera (yang menafsirkannya sebagai karakter aneh dan bukan gambar), untuk perbandingan. Keduanya harus bekerja dengan cara yang sama tetapi hanya yang pertama.

Gambar sampel yang dikodekan:

    answer = "<iframe srcdoc='<img src=\"data:image/jpeg;base64,/9j/4AAQS...0KDQo=\"> ' scrolling=\"no\" width=\"340\" height=\"340\" >  <p> Error </p> </iframe>\r\n ";

Fungsi kamera sendFrame ():

    answer = "<iframe srcdoc=\"<img src='data:image/jpeg;base64,";
    client.print(answer);
    sendFrame();
    answer ="' > \" >  <p> Error </p> </iframe>\r\n ";
    client.print(answer);

Jadi, saya pikir saya telah menemukan apa yang salah dengan data jpeg masuk kamera. Fungsi kamera membawa data jpeg (ke server dan kemudian ke klien) dalam format yang peramban mengartikannya sebagai teks atau sesuatu seperti itu karena mengandung karakter aneh (periksa gambar terakhir yang saya posting).

Juga untuk menulis kode html saya menggunakan tanda kutip "dan '(atau" dan \') untuk membuat kode iframe dan yang lainnya di dalam iframe.

Dan inilah masalahnya: Karena beberapa data jpeg kamera ditafsirkan sebagai kutipan oleh browser, mereka berinteraksi dengan tanda kutip yang saya masukkan ke dalam iframe untuk membungkus tag img dan data yang berasal dari kamera dan itulah sebabnya ia mengacaukan semuanya di iframe (saya pikir)

Apakah ada cara untuk mengubah data gambar yang berasal dari fungsi kamera menjadi base64, sehingga mereka tidak berinteraksi dengan kutipan pembungkus iframe dan tag gambar?


2
Apakah mungkin bagi Anda untuk memasukkan contoh kode minimal dari masalah di sini? Saya curiga bahwa tanpa itu, jawaban apa pun hanya spekulasi. Dugaan saya adalah bahwa mungkin Anda hanya menyajikan gambar, atau menyajikannya dengan salah Content-Type, karena jelas ditafsirkan sebagai gambar (semua gaya yang dimasukkan adalah gaya Firefox internal )
Aurora0001

Gambar kedua termasuk kode tetapi saya akan mengunggah satu lagi. Terima kasih atas bantuannya
Sparky

1
Saya sedang memikirkan kode server juga, jika Anda memilikinya. Apakah Anda menggunakan perpustakaan premade seperti ini atau apakah Anda membuat sendiri?
Aurora0001

1
Ya saya membaca kode itu tetapi saya berpikir untuk membuatnya sendiri (agar dapat memahaminya dengan lebih baik). Saya akan mengunggahnya sebentar lagi
Sparky

1
Maafkan saya atas jawaban yang tertunda tapi saya merapikan kode sedikit agar ... dapat dibaca. Saya mencoba berbagai metode seperti yang saya sebutkan sebelumnya. Tetapi hasil yang sama terjadi setiap saat. Jadi pasti ada yang lain. Saya sedikit tersesat di sini
Sparky

Jawaban:


4

Anda menulis langsung dari kamera web data ke aliran dan setelah itu muncul template jawaban kosong yang Anda buat.

Anda dapat melihat, Anda tidak menulis bagian pertama dari jawaban untuk wifi dan Anda menulis data dari kamera langsung ke wifi.

Karena data Anda dari kamera telah memformat, saya sarankan menambahkan data ke iframe bukan img tag, di mana sekarang dan bukan milik.

void serveWebpage(WiFiClient client){

  String answer = "HTTP/1.1 200 OK\r\n";     
  answer += "Content-Type: text/html\r\n\r\n";
  answer +="<!DOCTYPE HTML>\r\n"; 

  answer += "<html>\r\n";
  answer +="<head><title> Monitor </title></head>\r\n";

  answer += "<body>\r\n";
  answer += "<h1 style=\"position:relative; left:25px;\"> &#9875     Observation Panel &#9875</h1>\r\n";     // Header Text

  answer += "<a href=\"/videoStream\"><button type=\"button\"  style=\"position:absolute; top:340px;";   // First Button
  answer += "left:95px; color:blue; height:70px; width:90px; font-weight: bold; border-style:outset;";
  answer += "border-width:2px; border-color:black;\"> Video Stream </button></a>\r\n";

  answer += "<a href=\"PhotoCapture\"><button type=\"button\"  style=\"position:absolute; top:340px;";   // Second Button
  answer += "left:195px; color:blue; height:70px; width:90px; font-weight: bold; border-style:outset;";
  answer += "border-width:2px; border-color:black;\"> Video Stream </button></a>\r\n";

  answer += "<div>\r\n";
  answer += "<iframe src="/yourURIforImage"></iframe>\r\n"; 
  answer +="</div>\r\n";
  answer +="</body>\r\n";
  answer +="</html>\r\n\r\n";

  client.print(answer);  
}  

void serveImage(WifiClient client) {
       myCAM.clear_fifo_flag();    // this part is taken from the arducam library exammples. It captures the image and sends it to browser
       myCAM.start_capture();       

       while (!myCAM.get_bit(ARDUCHIP_TRIG, CAP_DONE_MASK));  // wait here until capture has completed
       size_t len = myCAM.read_fifo_length();

       myCAM.CS_LOW();         
       myCAM.set_fifo_burst();     

       #if !(defined (ARDUCAM_SHIELD_V2) && defined (OV2640_CAM))
       SPI.transfer(0xFF);
       #endif   

       static const size_t bufferSize = 4096; //4096
       static uint8_t buffer[bufferSize] = {0xFF};

       while (len) {                
         size_t will_copy = (len < bufferSize) ? len : bufferSize;
         SPI.transferBytes(&buffer[0], &buffer[0], will_copy);
         if (!client.connected()) break;

         client.write(&buffer[0], will_copy);
         len -= will_copy;
       }
       myCAM.CS_HIGH();
}

dan tempat Anda memverifikasi uri mana yang Anda balas dengan serveWebpage () yang Anda buat serupa dengan yang sesuai dengan serveImage () dan / yourURIforImage Anda.


Saya mengikuti pendapat Anda dan saya menambahkan satu client.print (jawaban) segera setelah bagian pertama dari jawaban dan sekarang saya dapat melihat beberapa kemajuan. Saya menyimpan elemen img untuk melihat apa yang akan terjadi. Teks dan tombol ditampilkan dengan benar (itu pertanda bagus menurut saya) tetapi data gambar tidak ditafsirkan oleh browser sebagai gambar, tetapi karakter aneh. Mengapa browser tidak memahami data gambar sebagai gambar karena saya mengonversi data ke base64? Saya akan menambahkan iframe dan menghapus elemen img untuk melihat apa yang akan terjadi dan saya akan kembali
Sparky

Saya membuat jendela iframe dan di sana saya mencoba menanamkan gambar yang diambil dari kamera dengan metode data URI. Tetapi data gambar tidak ditafsirkan sebagai gambar oleh browser dan karakter aneh ditampilkan di dalam iframe. Saya juga menggunakan srcdoc dan bukan src untuk menanamkan data gambar. Ada ide?
Sparky

Untuk membuatnya bekerja, pertama-tama tulis metode yang berhasil mengembalikan gambar saja dan kemudian dalam metode lain panggil metode itu <iframe src = "path ke gambar> </ iframe>
mico

Ya itu bukan ide yang buruk tetapi masalahnya adalah bahwa saya menggunakan gambar dari kamera dengan cara berikut: Saya menyimpan gambar jpeg yang ditangkap di pc saya, kemudian saya menyandikannya ke base64 dan akhirnya saya memasukkannya ke data iframe srcdoc URI ke ditampilkan
Sparky

Saya juga meletakkan data gambar langsung di dalam srcdoc tanpa tag gambar tetapi browser mengartikannya sebagai karakter. Karakter aneh bukan hanya huruf atau angka.
Sparky

3

Hal yang menonjol adalah pernyataan Anda:

Sesuatu terjadi ketika saya mengirim string dengan banyak tanda kutip ke browser karena menafsirkannya sebagai teks dan bukan sebagai format data jpeg seperti ini: / 9j / 4AAQ ......

Saya ingat ada cara khusus untuk menyematkan kutipan adalah html: diperlukan semacam karakter pelarian. Saya googled

sematkan kutipan dalam html

Pertanyaan ini dijawab di StackOverflow di sini:

Bagaimana cara menghindari kutipan di dalam atribut html?

Sepertinya Anda memiliki tanda kutip dalam tanda kutip. Jadi saya tidak yakin apakah Anda sudah menggunakan karakter escape atau tidak, tapi saya sarankan menggunakan opsi eksplisit

&quot; 

untuk kutipan yang disematkan.


Saya akan coba ini dan saya beri tahu Anda apa yang terjadi. & kutipan sama dengan \ "atau '? Jika saya menggunakan & kutipan dan \" dan' dalam string yang sama bagaimana peramban akan menafsirkannya. Terima kasih
Sparky

Tidak yakin. Tetapi ada banyak hasil yang dikembalikan dari pencarian Google. Jadi saya akan bertaruh jawaban untuk pertanyaan itu ditemukan dengan cepat, jika Anda melakukan pencarian.
grldsndrs
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.