Question

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

我尝试用VLC播放器打开它，但无法正常工作。我不知道是否是因为它具有响应contentType multipart / x-mixed-replace; boundary =-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）混合。然后，您需要将这些数据放入video元素。

首先，您需要使用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本身不支持。

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

2 个答案: