How to stream mjpg to an img element in Edge?

Question

I have a .NET 6.0 web application with an img-Element and I want to stream a live video of a AXIS network camera. The important part of the html-code looks like this:

<img class="cam-img img-fluid" src="@Model.CameraInfos[0].StreamingURL" />

When starting the application with the IIS Express in Visual Studio 2022 and using Firefox, everything works fine. If I want to open the website in Edge or Chrome, I get the "broken image" symbol. I already tried these things. In the DevTools, I get this:

The same problem occurs after publishing the project and adding it to the "normal" IIS.

If I open the src-link (e.g. http://user:******@XXX.XXX.XXX.XXX:port/mjpg/video-mjpg) in Chrome or Edge, the video is shown correctly.

I also tried to host a simple VS Code website with the live-server extension. The same problem occurs. Again with Firefox, I can see the video, but not with Chrome and Edge.

Answer 1

you should use the <video> tag rather than <img>

https://www.w3schools.com/html/html5_video.asp