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

Question

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

Spa*_*rky 3 html video content-type multipart-mixed-replace mime-types

美好的一天，我使用 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;"> &#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>

Run Code Online (Sandbox Code Playgroud)

然后不断重复上述过程，以创建带有按钮和文本的视频流。至少那是那个主意……

感谢您的时间。

[1][流 + 文本 + 按钮的
HTML 代码] [2][我的笔记本电脑从服务器收到的 HTML 代码]

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

Answer 1

小智 5

不确定这是否会有所帮助，但我认为您应该为给定的 url（例如：http://yourserver/controlCamera）创建具有您想要的外观的 HTML 。

在该 HTML 中，您可以拥有一个图像元素（我呈现的元素是在访问轴网络摄像机时由 Chrome 自动生成的）：

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

Run Code Online (Sandbox Code Playgroud)

在您的服务器上访问“/videoStream”路径时，您应该仅提供“图像/jpeg”部分的“multipart/x-mixed-replace”。

希望能帮助到你 ;）

归档时间：	8 年，7 月前
查看次数：	8176 次
最近记录：	8 年，4 月前