如何在网站上显示从监控摄像头系统接收到的流媒体视频

Question

我想在网站(asp.net/html5)上显示来自监控摄像头系统的流视频。从他们的api文档中，我可以获取快照以显示在img标签上，但无法获取流媒体(H.264)以显示在视频标签上。

我试着用VLC播放器打开它，但我不能让它工作。我不知道是不是因为它的响应contentType multipart/x-mixed-replace；because =--don边界；，这使得视频标签不能工作。

我试过这样的视频标签。

<video id="video1" controls autoplay
  src="http://localhost:8601/Interface/Cameras/GetMediaStream?Camera=01&AuthUser=admin&AuthPass=password" >
</video>

Answer 1

你得到的是一个基本的H.264流，我根据这些头文件猜测它只包含I帧。因为它是一个基本流，所以您不能仅仅在<video>标记中回放它。您需要首先使用容器对其进行多路复用，例如MP4。然后，您需要将该数据放入video元素。

首先，您需要使用Fetch API获取该流。确保even在您的源上工作，并且没有任何CORS问题。

接下来，您需要弄清楚如何多路复用该流。有几个JavaScript库可以做到这一点，但我不能提供具体的建议，因为我还没有测试过任何库。(也许是https://github.com/videojs/mux.js/？(不确定这在客户端是否有效。)

一旦有了MP4流，就需要使用Media Source Extensions将内容放入可播放的内容中。

除了这一切，还有另一种选择。在服务器端使用FFmpeg进行多路复用。

Answer 2

我正在用Digifort HTTP API解决同样的问题。对我来说，目前的解决办法是请求MJPEG实时视频流。

<img style="-webkit-user-select: none; max-width: 100%;" src="http://192.168.0.38:8601/Interface/Cameras/GetJPEGStream?Camera=02&ResponseFormat=XML&Quality=100&Width=1920&Height=1080&AuthUser=admin&AuthPass=123456">

请注意，MJPEG使用<img>元素，IE本身并不支持它。