当前位置：首页 > news >正文

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

news 2025/9/9 18:13:55

播放多个视频

 <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…...

编程日记 2023/10/21 23:16:12

leetcode_2316 统计无向图中无法互相到达点对数

1. 题意给定一个无向图， 统计无法互相到达的点对数。统计无法互相到达点对数 2. 题解其实还是求联通块，求联通块可以使用搜索进行标记。还要求得联通块中元素的大小。联通块其实也就是不相交集合，也可以用并查集来做。每求得一个联…...

编程日记 2023/10/21 23:15:11

数据结构知识点总结

一、常见的数据结构数组，栈，队列，链表，散列表，二叉树，堆，跳表，图，树。 1. 数组： 数组的元素在内存中存储是连续存放的，占有连续的存储单元&am…...

编程日记 2023/10/21 23:14:10

【经济研究】数字技术创新与中国企业高质量发展—来自企业数字专利的证据

数据简介：在当前数字经济时代，数字技术创新已成为驱动中国经济发展的核心要素，中国经济由高速增长转向高质量发展的“新常态”发展阶段，开启了革新经济增长方式，优化产业结构，寻找新的经济增长动能关键期。…...

编程日记 2023/10/21 23:13:09

Windows运维相关经验技巧

常用工具在线PS Photoshop在线 FAQ 电脑能上网，浏览器上不了网 # 错误原因： 设置了网络代理，浏览器无法通过网络代理上网# 解决办法关闭网络代理 （1）wini，打开设置 （2）网络和I…...

编程日记 2023/10/21 23:12:08

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.魔法数字变换…...

编程日记 2023/10/21 23:11:07

trino tpcds测试

先下载tpcds-kit（有Linux和macOS），根据其文档生成数据和查询的sql。然后hive-testbench，在ddl-tpcds/text/alltables.sql中有建表语句（用hive建表）。建完表后LOAD DATA local INPATH "/Users/ding…...

编程日记 2023/10/21 23:09:06

SpringCloud学习笔记（上）：服务注册与发现：Eureka、Zookeeper、Consul+负载均衡服务调用：Ribbon

壹、零基础一、微服务架构零基础理论入门 SpringCloud分布式微服务架构的一站式解决方案，是多种微服务架构落地技术的集合体，俗称微服务全家桶。二、从2.2.x和H版开始说起 springboot版本选择： git源码地址：https://github.…...

编程日记 2023/10/21 23:07:04

JavaPTA练习题 7-3 身体质量指数（BMI）测算

体重是反映和衡量一个人健康状况的重要标志之一，过胖和过瘦都不利于健康，BMI（身体质量指数）计算方法：体重（以千克为单位）除以身高（以米为单位）的平方。中国成人正常的BMI…...

编程日记 2023/10/21 23:05:02

类的属性和方法（java)

