【无标题】vue webrtc 播放rtsp视频流

最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用webrtc来实现相关功能,记录一下,步骤如下:

1、下载webrtc :Releases · mpromonet/webrtc-streamer · GitHub

        winows下下载:webrtc-streamer-v0.8.5-dirty-Windows-AMD64-Release.tar.gz

2、js准备

  将下载包中html/libs文件夹下webrtcstreamer.js、adapter.min.js文件复制到VUE项目public目录中

VUE代码如下:

    <div class="coTitle">视频</div><video id='video' controls autoplay autobuffer muted preload='auto'style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'></video>
</script>
<script lang="js">
import {WebRtcStreamer} from './webrtcstreamer.js';
export default {name: 'index1',data() {return {webRtcServer: null}},mounted() {//video:需要绑定的video控件ID//127.0.0.1:8000:启动webrtc-streamer的设备IP和端口,默认8000this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:8000')//需要查看的rtsp地址this.webRtcServer.connect('rtsp://192.169.0.1:9000/dss/monitor/param?cameraid=1000211%210&substream=1')},beforeDestroy() {this.webRtcServer.disconnect()this.webRtcServer = null},
}
</script>

3、首选运行 webrtc-streamer.exe 有的说不加参数CPU高,我的电脑上没加参数也不高,懒,没测试。不过运行 webrtc-streamer.exe 后有个黑框,我是自己写了个服务,如果webrtc没启动,就定时启动一下,这样播放的电脑上就没有黑框了。

4、完成上述 123步就可以正常播放,有一个关键问题特意说明一下:

海康的视频流会提示:Start playing sink for "video/H264" subsession

可能出现此问题的原因是 音视频在同一个流中
解决方法如下:
 

     //this.webRtcServer = new WebRtcStreamer("video", "http://127.0.0.1:8000");var audioUrl="";var options="rtptransport=tcp&timeout=60";webRtcServer.connect(videoUrl,audioUrl,options);

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

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

相关文章

华为机考入门python3--(22)牛客22- 汽水瓶

分类&#xff1a;数字 知识点&#xff1a; 整除符号// 5//3 1 取余符号% 5%3 2 题目来自【牛客】 import sysdef calc_soda_bottles(n):if n 0: # 结束输入&#xff0c;不进行处理returnelse:# 循环进行汽水换算total_drunk 0 # 记录总共喝了多少瓶汽水while…

永不过期的SSL/TLS证书解决方案

前提: cloudflare API 密钥宝塔面板安装了nginx 如果你不使用宝塔面板,可以参照脚本修改 生成证书脚本 curl -sS -O https://raw.githubusercontent.com/woniu336/open_shell/main/ssl_pro.sh && chmod x ssl_pro.sh && ./ssl_pro.sh使用方法: https://blo…

城市反无人机技术

一、城市环境下反无人机难点 1) 城市建筑密级遮挡严重 城市中建筑物密集&#xff0c;通视条件差。设备若部署于地面&#xff0c;受限于建筑物遮挡&#xff0c;探测和处置距离有限。因此&#xff0c;通常采用将设备部署于建筑物楼顶的方式应对无人机威胁。此种方式对于飞行在楼…

Windows系统如何切换32位和64位Python

1.简介 由于需要编译32位的程序&#xff0c;默认已经安装了Anaconda和Pycharm&#xff0c;虚拟环境使用的是64位Python&#xff0c;现在需要使用32位Python开发32位的软件程序。 2.操作过程 2.1查询自己的conda是32位还是64位 打开 Anaconda 命令提示符或任何命令行界面&am…

golang使用DoH解析域名

按照RFC 8484 规范&#xff0c;DoH服务器支持GET或POST两种方式。 当使用GET方法&#xff0c;唯一的变量"dns"被赋值为base64url编码的DNS请求内容。 These examples use a DoH service with a URI Template of"https://dnsserver.example.net/dns-query{?dns}…

USP技术提升大语言模型的零样本学习能力

大语言模型&#xff08;LLMs&#xff09;在零样本和少样本学习能力上取得了显著进展&#xff0c;这通常通过上下文学习&#xff08;in-context learning, ICL&#xff09;和提示&#xff08;prompting&#xff09;来实现。然而&#xff0c;零样本性能通常较弱&#xff0c;因为缺…

【数据结构(邓俊辉)学习笔记】列表03——有序列表

文章目录 0. 概述1. 唯一化2. 查找2.1 实现2.2 顺序查找2.3 复杂度 0. 概述 介绍下有序列表。 若列表中所有节点的逻辑次序与其大小次序完全一致&#xff0c;则称作有序列表&#xff08;sorted list&#xff09;。为保证节点之间可以定义次序&#xff0c;依然假定元素类型T直接…

WebAssembly 入门教程 c++、python编译wasm

WebAssembly 入门 了解 wasm 使用场景&#xff0c;复杂对象传递和经验法则。 简介 WebAssembly 是一种新的编码方式&#xff0c;可以在现代的网络浏览器中运行。它是一种低级的类汇编语言&#xff0c;具有紧凑的二进制格式&#xff0c;可以接近原生的性能运行&#xff0c;并…

