多部分/ x混合替换内容类型的视频流问题

Question

Good day, I use an esp8266 module as server, with a camera module to stream jpeg images continuously through wifi. 美好的一天，我使用esp8266模块作为服务器，并使用相机模块通过wifi连续流jpeg图像。 I want to have streaming video , text, and buttons all in the same browser window simultaneously . 我想同时在同一浏览器窗口中同时播放视频流，文本和按钮。 So I created the webpage in HTML and I used the "multipart/x-mixed-replace" content-type for the streaming window, text and buttons since I read that this type accepts various sub types like html and images. 因此，我创建了HTML网页，并且将“ multipart / x-mixed-replace”内容类型用于流式传输窗口，文本和按钮，因为我读到该类型接受html和image等各种子类型。 Streaming window works but... 流窗口工作，但...

When I send the video request to the server I see the video stream for a while then the screen shows the text and buttons for a fraction of a second , then the video stream again and goes on. 当我向服务器发送视频请求时，我会看到视频流一会儿，然后屏幕显示文本和按钮一秒钟，然后视频流又继续。 They never appear all together in the same window. 它们永远不会一起出现在同一窗口中。 They just flicker. 他们只是闪烁。
The streaming window is located at the center of the browser's tab with gray background color around it and I don't know how to change the position and the color or why they appear like that. 流媒体窗口位于浏览器选项卡的中心，周围带有灰色背景颜色，我不知道如何更改位置和颜色或为什么它们会像这样显示。
When I open "inspect element" option of the browser to check the code sent from the server(the HTML code I wrote) I notice that, inside the tag, there are 4 lines of HTML code which I have not written in my code. 当我打开浏览器的“检查元素”选项来检查从服务器发送的代码（我编写的HTML代码）时，我注意到，在标记内，有4行HTML代码尚未写入我的代码中。 They just appear from nowhere and I don't know how to stop them. 它们只是从无处出现，我不知道如何阻止它们。

To sum-up what I want to do is to have streaming video window, text, and buttons all in the same browser window simultaneously. 总结一下，我想做的是将流视频窗口，文本和按钮同时放在同一浏览器窗口中。

Below is the HTML code I wrote and the images for the streaming window I believe that I do something wrong with the content-type or I don't use it the right way. 下面是我编写的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>

And then the above procedure is repeated continuously so as to create video stream with a button and text around it. 然后连续重复上述过程，以创建带有按钮和其周围的文本的视频流。 At least that was the idea... 至少那是个主意...

Thank you for your time. 感谢您的时间。

[1][HTML code for stream + text + button] [1] [用于流+文本+按钮的HTML代码]
[2][HTML code my laptop receives from the server] [2] [我的笔记本电脑从服务器接收的HTML代码]

[1]: https://i.stack.imgur.com/l4GSa.jpg [2]: https://i.stack.imgur.com/S8fTO.jpg [1]： https ： //i.stack.imgur.com/l4GSa.jpg [2]： https ： //i.stack.imgur.com/S8fTO.jpg

Answer 1

Not shure if this would help but I think you should create the HTML with the appearance you want for a given url (ex: http://yourserver/controlCamera ). 不知道这是否有帮助，但是我认为您应该使用给定URL的外观创建HTML（例如： http：// yourserver / controlCamera ）。

In that HTML you can have an image element (the element I present was automatically generated by Chrome when accessing an axis ip camera): 在该HTML中，您可以有一个image元素（我显示的元素是访问轴IP摄像机时Chrome自动生成的）：

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

When accessing the "/videoStream" path at yourserver, you should then provide your "multipart/x-mixed-replace" with only the "image/jpeg" parts. 在服务器上访问“ / videoStream”路径时，应仅在“ multipart / x-mixed-replace”中提供“ image / jpeg”部分。

Hope it helps ;) 希望能帮助到你 ;）

多部分/ x混合替换内容类型的视频流问题

问题描述

1 个解决方案

解决方案1
2 2017-08-24 13:23:52

多部分/ x混合替换内容类型的视频流问题

问题描述

1 个解决方案

解决方案1 2 2017-08-24 13:23:52

解决方案1
2 2017-08-24 13:23:52