海康威视监控使用html播放

最新推荐文章于 2024-08-08 07:49:13 发布

置顶

ximikang

最新推荐文章于 2024-08-08 07:49:13 发布

阅读量3.1k

点赞数 1

分类专栏：日常文章标签：海康威视 ffmpeg rtsp hls html

本文链接：https://blog.csdn.net/qq_36361250/article/details/108647124

版权

欢迎访问我的个人博客
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

最低0.47元/天解锁文章

ximikang

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录