使用js如何播放海康威视摄像头回放视频流？

Question

如题所示，纯前端可以播放回放吗

Answer 1

标准的flv/mp4可以直接用html的video标签播放。
直播的话找 dplayer 之类的播放器就行

Answer 2

在纯前端环境中直接播放海康威视（Hikvision）摄像头的回放视频流通常是不支持的，因为回放功能涉及到对存储在摄像头、NVR（网络视频录像机）或服务器上的历史视频数据的访问和处理，这通常需要服务器端的支持来提供回放流的URL或数据。

然而，你可以通过以下步骤在前端实现视频回放的功能：

1. 服务器端支持：

   • 确保你的海康威视摄像头或NVR已经正确配置，并且可以通过某种方式（如API调用）获取到回放视频流的URL。
   • 创建一个服务器端的应用（如使用Node.js、Python Flask或Django等），该应用能够接收前端的请求，并与海康威视设备进行通信，以获取回放视频的URL或数据流。

2. 前端请求：

   • 在前端，你可以使用JavaScript（如Ajax、Fetch API或Axios）来向你的服务器端应用发送请求，请求回放视频的URL或数据流。
   • 服务器端处理请求后，将回放视频的URL或数据（可能是转码后的视频流）发送给前端。

3. 前端播放：

   • 前端接收到回放视频的URL后，可以使用<video>标签或第三方视频播放器（如Video.js、HLS.js等，取决于视频流的格式）来播放视频。
   • 如果视频流是HLS（HTTP Live Streaming）或DASH（Dynamic Adaptive Streaming over HTTP）等格式，你可能需要使用相应的JavaScript库来支持这些格式。

4. 示例代码（假设你已有回放视频的URL）：

   <video controls>
     <source src="你的回放视频URL" type="video/mp4">
     您的浏览器不支持 HTML5 video 标签。
   </video>

或者，如果你使用的是HLS流：

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video id="video" controls></video>
<script>
  if (Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('你的HLS回放视频URL');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function() {
      video.play();
    });
  }
</script>

总结：纯前端无法直接播放海康威视摄像头的回放视频流，你需要通过服务器端的应用来获取回放视频的URL或数据流，并在前端使用适当的HTML和视频播放器来播放这些视频。