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

将转换rtsp的webrtc播放html页面内嵌在vue页面内测试项目vue内嵌标签iframevue向静态html页面传值测试项目链接：https://pan.baidu.com/s/1P-sO16LikfN0cmPXHT5oGw提取码：19zh项目结构vue内嵌标签iframe将需要内嵌的html代码放入 public/static/test.html下放入其他位置可能会出现循环嵌套在test

是子文阿

4766人浏览 · 2021-06-19 16:04:27

是子文阿 · 2021-06-19 16:04:27 发布

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

测试项目
vue内嵌标签 iframe
vue向静态html页面传值

测试项目

链接：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>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^