海康威视监控使用html播放

欢迎访问我的个人博客
https://ximikang.icu

存在的问题

rtsp
无法直接在网页端播放，需要插件的支持。不考虑。
rtmp
可以在网页播放，但是播放器需要flash的支持，chrome在2020年后对flash的支持十分不友好,但是延迟比较底。
hls
可以在网页播放，也不需要插件和flash的支持，但是缺点在于hls将网页进行切片传输，每次切片都会造成时间的延迟，而且在网络不好的地方，视频会有克顿和无法播放的现象。

本文使用ffmpeg对网络镜头的视频流进行转码为hls，通过nginx进行代理，网页端通过hls.js显示网络镜头的画面。

ffmpeg转码为hls

通过ffmpeg将rtsp转码为hls，转码的输入为网络摄像机的子码流，视频和音频的解码直接使用镜头的解码编码器h264和acc。-hls_time 为 hls切片的时间间隔，时间越短则延迟越低，但是传输的带宽越大对服务器要求更高，-hls_list_size为.m3u8文件的长度，-hls_wrap为本地交换文件的大小。

start ffmpeg ^
-i rtsp://username:password@192.168.1.123/Streaming/Channels/102?transportmode=unicast  ^
-c copy ^
-f   hls  ^
-hls_time 1.0 ^
-hls_list_size 2 ^
-hls_wrap   2  ^C:/nginx-1.19.2/html/hls/test.m3u8

搭建nginx并配置

nginx.conf配置文件


#user  nobody;
worker_processes  1;#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;#pid        logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;# 跨域访问add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;#access_log  logs/access.log  main;sendfile        on;keepalive_timeout  65;server {listen       80;#charset koi8-r;#access_log  logs/host.access.log  main;location / {root   html;index  index.html index.htm;}
}

前端视频显示

前端为了能够播放hls, 使用hls.js播放直播视频，hls.js不需要任何的播放器，可以直接在video元素上运行

https://www.npmjs.com/package/hls.js/v/canary

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hls test</title>
</head><body><h1>hls test</h1><script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><video id="video"></video><script>var video = document.getElementById('video');// 视频的路径var videoSrc = 'http://localhost/hls/test.m3u8';if (Hls.isSupported()) {var hls = new Hls();hls.loadSource(videoSrc);hls.attachMedia(video);hls.on(Hls.Events.MANIFEST_PARSED, function () {video.play();});}else if (video.canPlayType('application/vnd.apple.mpegurl')) {video.src = videoSrc;video.addEventListener('loadedmetadata', function () {video.play();});}</script>
</body></html>

<template><div><video ref="videoRef" height="500px" autoplay /></div>
</template><script>
import Hls from 'hls.js'
export default {data() {return {hls:''}},mounted: function() {const videoRef = this.$refs.videoRefconst url = 'http://localhost/hls/test.m3u8'this.hls = new Hls();this.hls.loadSource(url)this.hls.attachMedia(this.$refs.videoRef)this.hls.on(Hls.Events.MANIFEST_PARSED, () => {console.log('加载成功');this.$refs.video.play();});this.hls.on(Hls.Events.ERROR, (event, data) => {console.log('加载失败');});}
}
</script>

最终显示效果

ents.ERROR, (event, data) => {
console.log(‘加载失败’);
});
}
}


## 最终显示效果
[外链图片转存中...(img-rJgF5M8K-1600331960000)]视频的延迟大概有3-4秒，对于实时性较高的应用还是达不到要求。

海康威视监控使用html播放相关推荐

Vue中实现海康威视监控的播放及云台控制
原创不易,如果觉得对你有所帮助,拜托点赞哦~~ ^_^ 最近在做一个Vue项目,其中一个需求,就是在页面中展示出海康威视的监控图像,并进行云台控制. 研究的过程还是有点儿痛苦的,这类技术文章数量不多, ...
vue-element-admin 集成海康威视监控插件VideoWebPlugin
项目场景: 项目为智慧园区后台管理系统需求全部摄像头实时监控&&单个监控直播&&单个监控回放集成海康威视监控 WEB插件网上有非常多的资源代码实例大多数还需 ...
Android 集成海康威视监控 SDK，实现监控录像的查看
Android 集成海康威视监控 SDK,实现监控录像的查看配置切换Android studio 到project目录下,分别将jar包与armeabi包复制进去lib文件夹下: 设置app bu ...
海康威视监控有意思的问题
近期工作遇到一个有意思的问题海康威视监控录像机摄像头黑屏无信号,经过线路检查一切都没有问题,一般这种情况重新启动摄像头就会恢复. 为了寻找问题根源测试摄像头在2.3.4层的连通性,准备逐层排查. a ...
小程序实现RTMP/HLS协议直播监控视频实时播放实现步骤
小程序实现监控视频实时播放实现步骤简述:RTMP协议直播视频,可使用小程序live-player组件实现视频播放,暂只针对国内主体特定类目的小程序开放,需要先通过类目审核,再在小程序管理后台,「开发 ...
VUE网页播放海康威视监控视频，支持抓图、录像、回放、字幕、倍速、水印
VUE网页播放海康威视RTSP视频流,支持字幕.抓图.录像.水印等
海康威视监控下载下来的mp4格式的视频,小类别MPEG-PS格式，这种格式在浏览器中没法播放，跪求播放方法。
海康下载视频格式:用mediainfo查看普通mp4格式用mediainfo查看自己试了很多方法,html5的 Video控件没法播放,ckplayer没法播放. 作者已经解决这个问题,下面是自动 ...
谷歌浏览器播放海康威视监控
1:下载ffmpeg 官网:http://ffmpeg.org/ 解压后,电脑右键属"属性"选择"高级系统属性"下在"环境变量"中的[PAT ...
Hikvision海康威视监控前端对接，移动端对接，pc端对接，无插件模式
一.后端提供个接口后端需要提供一个接口给前端接口返回url给前端.具体实现参照海康威视文档https://open.hikvision.com/docs/7967cbf99e9b49ec899a5b ...
vue.js海康威视监控使用，以及遇到的问题
使用海康威视之前要先安装海康提空的web应用程序,注意是应用程序不是插件,所以后面你会发现渲染出来的监控框不是页面上的元素而是一个程序,然后会引起一些问题. 一,应用程序下载海康web应用程序下载 ...