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.
- 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.
- 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;\"> ⚓ Observation Panel ⚓</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);
} 
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?
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?
Content-Type, karena jelas ditafsirkan sebagai gambar (semua gaya yang dimasukkan adalah gaya Firefox internal )