有同学问：我需要实时播放摄像头的rtsp视频流，但是浏览器不能直接播放。怎么解决呢？
这个需求可以通过插件或者转码来实现。
为了实现这一目标，可以使用许多解决方案，包括商业解决方案和开源解决方案。这里有一些开源解决方案。这里的所有解决方案都已尝试过，有的成功，有的不成功。不过，由于每个项目都不同，如果这次方法失败，还有可能改变项目。
C音视频开发学习资料：点击领取报酬→音视频开发（资料论文、面试题附视频指南）（FFmpegWebRTCRTMPRTSPHLSRTP）
方案一：html5websocketrtspproxy实现视频直播
实施原理
实施步骤
服务器安装streamedian服务器
客户端通过视频标签播放
videoid“testvideo”controlsautoplay>视频>
scripterc”free.player.1.8.4.js”>脚本>
脚本>
if(window.Streamedian){
warerrHandler函数（错误）{
console.log(‘err’,err.message);
};
varinfHandler函数(inf){
console.log(‘信息’,inf)
};
varplayerOptions{
套接字：“ws://localhost:8088/ws/”，
重定向NativeMediaErrors：true，
缓冲持续时间：30，
错误处理程序：错误处理程序，
信息处理程序：infHandler
};
varhtml5Playerdocument.getElementById(“testvideo”);
html5Player.src”rtsp://184.72.239.149/vod/mp4://BigBuckBunny175k.mov”;
varplayerStreamedian.player(‘testvideo’,playerOptions);
window.onbeforeunloadfunction(){
玩家玩家.destroy();
玩家为空；
请求为空；
}
}
脚本>
注意：测试时，首先向官网请求licensekey，否则socket只能识别localhost和127.0.0.1
的优点和缺点
优点：比较容易实现
缺点：付费、免费版本有很多限制
C音视频开发学习资料：点击领取报酬→音视频开发（资料论文、面试题附视频指南）（FFmpegWebRTCRTMPRTSPHLSRTP）
方案二：ffmpegnginxvideo、rtsp转rtmp播放
RTMP是Adob??e开发的协议。一般来说，可以使用Adob??eMediaServer轻松设置。随着开源时代的到来，一些专家开发了nginx的RTMP插件。也可以直接使用nginx来实现RTMP。
rtmp方式最大的优点是低延迟。经过测试，延迟一般在1-3秒，可以说是非常实时的。缺点是它是Adobe开发的，rtmp播放严重依赖flash。由于Flash本身的安全性，大多数现代浏览器都禁用Flash
实施步骤
安装ffmpeg工具
安装nginx时注意：Linux系统必须安装nginx-rtmp-module，Windows系统必须安装rtmp（如nginx1.7.11.3Gryphon）
更改nginx配置
rtmp
服务器
听1935；
实时应用程序{
继续生活；
记录；
}
应用程序{
继续生活；
赫尔森；
hlspathnginx-rtmp-模块/hls；
hlscleanupoff；
}
}
}
4.ffmpeg转码
FFMPg-i“rtsp://184.72.239.149/vod/mp4://BigBuckBunny175k.mov”-fflv-r25-s1080*720-an“rtmp://127.0.0.1:1935/hls/mystream”
5.视频播放
html>
头>
标题>视频标题>
linkrel”stylesheet”type”text/css”href”./videojs/video-js.min.css”/>
头>
正文>
videoid“testvideo”类“video-jsvjs-default-skinvjs-big-play-centered”controlsautoplay>
来源’rtmp://127.0.0.1:1935/hls/mystream’type’rtmp/flv’/>
视频>
正文>
html>
scripttype”text/javascript”src”./videojs/video.min.js”>脚本>
scripttype”text/javascript”src”./videojs/videojs-flash.js”>脚本>
脚本>
videojs.options.flash.swf”./videojs/video-js.swf”
varplayervideojs(‘testvideo’,{“自动播放”:true});
播放器.play();
脚本>
注意：使用谷歌浏览器玩时，必须开启flash权限。
C音视频开发学习资料：点击领取报酬→音视频开发（资料论文、面试题附视频指南）（FFmpegWebRTCRTMPRTSPHLSRTP）
第三种方案：ffmpegvideo、rtsp转hls播放
HLS（HTTPLiveStreaming）是Apple提出的基于http的直播流协议。原理是将整个流分割成小视频文件，然后通过m3u8文件列表来管理这些视频文件
由于与媒体片段的大小和持续时间相关的潜在延迟，HTTPLiveStreaming不是真正的实时流系统。在客户端，只有至少一个分段媒体文件下载完毕后才能开始播放。播放通常需要下载两个媒体文件，以确保音频和视频片段之间的无缝连接。
另外，客户端在开始下载之前，必须等待服务器端编码器和分流器生成至少一个TS文件，这也会带来潜在的延迟。
服务器软件将接收到的码流缓存一定时间后打包成新的TS文件，然后更新m3u8文件。m3u8文件中只保留最新片段的索引，保证观众每次连接都能看到最新的内容，达到类似直播的效果。
该方法理论上最小延迟为1个ts文件的持续时间，通常为2-3个ts文件。
实施步骤
安装ffmpeg工具
ffmpeg转码
ffmpeg-i”rtsp://184.72.239.149/vod/mp4://BigBuckBunny175k.mov”-ccopy-fhls-hlstime2.0-hlslistsize0-hlswrap15″D:/ProgramFiles/html/hls/test.m3u8″
hls上的ffmpeg说明
-hlstimen：设置每个切片的长度，默认为2。单位为秒
-hlslistsizen：设置保存到播放列表的最大条目数。设置为0将保存所有电影信息。默认值为5。
-hlswrapn：设置开始覆盖多少个切片。如果设置为0，则不会被覆盖。默认值为0。此选项可用于避免将太多切片保存到磁盘并限制写入磁盘的最大切片数。
-hlsstartnumbern：设置播放列表序号值为数字，默认为0
3.视频播放
html>
头>
标题>视频标题>
linkrel“样式表”类型“文本/css”href”./videojs/video-js.min.css”/>
头>
正文>
divclass“videoBox”>
videoid“myvideo1”类“video-jsvjs-default-skin”控件>
源文件“http://localhost:8088/hls/test.m3u8”类型“application/x-mpegURL”>
视频>
巨人>
正文>
html>
scripttype”text/javascript”src”./videojs/video.min.js”>脚本>
scripttype”text/javascript”src”./videojs/videojs-contrib-hls.min.js”>脚本>
脚本>
videojs.options.flash.swf”./videojs/video-js.swf”
varplayervideojs(‘myvideo1’,{“自动播放”:true});
播放器.play();
脚本>
C音视频开发学习资料：点击领取报酬→音视频开发（资料论文、面试题附视频指南）（FFmpegWebRTCRTMPRTSPHLSRTP）
解决方案4：播放VLC插件
播放步骤
下载并安装vlc
在浏览器中播放
objecttype’application/x-vlc-plugin’pluginspage”http://www.videolan.org/”id’vlc’events’false’width”720″height”410″>
‘mrl’值’rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/avstream’/>
‘体积’值’50’/>
‘自动播放’值’true’/>
‘循环’值’假’/>
‘全屏’值’false’/>
‘控制’值’假’/>
对象>
的优点和缺点
优点：RTSP可以直接播放，无需借助中间服务器
缺点：需要手动安装插件；它基于NPAPI，不支持最新的Chrome和Firefox
如果您的项目的其他功能与客户端计算机上的IE浏览器兼容，则此解决方案是首选。
其他选项
网络RTC
WebRTC是一组支持Web浏览器实时音频和视频的API。例如，HTML5直接通过webRTC调用摄像头。但是，如果要显示远程视频流，则必须将RTSP转换为WebRTC流才能在网页上显示。
h5流
GB28181
jsmpeg.jsffmpegwebsocketnode
如果您对音视频开发感兴趣或者对本文的一些讲解有自己的看法，可以在下面的留言框一起讨论。
相关文章
