<template>
	<div class="monitors">
		<div class="myVedioBox bg-black">
			<video style="width: 100%;height: 200px;" id="rVideoPlayer" muted controls autoplay></video>
		</div>
	</div>
</template>

<script setup>
	import flvjs from 'flv.js'
	const { proxy } = getCurrentInstance(); // 获取实例中的proxy
	const props = defineProps({
	  data: {
	    data: [Number, String],
			default: 0
		}
	});
	
	const { data } = toRefs(props);
	let webRtcServer = null;
	let player = false;
	const VideoPlay = function(_url){
		if(player){
			webRtcServer.connect(null);
		}
		player = true;
		webRtcServer.connect("rtsp://admin:yzkj2021k@10.60.11.214:554/cam/realmonitor?channel=1&subtype=0");
	}
	watch(data, (newValue) => {
	    VideoPlay();
	},{ deep: true });
	onMounted(() => {
		webRtcServer = new WebRtcStreamer("rVideoPlayer","http://127.0.0.1:8000");
		VideoPlay();
	})
</script>

<style>
</style>