海康威视RTSP摄像头转RTMP推流前端方案（浏览器兼容及权限验证）

Posted 2023-03-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了海康威视RTSP摄像头转RTMP推流前端方案（浏览器兼容及权限验证）相关的知识，希望对你有一定的参考价值。

参考技术A videojs的播放flv格式RTMP流需要浏览器运行flash插件，但是chrome现在已经不支持flash了，所以我们使用flvjs前端插件作为替代方案，并在流媒体服务器上加入了权限验证功能限制用户访问。

此方案是基于上一节中的方案进行的优化，所以没有提及的地方和原方案保持不变。
一. 在nginx中安装nginx-http-flv-module插件
有编译好的版本直接使用就行，然后修改nginx.conf文件。

流媒体服务海康摄像头RTSP视频推流转码拉流直播综合应用：VLC+FFMPEG+Nginx实现RTSP到RTMP网页直播

文章目录

前言
一、前几章节回顾
二、操作步骤
三、网页播放视频流
- 1、准备测试网页：test.html
- 2、各种浏览器打开test.html测试页面： ![在这里插入图片描述](https://image.cha138.com/20230409/dca7b8695a6b46f5bb2e4f6f07e3511a.jpg)
四、总结

前言

前几章节已完成推流拉流转码直播相关的基础工作准备，本章节整体演示综合直播应用，延迟5秒钟左右…

一、前几章节回顾

二、操作步骤

1、准备本地视频

准备本地视频用于推流： 暗战2.mp4

2、获取海康RTSP视频流

海康RTSP视频流地址：rtsp://admin:1234qwer@192.168.0.128:554/h264/ch1/main/av_stream

3、FFMPEG：转码推流服务准备

参考链接：【流媒体服务】安装推流转码工具（三）：【1】下载安装ffmpeg推流转码工具
准备好转码推流服务。

4、Nginx：网站服务准备

参考链接：【流媒体服务】Web网站服务搭建（四）：【1】下载安装Nginx网站服务
完成Nginx网站服务准备：
注意网站端口已经改为81，即http://localhost:81；
rtmp监听端口为1935，即http://localhost:1935。

5、FFMPEG推流：rtsp转rtmp

cmd 执行命令：ffmpeg -i “rtsp://admin:1234qwer@192.168.0.64:554/h264/ch1/main/av_stream” -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/live/movie
看到如下界面表示成功：
cmd 打开另外要给窗口：ffplay.exe rtmp://localhost:1935/live/movie
看到如下窗口表示成功：

6、FFMPEG推流：rtsp转hls

cmd执行如下命令：ffmpeg -i “rtsp://admin:1234qwer@192.168.0.64:554/h264/ch1/main/av_stream” -vcodec libx264 -acodec aac -f flv rtmp://localhost:1935/hls/movie
看到如下窗口表示成功：
cmd 打开新窗口：ffplay.exe http://localhost:81/hls/movie.m3u8
看到如下窗口表示成功：
此时Nginx网站根目录下会多出很多视频流文件：
出现的问题：hls实时数据流播放一会儿就卡死了，需要结束掉重新启动 ffplay.exe http://localhost:81/hls/movie.m3u8

三、网页播放视频流

1、准备测试网页：test.html

<html>
<head>
<link href="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.bootcss.com/dplayer/1.25.0/DPlayer.min.js"></script>
</head>
<body>


<div id="dplayer"></div>
<script>
    const dp = new DPlayer(
    container: document.getElementById('dplayer'),
    video: 
        url: 'http://localhost:81/hls/movie.m3u8', /*注意这个为实时视频数据流*/
        type: 'customHls',
        customType: 
            customHls: function(video, player) 
                const hls = new Hls();
                hls.loadSource(video.src);
                hls.attachMedia(video);
            ,
        ,
    ,
);
</script>

</body>
</html>

2、各种浏览器打开test.html测试页面：

四、总结

整体延迟5秒钟左右，赶紧还不错！

以上是关于海康威视RTSP摄像头转RTMP推流前端方案（浏览器兼容及权限验证）的主要内容，如果未能解决你的问题，请参考以下文章

流媒体服务海康摄像头RTSP视频推流转码拉流直播综合应用：VLC+FFMPEG+Nginx实现RTSP到RTMP网页直播

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV