vue前端部署webrtc-streamer访问摄像机视频流教程
实现摄像头的直播功能实在有许多方案，像是安装vlc插件、rtsp转rtmp然后利用videojs通过flash播放rtmp，以及hls .m3u8等方式然而现今的欣赏器对于vlc插件险些都不再支持了，flash在2020年也将被chrome制止支持，而.m3u8的方案用来做直播的话似乎延长很高
经过一番查找，最终决定利用B站（bilibili）开源的flvjs作为解决方案，其原理是后端用ffmpeg将rtsp视频流转换为flv，然后通过websocket传输flv视频流，然后前端通过websocket获取到视频流后，利用flvjs对视频流再一次处置处罚并进行播放，这是一套无插件无flash免费的视频直播解决方案。
但是我们发现利用flv.js播放视频流会出现卡顿延长的标题，特别是播放多路视频流时，延长标题非常严重。背面我们又发现了通过webrtc-streamer播放视频流的方法，成功解决了延长卡顿的标题。
1、webrtc-streamer的安装部署
下载地址：
https://github.com/mpromonet/webrtc-streamer/releases
https://img-blog.csdnimg.cn/direct/d140acd26111485bbdafbda1fe7b8dd8.png
根据需求进行下载安装即可，我们这里下载是windows版本。
2、部署运行
解压后文件如下所示，打开cmd命令
https://img-blog.csdnimg.cn/direct/4f12bc13863945fabde7d7b8b67a5b70.png
实行命令webrtc-streamer.exe -H 127.0.0.1:8010 -o，出现以下即表示运行成功。
https://img-blog.csdnimg.cn/direct/e0eddeec04a44bf8ba3bfbb6ec642d1b.png
再次夸大-H背面是你要监听的地址端口， -o 为了不转码，利用GPU运行，从而降低CPU负荷。
3、vue前端设置
起首，在template里进行视频播放配置
https://img-blog.csdnimg.cn/direct/eb69a254c8564a24857b7242c3f9ab87.png 然后在script里配置
mounted() {
//player_0：需要绑定的video控件ID
//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
this.webRtcServer1 = new WebRtcStreamer('player_0', location.protocol + '//127.0.0.1:8010')
// //需要查看的rtsp地址
this.webRtcServer1.connect(this.rtsp0)
} 固然不要忘了在data里配置我们的rtsp视频流地址。
注：这里配置的webrtc-streamer设备IP和端口要和前面启动监听的地址一样才行。
rtsp可以根据我们的需求进行配置，内网摄像机rtsp地址、外网rtsp视频流地址均可正常播放。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]