做网站必须知道的问题,canva可画官网,新产品代理,小程序微盟方案一: html5 websocket_rtsp_proxy 实现视频流直播 实现原理 实现步骤 服务器安装streamedian服务器 客户端通过video标签播放
video idtest_video controls autoplay/videoscript srcfree.player.1.8.4.js/script websocket_rtsp_proxy 实现视频流直播 实现原理 实现步骤 服务器安装streamedian服务器 客户端通过video标签播放
video idtest_video controls autoplay/videoscript srcfree.player.1.8.4.js/script
scriptif (window.Streamedian) {var errHandler function(err){console.log(err, err.message);};var infHandler function(inf) {console.log(info, inf)};var playerOptions {socket: ws://localhost:8088/ws/,redirectNativeMediaErrors : true,bufferDuration: 30,errorHandler: errHandler,infoHandler: infHandler};var html5Player document.getElementById(test_video);html5Player.src rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov;var player Streamedian.player(test_video, playerOptions);window.onbeforeunload function(){player player.destroy();player null;Request null;}}
/script注意测试时先从官网申请license key否则socket 只能识别localhost和127.0.0.1 优点实现比较简单 缺点收费的免费版有很多限制 方案二ffmpeg nginx videortsp转rtmp播放 rtmp是adobe开发的协议一般使用adobe media server 可以方便的搭建起来随着开源时代的到来有大神开发了nginx的rtmp插件也可以直接使用nginx实现rtmp
rtmp方式的最大的优点在于低延时经过测试延时普遍在1-3秒可以说很实时了缺点在于它是adobe开发的rtmp的播放严重依赖flash而由于flash本身的安全现代浏览器大多禁用flash
实现步骤
安装ffmpeg工具安装nginx 注意linux系统需要安装 nginx-rtmp-module 模块Windows系统安装包含rtmp的(如nginx 1.7.11.3 Gryphon)更改nginx配置
rtmp{server{listen 1935;application live{live on;record off;}application hls{live on;hls on;hls_path nginx-rtmp-module/hls;hls_cleanup off;}}
}4.ffmpeg转码
ffmpeg -i rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov -f flv -r 25 -s 1080*720 -an rtmp://127.0.0.1:1935/hls/mystream5.video 播放
html
head
titlevideo/title
!-- 引入css --
link relstylesheet typetext/css href./videojs/video-js.min.css //head
body
video idtest_video classvideo-js vjs-default-skin vjs-big-play-centered controls autoplaysource srcrtmp://127.0.0.1:1935/hls/mystream typertmp/flv/
/video/body
/html
!-- 引入js --
script typetext/javascript src./videojs/video.min.js/script
script typetext/javascript src./videojs/videojs-flash.js/scriptscript
videojs.options.flash.swf ./videojs/video-js.swfvar player videojs(test_video, {autoplay:true});player.play();
/script注意使用谷歌浏览器播放时需要开启flash允许 方案三ffmpeg videortsp转hls播放 HLS (HTTP Live Streaming) 直播 是有苹果提出的一个基于http的协议。其原理是把整个流切分成一个个的小视频文件然后通过一个m3u8的文件列表来管理这些视频文件
HTTP Live Streaming 并不是一个真正实时的流媒体系统这是因为对应于媒体分段的大小和持续时间有一定潜在的时间延时。在客户端至少在一个分段媒体文件被完全下载后才能够开始播放而通常要求下载完两个媒体文件之后才开始播放以保证不同分段音视频之间的无缝连接。
此外在客户端开始下载之前必须等待服务器端的编码器和流分割器至少生成一个TS文件这也会带来潜在的时延。
服务器软件将接收到的流每缓存一定时间后包装为一个新的TS文件然后更新m3u8文件。m3u8文件中只保留最新的几个片段的索引以保证观众任何时候连接进来都会看到较新的内容实现近似直播的效果。
这种方式的理论最小延时为一个ts文件的时长一般为2-3个ts文件的时长。
实现步骤
安装ffmpeg工具ffmpeg转码
ffmpeg -i rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 D:/Program Files/html/hls/test.m3u8ffmpeg 关于hls方面的指令说明
-hls_time n: 设置每片的长度默认值为2。单位为秒-hls_list_size n:设置播放列表保存的最多条目设置为0会保存有所片信息默认值为5-hls_wrap n:设置多少片之后开始覆盖如果设置为0则不会覆盖默认值为0.这个选项能够避免在磁盘上存储过多的片而且能够限制写入磁盘的最多的片的数量-hls_start_number n:设置播放列表中sequence number的值为number默认值为0
3.video 播放
html
head
titlevideo/title
!-- 引入css --
link relstylesheet typetext/css href./videojs/video-js.min.css //head
body
div classvideoBoxvideo idmy_video_1 classvideo-js vjs-default-skin controlssource srchttp://localhost:8088/hls/test.m3u8 typeapplication/x-mpegURL /video
/div/body
/html
script typetext/javascript src./videojs/video.min.js/script
script typetext/javascript src./videojs/videojs-contrib-hls.min.js/script
script
videojs.options.flash.swf ./videojs/video-js.swfvar player videojs(my_video_1, {autoplay:true});player.play();
/script方案四VLC插件播放 播放步骤
下载安装vlc浏览器播放 object typeapplication/x-vlc-plugin pluginspagehttp://www.videolan.org/ idvlc eventsfalse width720 height410param namemrl valuertsp://admin:12345192.168.10.235:554/h264/ch1/main/av_stream /param namevolume value50 /param nameautoplay valuetrue /param nameloop valuefalse /param namefullscreen valuefalse /param namecontrols valuefalse /
/object优缺点
优点 可以直接播放RTSP无需任何中介服务器的帮助缺点 需要手动安装插件 基于NPAPI不被最新的 Chrome 和 Firefox 支持如果你项目的其他功能都能兼容客户电脑上的 IE 浏览器这个方案就是首选。 其他方案 WebRTC
WebRTC 是支持网页浏览器进行实时音视频的一套API例如HTML5 通过 webRTC 直接调用摄像头但是如果要实现远程视频流的显示则需要将 RTSP 转换为 WebRTC 流供 web 端显示。
参考地址github.com/lulop-k/kur…
h5stream
参考地址
github.com/liweilup/h5…使用H5Stream开发实时监控系统H5Stream入门级应用播放RTSP流视频
GB28181
参考地址
LiveGBS GB28181流媒体服务github
jsmpeg.js ffmpeg websocket node
参考地址
# 在web中播放rtsp视频方案对比 写的不清楚的地方请自行百度网上案例很多有什么建议可以随时提出来交流
