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

Question

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

我试着用VLC播放器打开它，但我无法让它工作。我不知道是不是因为它有响应contentType multipart / x-mixed-replace;边界= - DigifortBoundary;使视频标签无法正常工作。

我试过像这样的视频标签。

<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。然后，您需要将该数据放入视频元素中。

首先，您需要使用Fetch API获取该流。确保即使对您的产地起作用，也没有任何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中本身不支持它。