vue视频直接播放rtsp流;vue视频延迟问题解决;webRTC占cpu太大卡死问题解决;解决webRTC播放卡花屏问题:

播放多个视频

 <div class="video-box"><div class="video"><iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoLeftUrl"></iframe></div><div class="video"><iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRightUrl"></iframe></div><div class="video"><iframe style="width:100%;height:100%;" name="ddddd" id="iframes" scrolling="auto" :src="videoRtspUrl"></iframe></div></div>

js部分其中的item就是rtsp视频流

    getShareVideoLeftUrl(item) {this.videoLeftUrl = `/static/test.html?data=${item}`},getShareVideoRightUrl(item) {this.videoRightUrl = `/static/test.html?data=${item}`},getShareVideoRtspUrl(item) {this.videoRtspUrl = `/static/test.html?data=${item}`},

public/static/test.html内容

<html><head><script src="js/webrtcstreamer.js"></script><script>// 接受从vue组件中传过来的参数let url = location.search; //这一条语句获取了包括问号开始到参数的最后,不包括前面的路径let params = url.substr(1); //去掉问号let pa = params.split("&");let s = new Object();//  设置后端服务地址let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtcfor (let 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", VIDEOURL);webRtcServer.connect(s.data);}window.onbeforeunload = function() {webRtcServer.disconnect();}</script></head><body><h1 value="da3"></h1><video id="video" style="width: 100%;height: 100%;" controls autoplay muted /></body>
</html>

其中public/static/js/webrtcstreamer.js文件内容如下

