美好的一天，我使用一个 esp8266 模块作为服务器，带有一个摄像头模块，可以通过 wifi 连续传输 jpeg 图像。我想在同一个浏览器窗口中同时显示流式视频、文本和按钮。所以我用 HTML 创建了网页，并为流式窗口、文本和按钮使用了“multipart/x-mixed-replace”内容类型，因为我读到这种类型接受各种子类型，如 html 和图像。流媒体窗口有效，但......
- 当我向服务器发送视频请求时，我看到了一段时间的视频流，然后屏幕显示文本和按钮几分之一秒，然后再次显示视频流并继续。它们永远不会一起出现在同一个窗口中。它们只是闪烁。
- 流媒体窗口位于浏览器选项卡的中央，周围是灰色背景色，我不知道如何更改位置和颜色，也不知道为什么会这样。
- 当我打开浏览器的“检查元素”选项来检查从服务器发送的代码(我写的 HTML 代码)时，我注意到，在标签内，有 4 行我没有写的 HTML 代码我的代码。它们不知从何而来，我不知道如何阻止它们。
总而言之，我想做的是在同一个浏览器窗口中同时拥有流式视频窗口、文本和按钮。
以下是我编写的 HTML 代码和流式窗口的图像 我相信我在内容类型上做错了什么，或者我没有以正确的方式使用它。
HTTP/1.1 200 OK
Content-Type: multipart/x-mixed-replace; boundary=frame
--frame //this part shows the jpeg image captured
Content-Type: image/jpeg
..
fetch jpeg image part
..
--frame //this part hopefully adds text and buttons
Content-Type: text/html // along with the streaming video window
<!DOCTYPE HTML> //This is the idea at least...
<html>
<body>
<h1 style="position:relative; left:25px;"> ⚓ Observation Panel ⚓</h1>
<a href="/ ">
<button type="button" style="position:absolute; top:320px;
left:95px; color:blue; height:70px; width:90px; font-weight: bold;
border-style:riddge; border-width:2px; border-color:black;" >
Stop Stream
</button>
</a>
<body>
</html>
然后不断重复上述过程，以创建带有按钮和周围文本的视频流。至少那是个想法......
感谢您的宝贵时间。
[1][流+文本+按钮的HTML代码]
[2][我的笔记本电脑从服务器接收到的 HTML 代码]
[1]: /image/l4GSa.jpg [2]: /image/S8fTO.jpg
最佳答案
不确定这是否有帮助，但我认为您应该为给定的 url 创建具有您想要的外观的 HTML(例如:http://yourserver/controlCamera)。
在该 HTML 中，您可以有一个图像元素(我提供的元素是 Chrome 在访问 axis ip 摄像机时自动生成的):
<img style="-webkit-user-select: none;" src="http://yourserver/videoStream" width="1037" height="583">
当在您的服务器上访问“/videoStream”路径时，您应该提供仅包含“image/jpeg”部分的“multipart/x-mixed-replace”。
希望对您有所帮助;)
关于html - multipart/x-mixed-replace 内容类型的视频流问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44992241/