首先下载webtrc-streamer的压缩包,在github上有
https://github.com/mpromonet/webrtc-streamer/releases
下载windows版本
![](https://img-blog.csdnimg.cn/img_convert/3c5026f71cfd57e7d46c5365854e0672.png)
双击webrtc-streamer.exe启动服务
![](https://img-blog.csdnimg.cn/img_convert/d6780ad61829ec1913d9f960ba7ccf7b.png)
将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/stactic目录下,在index.html文件里引入这两个js文件。
测试代码
<template>
<div class="home">
<video id="video" autoplay width="600" height="400" controls></video>
<video id="video1" autoplay width="600" height="400" controls></video>
</div>
</template>
<script>
import "../utils/webrtcstreamer.js"
import "../utils/adapter.min.js"
export default {
name: "HomeView",
data() {
return {
webRtcServer: null,
webRtcServer1: null
};
},
mounted() {
//192.168.1.100是启动webrtc-streamer的服务器IP,8000是webrtc-streamer的默认端口号,可以在服务端启动的时候更改的
this.webRtcServer = new WebRtcStreamer(
"video",
location.protocol + "//127.0.0.1:8000"
);
//需要看的rtsp视频地址,可以在网上找在线的rtsp视频地址来进行demo实验,在vlc中能播放就能用
// this.webRtcServer.connect(
// "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
// );
this.webRtcServer.connect(
"rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
);
//第二个视频
//根据不同的video标签来控制
this.webRtcServer1 = new WebRtcStreamer(
"video1",
location.protocol + "//127.0.0.1:8000"
);
this.webRtcServer1.connect(
"rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4"
);
},
methods: {},
beforeDestroy() {
this.webRtcServer.disconnect();
this.webRtcServer = null;
}
};
</script>
此时运行网页已经可以看到视频了。
![](https://img-blog.csdnimg.cn/img_convert/a9e088c937062b7e8df95aa5e0eab942.png)
视频可以正常播放,但是没有声音,原因未知,请知道的朋友告知感谢