var WebRtcStreamer = (function() {/** * Interface with WebRTC-streamer API* @constructor* @param {string} videoElement - id of the video element tag* @param {string} srvurl -  url of webrtc-streamer (default is current location)
*/
var WebRtcStreamer = function WebRtcStreamer (videoElement, srvurl) {if (typeof videoElement === "string") {this.videoElement = document.getElementById(videoElement);} else {this.videoElement = videoElement;}this.srvurl           = srvurl || location.protocol+"//"+window.location.hostname+":"+window.location.port;this.pc               = null;    this.pcOptions        = { "optional": [{"DtlsSrtpKeyAgreement": true} ] };this.mediaConstraints = { offerToReceiveAudio: true, offerToReceiveVideo: true };this.iceServers = null;this.earlyCandidates = [];
}WebRtcStreamer.prototype._handleHttpErrors = function (response) {if (!response.ok) {throw Error(response.statusText);}return response;
}/** * Connect a WebRTC Stream to videoElement * @param {string} videourl - id of WebRTC video stream* @param {string} audiourl - id of WebRTC audio stream* @param {string} options -  options of WebRTC call* @param {string} stream  -  local stream to send
*/
WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream) {this.disconnect();// getIceServers is not already receivedif (!this.iceServers) {console.log("Get IceServers");fetch(this.srvurl + "/api/getIceServers").then(this._handleHttpErrors).then( (response) => (response.json()) ).then( (response) =>  this.onReceiveGetIceServers.call(this,response, videourl, audiourl, options, localstream)).catch( (error) => this.onError("getIceServers " + error ))} else {this.onReceiveGetIceServers(this.iceServers, videourl, audiourl, options, localstream);}
}/** * Disconnect a WebRTC Stream and clear videoElement source
*/
WebRtcStreamer.prototype.disconnect = function() {		if (this.videoElement) {this.videoElement.src = "";}if (this.pc) {fetch(this.srvurl + "/api/hangup?peerid="+this.pc.peerid).then(this._handleHttpErrors).catch( (error) => this.onError("hangup " + error ))try {this.pc.close();}catch (e) {console.log ("Failure close peer connection:" + e);}this.pc = null;}
}    /*
* GetIceServers callback
*/
WebRtcStreamer.prototype.onReceiveGetIceServers = function(iceServers, videourl, audiourl, options, stream) {this.iceServers       = iceServers;this.pcConfig         = iceServers || {"iceServers": [] };try {            this.createPeerConnection();var callurl = this.srvurl + "/api/call?peerid="+ this.pc.peerid+"&url="+encodeURIComponent(videourl);if (audiourl) {callurl += "&audiourl="+encodeURIComponent(audiourl);}if (options) {callurl += "&options="+encodeURIComponent(options);}if (stream) {this.pc.addStream(stream);}// clear early candidatesthis.earlyCandidates.length = 0;// create Offervar bind = this;this.pc.createOffer(this.mediaConstraints).then(function(sessionDescription) {console.log("Create offer:" + JSON.stringify(sessionDescription));bind.pc.setLocalDescription(sessionDescription, function() {fetch(callurl, { method: "POST", body: JSON.stringify(sessionDescription) }).then(bind._handleHttpErrors).then( (response) => (response.json()) ).catch( (error) => bind.onError("call " + error )).then( (response) =>  bind.onReceiveCall.call(bind,response) ).catch( (error) => bind.onError("call " + error ))}, function(error) {console.log ("setLocalDescription error:" + JSON.stringify(error)); } );}, function(error) { alert("Create offer error:" + JSON.stringify(error));});} catch (e) {this.disconnect();alert("connect error: " + e);}	    
}WebRtcStreamer.prototype.getIceCandidate = function() {fetch(this.srvurl + "/api/getIceCandidate?peerid=" + this.pc.peerid).then(this._handleHttpErrors).then( (response) => (response.json()) ).then( (response) =>  this.onReceiveCandidate.call(this, response)).catch( (error) => bind.onError("getIceCandidate " + error ))
}/*
* create RTCPeerConnection 
*/
WebRtcStreamer.prototype.createPeerConnection = function() {console.log("createPeerConnection  config: " + JSON.stringify(this.pcConfig) + " option:"+  JSON.stringify(this.pcOptions));this.pc = new RTCPeerConnection(this.pcConfig, this.pcOptions);var pc = this.pc;pc.peerid = Math.random();		var bind = this;pc.onicecandidate = function(evt) { bind.onIceCandidate.call(bind, evt); };pc.onaddstream    = function(evt) { bind.onAddStream.call(bind,evt); };pc.oniceconnectionstatechange = function(evt) {  console.log("oniceconnectionstatechange  state: " + pc.iceConnectionState);if (bind.videoElement) {if (pc.iceConnectionState === "connected") {bind.videoElement.style.opacity = "1.0";}			else if (pc.iceConnectionState === "disconnected") {bind.videoElement.style.opacity = "0.25";}			else if ( (pc.iceConnectionState === "failed") || (pc.iceConnectionState === "closed") )  {bind.videoElement.style.opacity = "0.5";} else if (pc.iceConnectionState === "new") {bind.getIceCandidate.call(bind)}}}pc.ondatachannel = function(evt) {  console.log("remote datachannel created:"+JSON.stringify(evt));evt.channel.onopen = function () {console.log("remote datachannel open");this.send("remote channel openned");}evt.channel.onmessage = function (event) {console.log("remote datachannel recv:"+JSON.stringify(event.data));}}pc.onicegatheringstatechange = function() {if (pc.iceGatheringState === "complete") {const recvs = pc.getReceivers();recvs.forEach((recv) => {if (recv.track && recv.track.kind === "video") {console.log("codecs:" + JSON.stringify(recv.getParameters().codecs))}});}}try {var dataChannel = pc.createDataChannel("ClientDataChannel");dataChannel.onopen = function() {console.log("local datachannel open");this.send("local channel openned");}dataChannel.onmessage = function(evt) {console.log("local datachannel recv:"+JSON.stringify(evt.data));}} catch (e) {console.log("Cannor create datachannel error: " + e);}	console.log("Created RTCPeerConnnection with config: " + JSON.stringify(this.pcConfig) + "option:"+  JSON.stringify(this.pcOptions) );return pc;
}/*
* RTCPeerConnection IceCandidate callback
*/
WebRtcStreamer.prototype.onIceCandidate = function (event) {if (event.candidate) {if (this.pc.currentRemoteDescription)  {this.addIceCandidate(this.pc.peerid, event.candidate);					} else {this.earlyCandidates.push(event.candidate);}} else {console.log("End of candidates.");}
}WebRtcStreamer.prototype.addIceCandidate = function(peerid, candidate) {fetch(this.srvurl + "/api/addIceCandidate?peerid="+peerid, { method: "POST", body: JSON.stringify(candidate) }).then(this._handleHttpErrors).then( (response) => (response.json()) ).then( (response) =>  {console.log("addIceCandidate ok:" + response)}).catch( (error) => this.onError("addIceCandidate " + error ))
}/*
* RTCPeerConnection AddTrack callback
*/
WebRtcStreamer.prototype.onAddStream = function(event) {console.log("Remote track added:" +  JSON.stringify(event));this.videoElement.srcObject = event.stream;var promise = this.videoElement.play();if (promise !== undefined) {var bind = this;promise.catch(function(error) {console.warn("error:"+error);bind.videoElement.setAttribute("controls", true);});}
}/*
* AJAX /call callback
*/
WebRtcStreamer.prototype.onReceiveCall = function(dataJson) {var bind = this;console.log("offer: " + JSON.stringify(dataJson));var descr = new RTCSessionDescription(dataJson);this.pc.setRemoteDescription(descr, function()      { console.log ("setRemoteDescription ok");while (bind.earlyCandidates.length) {var candidate = bind.earlyCandidates.shift();bind.addIceCandidate.call(bind, bind.pc.peerid, candidate);				}bind.getIceCandidate.call(bind)}, function(error) { console.log ("setRemoteDescription error:" + JSON.stringify(error)); });
}	/*
* AJAX /getIceCandidate callback
*/
WebRtcStreamer.prototype.onReceiveCandidate = function(dataJson) {console.log("candidate: " + JSON.stringify(dataJson));if (dataJson) {for (var i=0; i<dataJson.length; i++) {var candidate = new RTCIceCandidate(dataJson[i]);console.log("Adding ICE candidate :" + JSON.stringify(candidate) );this.pc.addIceCandidate(candidate, function()      { console.log ("addIceCandidate OK"); }, function(error) { console.log ("addIceCandidate error:" + JSON.stringify(error)); } );}this.pc.addIceCandidate();}
}/*
* AJAX callback for Error
*/
WebRtcStreamer.prototype.onError = function(status) {console.log("onError:" + status);
}return WebRtcStreamer;
})();if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')module.exports = WebRtcStreamer;
elsewindow.WebRtcStreamer = WebRtcStreamer;

