将转换rtsp的webrtc播放html页面内嵌在vue页面内

测试项目

链接:https://pan.baidu.com/s/1P-sO16LikfN0cmPXHT5oGw
提取码:19zh

项目结构
在这里插入图片描述

vue内嵌标签 iframe

将需要内嵌的html代码放入 public/static/test.html下
放入其他位置可能会出现循环嵌套

在test.vue页面使用iframe 标签

<iframe style="width: 1700px;height:  1200px;" name="ddddd" id="iframes" scrolling="auto" src="/static/test.html?data=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></iframe>

src 填写绝对路径
不能填写相对路径

vue向静态html页面传值

在src后加?data =rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov
表示为传入一个data
在html内去读取这个data
test.html

<html>
	<head>
		<script src="js/webrtcstreamer.js"></script>
		<script>
			//     // 接受从vue组件中传过来的参数
			var url = location.search; //这一条语句获取了包括问号开始到参数的最后,不包括前面的路径
			var params = url.substr(1); //去掉问号
			var pa = params.split("&");
			var s = new Object();
			for (var i = 0; i < pa.length; i++) {
				s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
			}
			console.log(s.data)
			window.onload = function() {
				webRtcServer = new WebRtcStreamer("video", "http://192.168.0.101:8000");
				webRtcServer.connect(s.data);
			}
			window.onbeforeunload = function() {
				webRtcServer.disconnect();
			}
		</script>
	</head>
	<body>
		<h1 value="da3"></h1>
		<video id="video" style="width: 100%;height: 100%;" />
	</body>
</html>

效果截图
在这里插入图片描述

如何test.vue多复制几个iframe

<template>
	<div>
		<h1>123</h1>
		<iframe style="width: 1700px;height:  1200px;" name="ddddd" id="iframes" scrolling="auto" src="/static/test.html?data=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></iframe>
		<iframe style="width: 1700px;height:  1200px;" name="ddddd" id="iframes" scrolling="auto" src="/static/test.html?data=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></iframe>
		<iframe style="width: 1700px;height:  1200px;" name="ddddd" id="iframes" scrolling="auto" src="/static/test.html?data=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></iframe>
		<iframe style="width: 1700px;height:  1200px;" name="ddddd" id="iframes" scrolling="auto" src="/static/test.html?data=rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov"></iframe>
	</div>
</template>

<script>
	export default {
	  data(){
			  
		  return{
			  tData:"123",
		  }
	  },
	  mounted:{
	  },
	  	
	  methods:{
		   sentToIframe() {

			  },
	  }
	}
</script>

<style>
</style>

效果如下
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