ESP12-Eビデオストリーミングウィンドウ、テキストおよびボタンが期待どおりに表示されない
ESP8266（12-E）モジュールに接続されたarducam mini 2MPカメラを使用していて、テキストとコントロールボタンが周囲にあるウィンドウ内に、すべて同じブラウザータブ/ページにビデオストリーミングを実装しようとしています。サーバーで使用する2つのHTMLページを作成しました。1つ目は、画像ストリーミングのないホームWebページで、テキストボタンといくつかのCSSを備えた単純なページです。2番目のHTMLページは、連続するフレーム（ストリーミングビデオ）といくつかのテキストおよびボタンをブラウザーに提供します。ホームページがブラウザに送信されると、すべてが期待どおりに表示されます。しかし、2番目のHTML Webページが提供されているが、ブラウザー（FirefoxまたはChrome）がサーバー（esp12-e）からの応答を受信すると、奇妙なことが発生します。 通常、私は小さなウィンドウにカメラから取得した連続フレームを表示し、そのウィンドウ上にテキストとその下にいくつかのコントロールボタンを表示することを期待します。しかし、その代わりに2つのことが起こります。 ブラウザのタブにはビデオストリーミングウィンドウのみが表示されますが、このウィンドウの周りには灰色の背景色しかありません。ボタンなし、テキストなし。「インスペクタ」の「ヘッド」の内側を開くと、背景の灰色を作成する数行のHTMLコードと、サーバーで記述していないCSS要素がいくつかあります。どういうわけか、ブラウザはこのコード行を自動的に作成し、私のオリジナルのHTMLコードに追加します。 私の元のHTMLコードでは、「body」内に、ストリーミングウィンドウのコードとともに、表示されるテキスト要素とボタン要素のコードがあります。しかし、ブラウザでは、これらの部分は消えます。インスペクターを開くと、これらの要素は存在しません！これまでに、ブラウザのタブ内にストリーミングウィンドウを分離/埋め込むことで、この状況を回避するためにさまざまなアプローチを試みてきました。これらのアプローチは、iframe、データURI、multipart / x-mixed replace、formです。残念ながら、これらすべてのアプローチで同じ結果が発生しました（灰色の背景色、画面中央のストリーミングウィンドウ、表示されていないボタンとテキスト）。 私が知っている唯一のことは、ブラウザがサーバーからの着信画像を「見る」と、これらの副作用が生じることです。テキストとボタンのみのHTMLを作成すると、うまく表示されます。私はここで何か悪いことをしていますが、それが何であるかを見つけることができません。 以下に、ブラウザーのタブで取得したものの2つの写真と、esp-12eサーバーから送信した写真キャプチャ用のHTMLコードを添付します。 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 …