这里启用需要下载webRTC

  https://github.com/mpromonet/webrtc-streamer/releases

需要注意的是这里启动不要直接双击而是使用cmd命令启动

 

start 应用名 -o 

一定加上-o否则webRTC占cpu太大 容易卡死


解决卡花屏问题:
在html页面中的webRtcServer.connect(s.data,"","rtptransport=tcp");加上"","rtptransport=tcp"就搞定
<html><head><script src="js/webrtcstreamer.js"></script><script>// 接受从vue组件中传过来的参数let url = location.search; //这一条语句获取了包括问号开始到参数的最后,不包括前面的路径let params = url.substr(1); //去掉问号let pa = params.split("&");let s = new Object();//  设置后端服务地址let VIDEOURL = "http://172.18.127.7:8000" //服务视频webrtcfor (let 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", VIDEOURL);webRtcServer.connect(s.data,"","rtptransport=tcp");}window.onbeforeunload = function() {webRtcServer.disconnect();}</script></head><body><h1 value="da3"></h1><video id="video" style="width: 100%;height: 100%;" controls autoplay muted /></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/112240.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL数据库操作(创建、修改、删除、查询)

MySQL查看或显示数据库&#xff08;SHOW DATABASES语句&#xff09; 在 MySQL 中&#xff0c;可使用 SHOW DATABASES 语句来查看或显示当前用户权限范围以内的数据库。查看数据库的语法格式为&#xff1a; SHOW DATABASES [LIKE ‘数据库名’]; 语法说明如下&#xff1a; 语法…