类和对象的使用创建类，设计类的成员创建类的对象通过“对象.属性”或“对象.方法”调用对象的结构代码 public class Per {public static void main(String[] args) {// TODO Auto-generated method stub//创建Person类的对象Person p1 new Person();//Scanne…...

编程日记 2023/10/21 23:04:01

C++模拟实现——list

一、成员变量及其基本结构 1.基本结构模型本质是一个带头双向循环列表，将节点进行封装，并且为了方便使用，进行重定义 2.节点的封装定义 template<class T>//定义节点struct list_node{list_node<T>* _prev;list_node<T>…...

编程日记 2023/10/21 23:03:00

FPGA的音乐彩灯VHDL流水灯LED花样，源码和视频

名称：FPGA的音乐彩灯VHDL流水灯LED 软件：Quartus 语言：VHDL 代码功能： （1）设计一彩灯控制电路，按要求控制8路（彩灯由发光二极管代替，受实验箱限制，多路同…...

编程日记 2023/10/21 23:01:59

企业知识库软件，快速构建企业知识分享与团队协同的软件

企业知识库是一种特殊的在线协同文档工具，支持包括FAQ、文档、视频、知识图谱等。从本质上讲，它是基于企业知识库软件从而实现内部或外部知识的沉淀、集合、更新、共享等，能为员工或客户提供常见问题的标准回答。今天我就基于HelpLook &…...

编程日记 2023/10/21 22:58:56

Java，输出一个10行的杨辉三角

据图可以发现，杨辉三角是每行的首元素和末元素都为1，中间的元素都是等于它上面的元素加上左上角的元素。首先，先完成二数组的创建和初始化，第一行的长度为一，第二行的长度为二……以此类推。所以，外元素的…...

编程日记 2023/10/21 22:57:55

Java版Http请求post和get两种调用实现

在实际项目中常涉及到相互调用，对于http接口的调用，需要经过建立连接，拼接参数，调用等步骤，记录下来，方便查看。第一步、引入jar包 pom中引入apache的httpclient包 <dependency><groupId>c…...

编程日记 2023/10/21 22:56:54

yjs demo: 多人在线协作画板

基于 yjs 实现实时在线多人协作的绘画功能支持多客户端实时共享编辑自动同步，离线支持自动合并，自动冲突处理 1. 客户端代码（基于Vue3） 实现绘画功能 <template><div style"{width: 100vw; height: 100vh; over…...

编程日记 2023/10/21 22:55:54

虹科分享 | 赋能物流机器人：CANopen通信如何发挥重要作用？

现代物流领域迅速融入了技术进步，特别是随着自主机器人的兴起，这一趋势越发明显。确保这些机器人在复杂的仓库环境中精确运行的一个关键方面是CANopen通信协议。该协议集成了各种组件（电机、传感器、摄像头和先进的电池系统）&…...

编程日记 2023/10/21 22:54:52

南丁格尔玫瑰图

目录由来效果图 echarts官网找相似图将南丁格尔玫瑰图引进html页面中引入echarts 准备容器初始化echarts实例对象指定配置项和数据（官网给的option） 将配置项给echarts 自定义南格丁尔玫瑰图修改颜色修改玫瑰图大小修改图的模式为半…...

编程日记 2023/10/21 22:53:52

vue 大文件切片下载

前提是你上传的时候也是切片上传，下载的时候后端给你返回的是一个文件id的数组，如果是你就可以用下面的方法 // 循环下载文件 // id是每个文件的id type 是一个类型，我传入是应为给不同的组件赋值getFile(id, type) {// 通过wen文件id去获取…...

编程日记 2023/10/21 22:52:51

2023年“绿盟杯”四川省大学生信息安全技术大赛

pyfile 先check源码，没什么发现，接着进行目录扫描，扫到路径 /download 下载备份文件得到 www.zip，解压得到app.py 大致审一下代码： 在read目录下给file传参进行请求，如果这个东西存在就会读取出来这里…...

编程日记 2023/10/21 22:51:50

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/8/27 14:36:24

抖音增长新引擎：品融电商，一站式全案代运营领跑者

抖音增长新引擎：品融电商，一站式全案代运营领跑者在抖音这个日活超7亿的流量汪洋中，品牌如何破浪前行？自建团队成本高、效果难控；碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

编程新知 2025/8/22 1:45:13

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录问题现象问题原因解决办法问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。问题原因很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/18 23:22:02

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解（7大核心步骤实战技巧） 一、爬虫完整工作流程以下是爬虫开发的完整流程，我将结合具体技术点和实战经验展开说明： 1. 目标分析与前期准备网站技术分析： 使用浏览器开发者工具（F12&…...

编程新知 2025/7/12 9:05:51

GitHub 趋势日报 (2025年06月08日)

📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/7/29 21:54:16

JUC笔记(上)-复习涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征封装性： 隐藏字段的实现细节提供对字段的受控访问访问控制： 可单独设置get/set访问器的可见性可创建只读或只写属性计算属性： 可以在getter中执行计算逻辑不需要直接对应一个字段验证逻辑： 可以…...

编程新知 2025/6/16 10:20:03

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample（样本数） 表示测试中发送的请求数量，即测试执行了多少次请求。单位，以个或者次数表示。示例：…...

编程新知 2025/7/8 4:01:50

如何把工业通信协议转换成http websocket

1.现状工业通信协议多数工作在边缘设备上，比如：PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发，当设备上用的是modbus从站时，采集设备数据需要开发modbus主站；当设备上用的是西门子PN协议时&#xf…...

编程新知 2025/9/5 17:26:10

EEG-fNIRS联合成像在跨频率耦合研究中的创新应用

摘要神经影像技术对医学科学产生了深远的影响，推动了许多神经系统疾病研究的进展并改善了其诊断方法。在此背景下，基于神经血管耦合现象的多模态神经影像方法，通过融合各自优势来提供有关大脑皮层神经活动的互补信息。在这里，本研…...

编程新知 2025/9/9 10:01:49

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

解决卡花屏问题:在html页面中的webRtcServer.connect(s.data,"","rtptransport=tcp");加上"","rtptransport=tcp"就搞定

相关文章：

解决卡花屏问题:
在html页面中的webRtcServer.connect(s.data,"","rtptransport=tcp");加上"","rtptransport=tcp"就搞定