video stream issue with multipart/x-mixed-replace content-type

Question 1

video stream issue with multipart/x-mixed-replace content-type

html video mime-types content-type multipart-mixed-replace

Sparky · Jul 9, 2017 · Viewed 9k times · Source

Answer

Answer

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).

In that HTML you can have an image element (the element I present was automatically generated by Chrome when accessing an axis ip camera):

<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.

Hope it helps ;)

Question 2

Good day, I use an esp8266 module as server, with a camera module to stream jpeg images continuously through wifi. 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. 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. 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.

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]
[2][HTML code my laptop receives from the server]

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

video stream issue with multipart/x-mixed-replace content-type

Answer

Related questions