vue+webrtc |
您所在的位置：网站首页 › 下载VUE视频 › vue+webrtc |
vue+webrtc
|
首先下载webtrc-streamer的压缩包，在github上有 https://github.com/mpromonet/webrtc-streamer/releases 下载windows版本 
双击webrtc-streamer.exe启动服务 
将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public/stactic目录下，在index.html文件里引入这两个js文件。 测试代码 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; } };此时运行网页已经可以看到视频了。 
视频可以正常播放，但是没有声音，原因未知，请知道的朋友告知感谢 参考：vue播放rtsp视频流_vue.js_黄桃罐头和你-DevPress官方社区 (csdn.net) |
【本文地址】
今日新闻 |
推荐新闻 |