轴承寿命相关细节的研究

数据集PHM2012 介绍一下IEEE PHM2012数据集_phm2012轴承数据集-CSDN博客 标签如何设置的? 剩余寿命预测的标签设置_rul 标签_兔子牙丫丫的博客-CSDN博客 参考自刘硕师兄的毕业答辩PPT 图 4.9 训练数据的切分方法 数据段的重叠切分&#xff0c;不仅可以覆盖更多的标签数据…

任务调度框架-如何实现定时任务+RabbitMQ事务+手动ACK

任务调度框架 Java中如何实现定时任务&#xff1f; 比如&#xff1a; 1.每天早上6点定时执行 2.每月最后一个工作日&#xff0c;考勤统计 3.每个月25号信用卡还款 4.会员生日祝福 5.每隔3秒&#xff0c;自动提醒 10分钟的超时订单的自动取消&#xff0c;每隔30秒或1分钟查询…

golang 在 Mac、Linux、Window 下交叉编译

目录 交叉编译参数说明CGO_ENABLEDGOOS : 目标操作系统【darwin、linux、windows】GOARCH &#xff1a;目标架构【386、amd64、arm】 Mac 下编译&#xff0c;Linux / Windows 下执行Linux 下编译&#xff0c;Mac / Windows 下执行Windows 下编译&#xff0c;Mac / Linux 下执行…

Redis在分布式场景下的应用

分布式缓存 缓存的基本作用是在高并发场景下对应服务的保护缓冲 – 基于Redis集群解决单机Redis存在的问题 单机的Redis存在四大问题&#xff1a; redis由于高强度性能采用内存 但是意味着丢失的风险单结点redis并发能力有限分布式服务中数据过多 依赖内存的redis 明显单机不…

WuThreat身份安全云-TVD每日漏洞情报-2023-10-18

漏洞名称:致远 OA XML 外部实体注入漏洞 漏洞级别:高危 漏洞编号:NULL 相关涉及:V5/G6 V6.0及以上全系列版本 漏洞状态:POC 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-26027 漏洞名称:XNSOFT NCONVERT 图像文件缓冲区溢出 漏洞级别:中危 漏洞编号:CVE-…

行为型模式-迭代器模式

迭代器模式是 Java 和 .Net 编程环境中非常常用的设计模式。这种模式用于顺序访问集合对象的元素&#xff0c;不需要知道集合对象的底层表示。 意图&#xff1a;提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。 主要解决&#xff1a;不同的方式…

微信小程序自定义组件及投票管理与个人中心界面搭建

14天阅读挑战赛 人生本来就没定义&#xff0c;任何的价值都是自己赋予。 目录 一、自定义tabs组件 1.1 创建自定义组件 1.2 tabs.wxml 编写组件界面 1.3 tabs.wxss 设计样式 1.4 tabs.js 定义组件的属性及事件 二、自定义组件使用 2.1 引用组件 2.2 编写会议界面内容 …

DTI综述(更新中)

Deep Learning for drug repurposing&#xff1a;methods&#xff0c;datasets&#xff0c;and applications 综述读完&#xff0c;觉得少了点东西&#xff0c;自己写个DTI综述 Databases(包括但不限于文章中的) DATABASEDESCRIBEBindingDB有详细的drug信息和对应的target&a…

LeetCode 面试题 10.09. 排序矩阵查找

