浏览器无插件播放rtsp流解决方案
1. 安装 FFmpeg
参考 CentOS下安装FFmpeg,特别详细。
我遇到的错误和解决办法:
make ffmpeg 时报acc相关,版本太高,安装低版本 Linux下FFmpeg安装配置好后,使用中的一些问题
make 时报
if(x264_bit_depth>8)
错误,重装新版本ffmpeg 带有x264的ffmpeg编译出现小错误安装新版本 FFmpeg 后,
./configure
参数去掉 --enable-libnut缺少 pkg-config 则需要安装 Linux CentOS安装pkg-config
编译后的库需要加环境变量,否则ffmpeg打不开,库编译后的默认地址在
/usr/local/lib
。 export LD_LIBRARY_PATH 的使用
2. 安装NGINX (带rtmp模块)
安装和配置参考 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器笔记(一) 。
/usr/sbin/nginx 是 docker nginx
/usr/local/nginx/sbin/nginx 是单独新装的nginx
完成之后使用博主的命令:
ffmpeg -i rtsp://admin:password@183.2.2.2:9204 -rtsp_transport tcp -acodec aac -strict experimental -ar 44100 -ac 2 -b:a 96k -r 25 -b:v 500k -s 640*480 -f flv rtmp://127.0.0.1:1935/myapp/test1
启动失败。报错UDP timeout, retrying with TCP [rtsp @ 0x1431700] method PAUSE failed: 551 Option not supported
。UDP 读取超时,加 -rtsp_transport tcp
强制使用tcp
读取rtsp
流 https://github.com/datarhei/restreamer/issues/3 。
命令: ffmpeg -rtsp_transport tcp -i rtsp://admin:password@183.2.2.2:9204 -c copy -f flv rtmp://127.0.0.1:1935/myapp/test1
成功运行之后,通过外网地址 rtmp://118.1.2.3:1935/myapp/test1
即可看到rtmp流。(外网端口需开启访问)
3. 转换 hls
参考 使用nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器笔记(二),修改nginx配置,将rtmp流定向到文件中。
使用 ffmpeg 命令:ffmpeg -rtsp_transport tcp -i rtsp://admin:password@183.2.2.2:9204 -vcodec copy -acodec copy -vbsf h264_mp4toannexb -f flv rtmp://127.0.0.1:1935/hls/test2
http://118.1.2.3:81/hls/test2.m3u8
即可查看流。
4. 失败的尝试:h5播放m3u8
https://www.zhihu.com/question/21087379 使用了videojs封装的 https://github.com/huangyaoxin/hLive 还是特别慢,浏览器一直打不开。VLC也特别慢。
5. 试试通过 websocket 的解决方案
本来计划尝试
把rtsp转换websocket再用video标签就可以播放,可以参考mse技术方案
SpecForge/html5_rtsp_player
尝试未果,放弃。
误打误撞,修改 nginx 配置,hls_fragment 1s;
页面不再黑屏可以播放出来。
又发现了 chunk_size 设置分段大小 https://www.cnblogs.com/tinywan/p/6292357.html
偶尔可以播出来,继续用 websocket 方法。
参考:html5播放rtsp方案,使用jsmpeg, 服务器端只有一个js文件websocket-relay.js
(使用 node.js 将 ffmpeg 生成的mpeg数据转到 websocket 服务);客户端展示使用一个js jsmpeg.min.js
和 html view-stream.html
文件(js用来打开ws,并绘制canvas到页面)。
最终显示效果 +ie
命令: ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -q 0 -f mpegts -b 50 -r 20 -ss 3 -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234
还是有点卡(请忽略里面奇怪的参数设置,为了传输的数据小,就乱试一些参数), 而且没声音,但是证明了直接使用 websocket 方案可行。
6. 优化视频传输速度
好好研究一下 FFmpeg 的参数。就是要找到使传输数据最小的参数。FFmpeg中文文档 - 其实就是翻译了FFmpeg的man手册。
发现-q
参数,使用固定的质量品质(VBR),其中值q
取值在0.01-255,越小质量越好,拿来设置-q 200
视频立马就糊了,但是每秒都能动了。设置为-q 1
(每次的bitrate=5800kbits/s 左右,导致传输太慢)
-q 50
比特率大小则为300+k
需要找个一个平衡点,优先正常传输(视频大小)的最大清晰度(图像质量)。-q 8
时,大小在1000k/s,质量也可接受。有点卡的话可调成-q 9
, 比特率维持在890k。
记录当前命令:
ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -f mpegts -r 20 -q 9 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234
其中:-an
禁止音频(因为当前不需要音频,如果需要), -r 20
帧率, -s 800/600
屏幕尺寸
7. 多路视频传输
参考 html5播放rtsp方案 作者的 RtspWebSocket,修改了(https://github.com/phoboslab/jsmpeg) 中的js
,使多个流对应到多个 websocket 服务。
最终配置和命令如下:
node.js 启动:
node websocket-relay.js 1234 1936 82
监听 mpeg 流的端口1936, ws 服务端口82后台启动 ffmpeg 转视频格式为 mpeg 到 1936 端口:
nohup ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9201 -f mpegts -r 20 -q 15 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234/1 &
nohup ffmpeg -rtsp_transport tcp -re -i rtsp://admin:password@183.2.2.2:9204 -f mpegts -r 20 -q 15 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234/4 &
注:转 m3u8
不需要 -rtsp_transport tcp 参数 ffmpeg -re -i http://v.warcraft.com/openlive/1a4ccf5dc3af4dc7a3c400f953fad089.m3u8 -f mpegts -r 20 -q 15 -an -s 800/600 -codec:v mpeg1video http://127.0.0.1:1936/1234/5
前台查看 (注:博客园可能会过滤script标签,导致不能正常显示代码,所以script前加了空格)
<canvas id="video-canvas"></canvas>
< script type="text/javascript" src="jsmpeg.min.js"></script>
< script type="text/javascript">
var canvas = document.getElementById('video-canvas');
var url = 'ws://118.1.2.3:82/4';
var player = new JSMpeg.Player(url, {canvas: canvas});
< /script>
浏览器无插件播放rtsp流解决方案的更多相关文章
- Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理
Web下无插件播放rtsp视频流的方案及各家优秀内容资源整理 方案一:服务器端用 websocket 接受 rtsp ,然后,推送至客户端 实现步骤: 方案二:使用 ffmpeg + nginx 把 ...
- [转] web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!
需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估计也不会有: 问题:可以自己做浏览器插件播放RTSP吗? 答案:可以的,chrome做ppapi插件 ...
- web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!
本文转自:http://www.cnblogs.com/babosa/p/7355468.html 需求 问题:有没有flash播放RTSP的播放器?H5能不能支持RTSP播放? 答案:没见过,以后估 ...
- 使用Gin+WebSocket在HTML中无插件播放RTSP
在后台的开发中遇到了对接显示摄像头视频流的需求.目前获取海康及大华等主流的摄像头的视频流使用的基本都是RTSP协议.不过HTML页面并不能直接播放RTSP协议的视频流,查询了一番各种网页播放RTSP的 ...
- EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码
背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
- EasyNVR、EasyDSS二次开发之:RTMP、HLS流在web页面进行无插件播放示例Demo代码
不管是基于EasyNVR还是EasyDSS,都是支持无插件直播,这也是未来视频直播的一个趋势.对于传统的浏览器插件播放谁用谁知道: 以上是软件自带播放展示 背景需求 对于EasyNVR和EasyDSS ...
- 浏览器播放rtsp流媒体解决方案
老板提了一个需求,想让网页上播放景区监控的画面,估计是想让游客达到未临其地,已知其境的状态吧. 说这个之前,还是先说一下什么是rtsp协议吧. RTSP(Real Time Streaming ...
- 通过Onvif设备探索获取EasyNVR网页无插件播放所需要的摄像机硬盘录像机NVR的RTSP地址
想实现网络监控摄像头进行视频直播的朋友门应该知道,方法其实非常简单,你不需要使用支持直播的网络摄像机,只需要经过一套流媒体服务器将监控摄像头的RTSP视频流转为RTMP\HLS\HTTP-FLV视频流 ...
- EasyNVR实现海康、大华NVR硬盘录像机Web无插件播放方案(支持取特定时间段视频流)
本文转自:https://blog.csdn.net/black_3717/article/details/79872725 背景说明: 由于视频自身的直观性和便利性,对于传统安防行业,摄像机的直播和 ...
随机推荐
- ansible roles实践——安装java
[root@master] /etc/ansible$ cat roles/java/tasks/main.yml ---- name: unzip jdk unarchive: src=jdk-8u ...
- python11day
昨日回顾 函数的参数: 实参角度:位置参数.关键字参数.混合参数 形参角度:位置参数.默认参数.仅限关键字参数.万能参数 形参角度参数顺序:位置参数,*args,默认参数,仅限关键字参数,**kwar ...
- spring 异常处理的方式?
一.使用SimpleMappingExceptionResolver解析器 1.1在mvc中进行 配置. <?xml version="1.0" encoding=" ...
- 在windows、widfly环境下,远程debug
最近:一直想弄一个远程debug模式,奈何没有接触过,导致畏首畏尾,不过,两天时间终于搞出来了雏形,真的是一个坑一个坑踩过来的. widfly环境:widfly8 准备工作:远程运行环境:省略,前面一 ...
- 什么是Autolayout
Autolayout是一种"自动布局"技术,专门用来布局UI界面的 Autolayout自iOS 6开始引入,由于Xcode 4的不给力,当时并没有得到很大推广 自iOS 7(Xc ...
- Redis的配置文件redis.conf详解
Redis的配置文件位于redis的安装目录下,一般不要直接操作出厂设置的配置文件,需要对其进行备份.# Redis的配置文件样例: # Redis configuration file exampl ...
- AttributeText创建多彩文字Label --- hl
一般用富文本实现多种花样的Label文字,下图是利用UILabel分类快速创建的多彩多样lable文字,快速简单,自定义性强,更重要的是无代码污染,特别适合轻量级使用 https://github.c ...
- k8s之PV、PVC
目录 一.PVC和PV 1.1 PV概念 1.2 PVC概念 1.3 PV与PVC之间的关系 1.4 两种PV的提供方式 二.基于nfs创建静态PV资源和PVC资源 2.1 配置nfs存储(192.1 ...
- 《Effective Python》笔记——第4章 元类及属性
一.用属性取代get和set方法 常规的get和set方法如下: class OldResistor(): def __init__(self, ohms): self.__ohms = ohms d ...
- Express中使用session
1.安装express-session npm install express-session --save-dev //注意-g无效 2.app.jsvar session = require('e ...