rtsp视频流转rtmp在网页上直播
先说下功能需求：
客户那里有一些海康摄像头，想把这些网络摄像头的监控画面集成在现有的web项目，通过html显示
之前粗略方案：使用vlc插件
缺点：最大弊端就是只能使用ie内核的浏览器查看，比如ie浏览器，360极速版浏览器。
参考链接：
https://blog.csdn.net/lxl631/article/details/52461240#commentsedit
新方案：ffmpeg+nginx(包括nginx-rtmp-module-master)+videojs.js
缺点：浏览器端需要允许flash
Q:为什么还要使用videojs.js前端插件？h5的
标签不可以么？
A:不可以。原生html不支持rtsp协议的视频流，所以需要转成rtmp，video标签无法直接播放rtmp视频流，videojs插件支持rtmp和hls这两种直播常用的视频流协议
**
概述
**
ffmpeg:很牛逼的流媒体开发框架，在这里我们使用ffmpeg来转码推流，即ffmpeg将rtsp流转为rtmp流并推给服务器nginx
nginx：高并发高性能的服务器，在这里用作转发服务器，因为现在是要作rtmp的转发服务器，还需要安装nginx-rtmp-module-master并做好配置
videojs.js:用来前端展示
ffmpeg安装及使用
官网：http://ffmpeg.org/
下载地址：https://ffmpeg.zeranoe.com/builds/win64/static/
安装方式：选个盘解压即可
说明：需要进行环境变量配置
具体见下方贴图
黑窗口输入：ffmpeg -version 测试下
在这里主要是使用ffmpeg进行转码，所以需要命令，下面是我根据自己需求写的几个命令，后面会用到
输入命令方式：在黑窗口直接粘上命令回车即可
//循环推流命令： 延迟4s左右 画质好
ffmpeg -re -stream_loop -1 -rtsp_transport tcp -i "rtsp://admin:[email protected]/554/ch1/gj3/av_stream" -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 "rtmp://localhost:1935/live/test"
//设置ultrafast和zerolatency ，延迟 1s左右
ffmpeg -re -stream_loop -1 -rtsp_transport tcp -i "rtsp://admin:[email protected]/554/ch1/gj3/av_stream" -tune zerolatency -vcodec libx264 -preset ultrafast -b:v 400k -s 720x576 -r 25 -acodec libfaac -b:a 64k -f flv "rtmp://localhost:1935/live/test"
//多路输出
ffmpeg -re -stream_loop -1 -rtsp_transport tcp -i "rtsp://admin:[email protected]/554/ch1/gj3/av_stream" -tune zerolatency -vcodec libx264 -preset ultrafast -b:v 400k -s 720x576 -r 25 -acodec libfaac -b:a 64k -f flv "rtmp://localhost:1935/live/test" -f flv "rtmp://localhost:1935/live/test2"
上面命令参考了*https://blog.csdn.net/wishfly/article/details/51911264*
我在这里解释几个重要的参数，其他的大家自行百度
-re：根据文件真实的帧率来读取文件，生成实时刷新的直播流，而不是一下子按照电脑的最大性能把文件一下子读进去。实时视频时需要用到
-stream_loop -1：指定循环读取视频源的次数，-1为无限循环，在这里设置可以防止刷新浏览器导致推流结束还要重新输入命令推流
注意：要放在 -i 命令前
-i：输入端
-f：输出端
顺便说一下，这里我的rtsp使用的是子码流地址（画质低，传输快而稳定，常用于网络传输），关于rtsp子码流和主码流的区别，以及如何拿到网络摄像头rtsp地址，自行百度，很简单
nginx安装及rtmp模块配置
在这里不详细写了，可以借鉴下：
https://blog.csdn.net/Contex_A17/article/details/82191050
贴出来我的结构和配置文件：
配置文件nginx.conf：
worker_processes 1;
error_log logs/error.log debug;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4000;
application live {
live on;
}
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 8s;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 20000;
location / {
root html;
index index.html index.htm;
}
location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
location /stat.xsl {
root html;
}
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
expires -1;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
videojs使用
videojs使用很简单，我先贴下代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body width="640px" height="360px">
<video
id="example_video_1"
class="video-js vjs-default-skin"
controls
preload="auto"
width="640px"
height="360px"
data-setup="{}"
style="float: left"
>
<source src="rtmp://localhost:1935/live/test" type="rtmp/flv" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<video
id="example_video_2"
class="video-js vjs-default-skin"
controls
preload="auto"
width="640px"
height="360px"
data-setup="{}"
style="float: left"
>
<source src="rtmp://localhost:1935/live/test2" type="rtmp/flv" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
</body>
</html>
说明：
方便测试 我这里是都是使用了cdn的方式引入相关资源
注意一点，videojs6.0以后版本需要再引入videojs-flash插件
我的上面代码里写了两个video对象，id不一样即可
最终测试
(1)开启nginx服务器，我是双击.exe（会一闪而过）
(2)开启ffmpeg转码并推流：使用黑窗口输入以下命令，就是上面我提到的一个命令，我这里输出两路
ffmpeg -re -stream_loop -1 -rtsp_transport tcp -i "rtsp://admin:[email protected]/554/ch1/gj3/av_stream" -tune zerolatency -vcodec libx264 -preset ultrafast -b:v 400k -s 720x576 -r 25 -acodec libfaac -b:a 64k -f flv "rtmp://localhost:1935/live/test" -f flv "rtmp://localhost:1935/live/test2"
可以看到两个输出的rtmp地址和上面html里面的两个src地址是吻合的。
(3)如何查看效果呢，需要把上面写的html发布到服务器上运行，建议大家下个node然后装上http server模块，非常好用
效果