Question

美好的一天，我使用esp8266模块作为服务器，使用相机模块通过wifi连续传输jpeg图像。我想同时在同一个浏览器窗口中播放视频，文本和按钮。所以我用HTML创建了网页，并使用了＆＃34; multipart / x-mixed-replace＆＃34;流式窗口，文本和按钮的内容类型，因为我读到这种类型接受各种子类型，如html和图像。流媒体窗口可以工作但是......

当我向服务器发送视频请求时，我看到视频流一段时间，然后屏幕显示文本和按钮几分之一秒，然后视频流再次继续播放。它们永远不会出现在同一个窗口中。他们只是闪烁。
流媒体窗口位于浏览器标签的中央，周围有灰色背景颜色，我不知道如何更改位置和颜色或者为什么会这样。
当我打开＆＃34;检查元素＆＃34;浏览器的选项来检查从服务器发送的代码（我写的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;"> &#9875 Observation Panel &#9875</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]：https://i.stack.imgur.com/l4GSa.jpg [2]：https://i.stack.imgur.com/S8fTO.jpg

Answer 1

如果这会有所帮助，那就不是真的，但我认为您应该为给定的URL创建具有所需外观的HTML（例如：http://yourserver/controlCamera）。

在该HTML中，您可以拥有一个图像元素（我访问轴ip摄像头时，我提供的元素由Chrome自动生成）：

<img style="-webkit-user-select: none;" src="http://yourserver/videoStream" width="1037" height="583">

访问＆＃34; / videoStream＆＃34;在你自己的路径上，你应该提供你的＆＃34; multipart / x-mixed-replace＆＃34;只有＆＃34; image / jpeg＆＃34;部分。

希望它有所帮助;）

multipart / x-mixed-replace内容类型的视频流问题

1 个答案: