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

Question

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

trust2018

1.1k24124188

发布于
10 月 10 日四川

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

回放视频

阅读 758

AI BotBETA

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

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

服务器端支持：
- 确保你的海康威视摄像头或NVR已经正确配置，并且可以通过某种方式（如API调用）获取到回放视频流的URL。
- 创建一个服务器端的应用（如使用Node.js、Python Flask或Django等），该应用能够接收前端的请求，并与海康威视设备进行通信，以获取回放视频的URL或数据流。
前端请求：
- 在前端，你可以使用JavaScript（如Ajax、Fetch API或Axios）来向你的服务器端应用发送请求，请求回放视频的URL或数据流。
- 服务器端处理请求后，将回放视频的URL或数据（可能是转码后的视频流）发送给前端。
前端播放：
- 前端接收到回放视频的URL后，可以使用<video>标签或第三方视频播放器（如Video.js、HLS.js等，取决于视频流的格式）来播放视频。
- 如果视频流是HLS（HTTP Live Streaming）或DASH（Dynamic Adaptive Streaming over HTTP）等格式，你可能需要使用相应的JavaScript库来支持这些格式。

示例代码（假设你已有回放视频的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和视频播放器来播放这些视频。

1 个回答

得票最新

cevin

7.9k27141178

发布于
10 月 10 日河南

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

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

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

你尚未登录，登录后可以

移动端切换路由后返回，视频启动播放会严重滞后，好怪？

在线收费视频主流解决方案是什么？如何构建服务并防止盗链？

自己写的浏览器如何拿到视频最终播放的文件流？