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>相关文章：
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>&l…...
leetcode_2316 统计无向图中无法互相到达点对数
1. 题意 给定一个无向图， 统计无法互相到达的点对数。 统计无法互相到达点对数 2. 题解 其实还是求联通块，求联通块可以使用搜索进行标记。还要求得联通块中元素的大小。 联通块其实也就是不相交集合，也可以用并查集来做。 每求得一个联…...
数据结构知识点总结
一、常见的数据结构 数组，栈，队列，链表，散列表，二叉树，堆，跳表，图，树。 1. 数组： 数组的元素在内存中存储是连续存放的，占有连续的存储单元&am…...
【经济研究】数字技术创新与中国企业高质量发展—来自企业数字专利的证据
数据简介：在当前数字经济时代，数字技术创新已成为驱动中国经济发展的核心要素，中国经济由高速增长转向高质量发展的“新常态”发展阶段，开启了革新经济增长方式，优化产业结构，寻找新的经济增长动能关键期。…...
Windows运维相关经验技巧
常用工具 在线PS Photoshop在线 FAQ 电脑能上网，浏览器上不了网 # 错误原因： 设置了网络代理，浏览器无法通过网络代理上网# 解决办法 关闭网络代理 （1）wini，打开设置 （2）网络和I…...
AYIT嵌入式实验室2023级C语言训练1-4章训练题
文章目录 前言1. 判断闰年2.(ab-c)*d的计算问题3.计算三角形的周长和面积4.牛牛的等差数列5.判断字母6.网购7. 牛牛的通勤8.获得月份天数9.大小写转换10.KiKi说祝福语11.小乐乐求和12.奇偶统计13.KiKi求质数个数14.乘法表15.牛牛学数列16.牛牛学数列217.数位之和18.魔法数字变换…...
trino tpcds测试
先下载tpcds-kit（有Linux和macOS），根据其文档生成数据和查询的sql。 然后hive-testbench，在ddl-tpcds/text/alltables.sql中有建表语句（用hive建表）。 建完表后LOAD DATA local INPATH "/Users/ding…...
SpringCloud学习笔记（上）：服务注册与发现：Eureka、Zookeeper、Consul+负载均衡服务调用：Ribbon
壹、零基础 一、微服务架构零基础理论入门 SpringCloud分布式微服务架构的一站式解决方案，是多种微服务架构落地技术的集合体，俗称微服务全家桶。 二、从2.2.x和H版开始说起 springboot版本选择： git源码地址：https://github.…...
JavaPTA练习题 7-3 身体质量指数（BMI）测算
体重是反映和衡量一个人健康状况的重要标志之一，过胖和过瘦都不利于健康，BMI（身体质量指数）计算方法：体重（以千克为单位）除以身高（以米为单位）的平方。中国成人正常的BMI…...
类的属性和方法（java)
类和对象的使用 创建类，设计类的成员创建类的对象通过“对象.属性”或“对象.方法”调用对象的结构 代码 public class Per {public static void main(String[] args) {// TODO Auto-generated method stub//创建Person类的对象Person p1 new Person();//Scanne…...
C++模拟实现——list
一、成员变量及其基本结构 1.基本结构模型 本质是一个带头双向循环列表，将节点进行封装，并且为了方便使用，进行重定义 2.节点的封装定义 template<class T>//定义节点struct list_node{list_node<T>* _prev;list_node<T>…...
FPGA的音乐彩灯VHDL流水灯LED花样，源码和视频
名称：FPGA的音乐彩灯VHDL流水灯LED 软件：Quartus 语言：VHDL 代码功能： （1）设计一彩灯控制电路，按要求控制8路（彩灯由发光 二极管代替，受实验箱限制，多路同…...
企业知识库软件，快速构建企业知识分享与团队协同的软件
企业知识库是一种特殊的在线协同文档工具，支持包括FAQ、文档、视频、知识图谱等。从本质上讲，它是基于企业知识库软件从而实现内部或外部知识的沉淀、集合、更新、共享等，能为员工或客户提供常见问题的标准回答。 今天我就基于HelpLook &…...
Java，输出一个10行的杨辉三角
据图可以发现，杨辉三角是每行的首元素和末元素都为1，中间的元素都是等于它上面的元素加上左上角的元素。 首先，先完成二数组的创建和初始化，第一行的长度为一，第二行的长度为二……以此类推。所以，外元素的…...
Java版Http请求post和get两种调用实现
在实际项目中常涉及到相互调用，对于http接口的调用，需要经过建立连接，拼接参数，调用等步骤，记录下来，方便查看。 第一步、引入jar包 pom中引入apache的httpclient包 <dependency><groupId>c…...
yjs demo: 多人在线协作画板
基于 yjs 实现实时在线多人协作的绘画功能 支持多客户端实时共享编辑自动同步，离线支持自动合并，自动冲突处理 1. 客户端代码（基于Vue3） 实现绘画功能 <template><div style"{width: 100vw; height: 100vh; over…...
虹科分享 | 赋能物流机器人：CANopen通信如何发挥重要作用？
现代物流领域迅速融入了技术进步，特别是随着自主机器人的兴起，这一趋势越发明显。确保这些机器人在复杂的仓库环境中精确运行的一个关键方面是CANopen通信协议。该协议集成了各种组件（电机、传感器、摄像头和先进的电池系统）&…...
南丁格尔玫瑰图
目录 由来 效果图 echarts官网找相似图 将南丁格尔玫瑰图引进html页面中 引入echarts 准备容器 初始化echarts实例对象 指定配置项和数据（官网给的option） 将配置项给echarts 自定义南格丁尔玫瑰图 修改颜色 修改玫瑰图大小 修改图的模式为半…...
vue 大文件切片下载
前提是你上传的时候也是切片上传，下载的时候后端给你返回的是一个文件id的数组，如果是你就可以用下面的方法 // 循环下载文件 // id是每个文件的id type 是一个类型，我传入是应为给不同的组件赋值getFile(id, type) {// 通过wen文件id去获取…...
2023年“绿盟杯”四川省大学生信息安全技术大赛
pyfile 先check源码，没什么发现，接着进行目录扫描，扫到路径 /download 下载备份文件得到 www.zip，解压得到app.py 大致审一下代码： 在read目录下给file传参进行请求，如果这个东西存在就会读取出来 这里…...
AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南
点一下关注吧！！！非常感谢！！持续更新！！！ 🚀 AI篇持续更新中！（长期更新） 目前2025年06月05日更新到： AI炼丹日志-28 - Aud…...
【力扣数据库知识手册笔记】索引
索引 索引的优缺点 优点1. 通过创建唯一性索引，可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度（创建索引的主要原因）。3. 可以加速表和表之间的连接，实现数据的参考完整性。4. 可以在查询过程中，…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...
屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！
5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。 项目投运后，每年可节约标煤3670…...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
3-11单元格区域边界定位(End属性)学习笔记
返回一个Range 对象，只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意：它移动的位置必须是相连的有内容的单元格…...
C++.OpenGL （14/64）多光源（Multiple Lights）
多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》
这段 Python 代码是一个完整的 知识库数据库操作模块，用于对本地知识库系统中的知识库进行增删改查（CRUD）操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 📘 一、整体功能概述 该模块…...