最近有个小活其中有涉及播放大华及海康摄像头视频流的需求，经调查发现可以使用webrtc来实现相关功能，记录一下，步骤如下：

１、下载webrtc ：Releases · mpromonet/webrtc-streamer · GitHub

        winows下下载：webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

２、js准备

将下载包中html/libs文件夹下webrtcstreamer.js、adapter.min.js文件复制到VUE项目public目录中

VUE代码如下：

<code> <div class="coTitle">视频</div>code>

<video id='video' controls autoplay autobuffer muted preload='auto'code>

style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'>code>

</video>

</script>

<script lang="js">code>

import {WebRtcStreamer} from './webrtcstreamer.js';

export default {

name: 'index1',

data() {

return {

webRtcServer: null

}

},

mounted() {

//video：需要绑定的video控件ID

//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000

this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')

//需要查看的rtsp地址

this.webRtcServer.connect('rtsp://192.169.0.1:9000/dss/monitor/param?cameraid=1000211%210&substream=1')

},

beforeDestroy() {

this.webRtcServer.disconnect()

this.webRtcServer = null

},

}

</script>

3、首选运行 webrtc-streamer.exe 有的说不加参数CPU高，我的电脑上没加参数也不高，懒，没测试。不过运行 webrtc-streamer.exe 后有个黑框，我是自己写了个服务，如果webrtc没启动，就定时启动一下，这样播放的电脑上就没有黑框了。

４、完成上述 123步就可以正常播放，有一个关键问题特意说明一下：

海康的视频流会提示:Start playing sink for "video/H264" subsession

可能出现此问题的原因是 音视频在同一个流中

解决方法如下：

//this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");

var audioUrl="";code>

var options="rtptransport=tcp&timeout=60";code>

webRtcServer.connect(videoUrl,audioUrl,options);