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

最新推荐文章于 2024-06-12 15:24:15 发布

是子文阿

最新推荐文章于 2024-06-12 15:24:15 发布

阅读量4.5k

点赞数 8

分类专栏：视频流文章标签： vue rtsp webrtc

本文链接：https://blog.csdn.net/qq_45777115/article/details/118054978

版权

视频流专栏收录该内容

2 篇文章 3 订阅

订阅专栏

将转换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>

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

是子文阿

关注

8
点赞
踩
36

收藏

觉得还不错? 一键收藏
37
评论
将转换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.vue页面使用iframe 标签<iframe style="width:
复制链接

扫一扫

专栏目录