文章目录 一、题目二、C# 题解 一、题目 给定MN矩阵&#xff0c;每一行、每一列都按升序排列&#xff0c;请编写代码找出某元素。 示例: 现有矩阵 matrix 如下&#xff1a; [ [1, 4, 7, 11, 15], [2, 5, 8, 12, 19], [3, 6, 9, 16, 22], [10, 13, 14, 17, 24], [18, 21, 23, …

推荐《中华小当家》

《中华小当家&#xff01;》 [1] 是日本漫画家小川悦司创作的漫画。该作品于1995年至1999年在日本周刊少年Magazine上连载。作品亦改编为同名电视动画&#xff0c;并于1997年发行播出。 时隔20年推出续作《中华小当家&#xff01;极》&#xff0c;于2017年11月17日开始连载。…

android 13.0 禁止app启动(不显示app列表)和允许app运行

1.前言 在13.0产品开发中,在进行教育平板的定制开发中,可以有需求要实现禁止app启动和允许app运行的接口,禁用后app后已安装的应用从桌面消失,只存在于系统设置内的应用列表里,无法调用。启用后,恢复正常使用,在桌面显示。对于app管理的都是由PackageManager来负责的,P…

简单秒表设计仿真verilog跑表,源码/视频

名称&#xff1a;简单秒表设计仿真 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 秒表显示最低计时为10ms&#xff0c;最大为59:99&#xff0c;超出返回00&#xff1a;00 具有复位、启动、暂停三个按键 四个数码管分别显示4个时间数字。 演示…

LCR 177. 撞色搭配

LCR 177. 撞色搭配 LCR 177. 撞色搭配 迷你游戏之寻找两个单身狗 int* sockCollocation(int* sockets, int socketsSize, int* returnSize) {int* arr (int*)malloc(2 * sizeof(int));int ret 0;for (int i 0; i < socketsSize; i){ret ^ sockets[i];}int pos 0;for…

Maven 打包 jar、war 包配置

1、导出 jar 包配置 <build><finalName>weaver-customerservice-distribution-component</finalName><resources><resource><directory>src/main/java</directory><includes><include>**/*.xml</include></inc…

【七:docken+jenkens部署】

一&#xff1a;腾讯云轻量服务器docker部署Jenkins https://blog.csdn.net/qq_35402057/article/details/123589493 步骤1&#xff1a;查询jenkins版本&#xff1a;docker search jenkins步骤2&#xff1a;拉取jenkins镜像 docker pull jenkins/jenkins:lts步骤3&#xff1a;…

python -pandas -处理excel合并单元格问题

对于合并的单元格&#xff0c;不进行处理情况下&#xff0c;会默认输出nan问题 解决方法&#xff1a; class A(object):def __init__(self, xlsx_file_path, sheet_index):self.xlsx_file FileDataProcesser.read_excel(xlsx_file_path, sheet_index)self.sheet_data self.…

hive和presto的求数组长度函数区别及注意事项

1、任务 获取邮箱字符串’后字符串 &#xff0c;求长度 2、hive & spark-sql 求数组长度的函数 size hive & spark-sql 求数组长度的函数 sizeselect size(split(email, )),split(email, ),split(email, )[0],split(email, )[1] FROM (select "jack126.com"…

GitLab使用webhook触发Jenkins自动构建

1、jenkins安装gitlab插件 在插件管理中&#xff0c;搜索gitlab安装这个插件。 2、job中配置webhook地址和密钥 进入job设置&#xff0c;构建触发器中就可以看到gitlab的webhook配置&#xff0c;复制URL地址和随机令牌至gitlab中 勾选后&#xff0c;就可以展开设置&#xff…

代码随想录算法训练营第五十五天 | 300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300.最长递增子序列 视频讲解&#xff1a;动态规划之子序列问题&#xff0c;元素不连续&#xff01;| LeetCode&#xff1a;300.最长递增子序列_哔哩哔哩_bilibili 代码随想录 &#xff08;1&#xff09;代码 674. 最长连续递增序列 视频讲解&#xff1a;动态规划之子序列问题…