背景
之前在IE时代,安防播放视频都是采用activeX +rtsp的方式;chrome+firefox 使用npapi的控件 或者chrome、firefox采用flash + rtmp;
但后来chrome去掉了npaip和flash的支持。
这里主要讲解如何在chrome中进行无控件播放实时视频
PC 用flv.js 播放http-flv流
web用video.js 播放http-hls流
相关知识
先阅读以下文章
https://cloud.tencent.com/developer/article/1467813
https://www.cnblogs.com/upyun/p/9881865.html
无控件实时播放就是http+hls 、 http-flv 、webassembly的方式,但hls需要m3u8分片,延时会比flv大
我的需求只要能够在chrome上低延时无控件播放h264码流,简单点所以并没有采用ffmpeg+webAssembly的技术,而是采用http-flv的方式。
基本原理
通过rtsp从ipc引流,经ffmpeg转码为rtmp到nginx-http-flv-module,
前端通过flv.js 进行引流播放,达到低延时、秒开的效果。
环境搭建
http://nginx.org/en/download.html
https://github.com/winshining/nginx-http-flv-module
https://github.com/bilibili/flv.js
https://github.com/FFmpeg/FFmpeg/tree/release/4.3
nginx + http-flv-module 编译
1 | yum install gcc-c++ zlib zlib-devel pcre pcre-devel zlib zlib-devel openssl openssl-devel -y |
ffmpeg 编译
1 | 首先安装yasm插件 |
flv.js 部署
在 https://github.com/bilibili/flv.js/tree/master/demo
下载 index.html 和 demo.css ,并修改index.html 中flv.js 路径
通过 http://bilibili.github.io/flv.js/demo/ 查看源代码,并在flv.js/dist 中下载 flv.js
以上三个文件放置在 nginx/html下
nginx conf设置
1 |
|
测试 rtmp、http-flv
启动nginx ,然后执行1
ffmpeg -re -i yxjx.mp4 -vcodec copy -an -f flv rtmp://localhost:1935/live/steam
打开vlc 网络分别输入:1
2
3http://192.168.50.200:8080/live?port=1935&app=live&stream=steam
rtmp://192.168.50.200:1935/live/steam
视频正常播放
打开网站1
2
3
4http://192.168.50.200:8080/ 输入
http://192.168.50.200:8080/live?port=1935&app=live&stream=steam
去掉音频,播放正常
测试 hls
使用video.js 测试
video.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>videojs视频播放DEMO</title>
</head>
<link href="//vjs.zencdn.net/7.8.2/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.8.2/video.min.js"></script>
<body>
<h3>视频播放</h3>
<video id="example_video_1" class="video-js vjs-default-skin" >
<source src="http://192.168.50.200:8080/hls/steam.m3u8" ">
</video>
</body>
</html>
<script>
var player = videojs('example_video_1', {
muted: true,
controls: true,
});
</script>
ffmpeg 地址修改为1
ffmpeg -re -i yxjx.mp4 -vcodec copy -an -f flv rtmp://localhost:1935/hls/steam
手机打开 http://192.168.50.200:8080/video.html 播放正常
遇到的问题
ffmepg 转码性能
我们对于大部分码流只要转封装即可,不需要进行转码,命令行参数
ffmpeg -i rtsp://admin:admin@192.168.1.10:554/video -vcodec copy -acodec copy -f flv rtmp://localhost:1935/live/steam
ffmepg 转码失败
我遇到音频的问题,ffmepg转码时有错误日志输出,可以查看具体原因;我不需要音频所以就去掉音频;1
2
3[flv @ 0x3a1c600] FLV does not support sample rate 48000, choose from (44100, 22050, 11025)
[flv @ 0x3a1c600] Audio codec ac3 not compatible with flv
Could not write header for output file #0 (incorrect codec parameters ?): Function not implemented
1 | rtsp 转换 |
1 | 文件,需要 -re 按正常帧率推送 |
音频的支持
flv 格式支持1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
160 = Linear PCM, platform endian
1 = ADPCM
2 = MP3
3 = Linear PCM, little endian
4 = Nellymoser 16-kHz mono
5 = Nellymoser 8-kHz mono
6 = Nellymoser
7 = G.711 A-law logarithmic PCM
8 = G.711 mu-law logarithmic PCM 9 = reserved
10 = AAC
11 = Speex
14 = MP3 8-Khz
15 = Device-specific sound
7, 8, 14, and 15:内部保留使用。
flv是不支持g711a的,如果要用,可能要用线性音频。
转码时,就支持声音播放了1
ffmpeg -re -i yxjx.mp4 -vcodec copy -acodec aac -f flv rtmp://localhost:1935/live/steam
flv.js 延时问题
在创建flv player时,设置参数1
2
3
4
5
6
7
8player = flvjs.createPlayer(mediaDataSource,{
type:'flv',
isLive:true,
hasAudio:false,
enableWorker:true,
enableStashBuffer:false,
stashInitialSize:128,
});
视频秒开问题
gop_cache on; 的作用是缓存了一个GOP视频,所以如果IPC的视频GOP设置为50,那么会有2s的延时;
设置了 gop_cache off; 会有最多2s的黑屏。
抓拍功能
我还得继续研究
后续计划
如果有时间,会考虑使用ffmegp+webAssembly的方法,因为这样播放器能实现更多的功能。