AI大模型探索之路-训练篇13:大语言模型Transformer库-Evaluate组件实践

系列篇章&#x1f4a5; AI大模型探索之路-训练篇1&#xff1a;大语言模型微调基础认知 AI大模型探索之路-训练篇2&#xff1a;大语言模型预训练基础认知 AI大模型探索之路-训练篇3&#xff1a;大语言模型全景解读 AI大模型探索之路-训练篇4&#xff1a;大语言模型训练数据集概…

【算法小白周赛1A】分析 - 题解与代码

题目链接&#xff1a;https://www.starrycoding.com/problem/155 题目描述 小可可最近在学数学运算&#xff01;他希望考考你&#xff0c;给你两个整数 A , B A,B A,B&#xff0c;询问 A B A\times B AB 是否是偶数。 注意&#xff0c;可能存在前导 0 0 0&#xff0c;比如…

接口测试工具-postman介绍

一、介绍 Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件。 作用:常用于进行接口测试。 它可以模拟浏览器发起任何形式的HTTP请求

OpenCV | 入门

OpenCV | 入门 安装 参考教程 基础知识 V G A 640 480 VGA 640 \times 480 VGA640480 H D 1280 720 HD 1280 \times 720 HD1280720 F H D 1920 1080 FHD 1920 \times 1080 FHD19201080 4 K 3840 2160 4K 3840 \times 2160 4K38402160 这些都表示了固定的像素…

大语言模型教程与实践(开源)

1.简介 大语言模型&#xff08;Large Language Models, LLMs&#xff09;的兴起确实始于OpenAI在2018年发布的GPT&#xff08;Generative Pre-trained Transformer&#xff09;&#xff0c;这一开创性工作引领了自然语言处理领域的新纪元。随后&#xff0c;2022年底ChatGPT的横…

课程表 - LeetCode 热题 53

大家好&#xff01;我是曾续缘&#x1f498; 今天是《LeetCode 热题 100》系列 发车第 53 天 图论第 3 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 课程表 你这个学期必须选修 numCourses 门课程&#xff0c;记为 0 到 numCourses - 1 。 在选修某些课程之前需…

oneapi:强大而易用的OpenAI接口管理和分发系统 大模型 通用接口 ollama

使用One-api代理我所有的各类接口渠道,包括gpt-3.5-trubo、gpt-4等openAI官方模型,azure提供的模型,集成联网知识库等功能的gpt4模型,以及国内模型的一些模型。同时支持openai图像生成接口。 1. 准备工作 创建应用目录,例如在/share/Container下创建文件夹oneapi在oneapi…

情绪自留地:是自我世界,不被他人左右

情绪&#xff0c;是我们内心世界的反映&#xff0c;它既能够体现我们对外界事物的态度&#xff0c;也是我们自我认知的重要部分。在现代社会&#xff0c;人们越来越重视情绪管理&#xff0c;因为良好的情绪状态对于个人的心理健康和社交关系都有着不可忽视的影响。本文将探讨如…

代码随想录算法训练营DAY40\DAY41|C++动态规划Part.3|343.整数拆分、96.不同的二叉搜索树

DAY40休息日&#xff0c;本篇为DAY41的内容 文章目录 343.整数拆分思路dp含义递推公式&#xff08;难点&#xff09;初始化遍历顺序打印 CPP代码数学方法归纳证明法 96.不同的二叉搜索树思路dp含义递推公式初始化遍历顺序打印 CPP代码题目总结 343.整数拆分 力扣题目链接 文章…

Windows系统下安装Mosquitto的步骤(7)

接前一篇文章&#xff1a;Windows系统下安装Mosquitto的步骤&#xff08;6&#xff09; 本文内容参考&#xff1a; Windows下搭建MQTT服务器_mqtt服务器软件-CSDN博客 Enable SSL/TLS Connection | EMQX Enterprise Docs 特此致谢&#xff01; 上一回讲解了使用MQTTX图形界面…

C/C++开发,opencv-ml库学习,K近邻(KNN)应用

目录 一、k近邻算法 1.1 算法简介 1.2 opencv-k近邻算法 二、cv::ml::KNearest应用 2.1 数据集样本准备 2.2 KNearest应用 2.3 程序编译 2.4 main.cpp全代码 一、k近邻算法 1.1 算法简介 K近邻算法&#xff08;K-Nearest Neighbor&#xff0c;KNN&#xff09;基本原理是…

uniapp 微信开发工具上访问正常,真机调试一直跨域报错

微信小程序真机调试时&#xff0c;出现跨域问题&#xff0c;需要同时在后端设置多种允许跨域的设置&#xff1a; // 指定允许其他域名访问 header(Access-Control-Allow-Origin:*); // 响应类型 header(Access-Control-Allow-Methods:GET,POST,OPTION); // 响应头设置 header(…