vue3+WebRTC拉流（正确姿势）

最近我要改老项目的一个vr实时同步画面的问题，后端返回我的是一个前缀为webrtc://********.flv  的视频链接，于是我开始与这个链接进行长达两天的斗争，下面是斗争结果，各位同志过目

 我使用的是jswebrtc

git仓库地址 （项目 /dist里有jswec.min.js文件）

GitHub - kernelj/jswebrtc: JSWebrtc – 支持 SRS 的 Webrtc 播放器

下面是我苦心钻研出来的示例代码（不好用你来骂我）

在你项目中的index.html中引入jswebrtc.min.js

页面中设置video元素

//页面中设置video的样式以及类名，ref等

下面是代码逻辑

let videoSrc = 'webrtc://192.168.0.11/live/c.flv'
		const initVideo = (url) => {

				// 播放器存在 清空重置
				if (player) {
					player.destroy()
					player = null
				}
				let videoDom = document.getElementById('webrtc')		// 初始化播放器 
				player = new JSWebrtc.Player(url, {
					video: videoDom,
					autoplay: true,
					onPlay: (obj) => {
						// 监听video元素状态，可播放时进行播放 。 某些情况下  autoplay 会失效
						// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
						// 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
						videoDom.addEventListener('canplay', function () {
							videoDom.play()
						})
						// console.log(obj, '播放器开始播放！')
					}
				})

		}

调用这个方法的时候吧url传进去就可以了

initVideo(videoSrc)

以下是全部代码

//页面部分



//script部分
let videoSrc = 'webrtc://192.168.0.11/live/c.flv'
		const initVideo = (url) => {
				// 播放器存在 清空重置
				if (player) {
					player.destroy()
					player = null
				}
				let videoDom = document.getElementById('webrtc')		// 初始化播放器 
				player = new JSWebrtc.Player(url, {
					video: videoDom,
					autoplay: true,
					onPlay: (obj) => {
						// 监听video元素状态，可播放时进行播放 。 某些情况下  autoplay 会失效
						// mdn https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canplay_event
						// 菜鸟 https://www.runoob.com/tags/av-event-canplay.html
						videoDom.addEventListener('canplay', function () {
							videoDom.play()
						})
						// console.log(obj, '播放器开始播放！')
					}
				})
		}
//调用方法
initVideo(videoSrc)