【RTSP】使用webrtc播放rtsp视频流
一、简介rtsp流一样寻常是监控、摄像机的及时视频流，如今的主流欣赏器是不支持播放rtsp流文件的，以是必要借助其他方案来播放及时视频，下面先容下我接纳的webrtc方案，实测可行。
二、webrtc-streamer是什么？
webrtc-streamer是一个使用简单机制通过 WebRTC 流式传输视频捕捉装备和 RTSP 源的项目,它内置了一个小型的 HTTP server 来对 WebRTC必要的干系接口提供支持。webrtc-streamer就相当于一个微型服务器。
三、详细的开辟使用步调
1、下载webrtc-streamer，我下载的是最新的window版本，各人可以根据自己开辟需求下载对应的版本。
下载所在：https://github.com/mpromonet/webrtc-streamer/releases
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMTllNTkwMjI0MGNkNDY1ZTgyZmExZjVkZTU5ZjViMTQucG5n
2、解压下载的安装包
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZDc5M2EzZmM4MjYyNDhhNDg1Y2E1NTY1YmRmZGRkNzkucG5n
3、双击webrtc-streamer.exe运行步伐
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMjZmOWRmZTU3N2M0NDgwNmE1NGIxNjZmYmFhOWQ3NzcucG5n
如下图则启动乐成，此时可以通过127.0.0.1:8000在欣赏器访问可以看到本机监控画面(即自己电脑桌面)。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNWQyNDRiM2M0OTU2NDA1Yjk3MzcwMmZkZDYzZGE3NDUucG5n
当你同时打开多个视频流/访问窗口时，发现当地CPU会快速上涨，cpu太高的话打字都非常卡。以是在使用的时间不要直接双击打开webrtc-streamer.exe步伐，而是在cmd里使用下令启动exe，必要加上这个设置参数 -o。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvZmNiMzA2N2ExYTA2NGExM2I3NGRkZmIyYmFkZmE3ZDQucG5n
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvNWEwZDY5YTk5ODYxNGVhZjg2OTU3OGFmN2EyZjhkNTcucG5n
4、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目你必要用的位置。可以按需引入局部使用，也可以全局引入使用，这里保举局部引入使用，全局会比力耗性能，各人可以自行选择。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvY2U0MjgxZjY5MWE5NGM3Y2E1YTMyNzg0NTBmNTZhMWQucG5n
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvY2Y2OGM2OTg3ZWRhNDMxZjk2ZmM1ZDc5ZjU2YmRiMDgucG5n
5、开始在项目中使用webrtc-streamer实现rtsp及时视频播放
注意：
1.第3步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1，端口可
见第3步截图为8000；各监控设备厂商有自己的RTSP地址格式connect要传入正确的rtsp地址。
2.如果是在本机启动的话，127.0.0.1也可以换成你的本地ip地址。
3.在本地测试完成没问题之后是要部署到生产环境的，这个时候就要把serverUrl中的127.0.0.1或者本地ip换成服务器的ip,端口依然是你启动webrtc-streamer程序的端口。
4.new WebRtcStreamer(id,serverUrl)：id为<video id="video"></video>播放组件的id,可以自己定义。
我选择的是局部引入，在必要地方直接新建js文件夹，把webstreamer.js和adapter.min.js文件放到此中，在vue文件中直接使用即可。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvMmU4YjdjMGM3YzRhNGQ5OTgwNzY0MTQxMzMxMmM0MWMucG5n
注意点：假如adapter.min.js文件中假如一下红框中的引入文件有.js后缀的话最好去掉，要否则使用的时间大概会出现报错。
https://dis.qidao123.com/imgproxy/aHR0cHM6Ly9pLWJsb2cuY3NkbmltZy5jbi9kaXJlY3QvOGZjMjBlNDI1ZDkyNGEwNmFiYjI4YmUwNjE3M2EzN2EucG5n
（1）单个视频流Demo
<template>
<div>
<video id="video" controlsheight=
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]