ZLMRTCClient配置说明与用法(含示例)

webRTC播放视频

后面在项目中会用到通过推拉播放视频流的技术,所以最近预研了一下webRTC

首先需要引入封装好的webRTC客户端的js文件ZLMRTCClient.js

下面是地址需要的自行下载

http://my.zsyou.top/2024/ZLMRTCClient.js

配置说明

new ZLMRTCClient.Endpoint({})

  1. element: 一个HTML视频元素的ID或引用,用于显示接收到的远程媒体流。这通常是一个video元素。
  2. debug: 一个布尔值,指定是否启用调试模式。如果启用,则会输出调试日志,有助于问题的排查和调试。
  3. zlmsdpUrl: 这是一个URL,指向用于SDP(会话描述协议)消息交换的服务器。在WebRTC通信中,SDP消息用于协商媒体流的参数,如编解码器、IP地址和端口等。
  4. simulcast: 一个布尔值,指定是否启用多路复用(Simulcast)。多路复用允许同时发送多个分辨率和比特率的视频流,以便客户端可以根据其网络条件和能力选择合适的流。
  5. useCamera: 一个布尔值,指定是否使用摄像头作为视频源。如果为false,可能需要使用屏幕共享或其他视频源。
  6. audioEnable: 一个布尔值,指定是否启用音频流。
  7. videoEnable: 一个布尔值,指定是否启用视频流。
  8. recvOnly: 一个布尔值,指定是否仅接收媒体流(即作为接收端)。如果为true,则不会发送本地媒体流到远端。
  9. resolution: 一个对象,指定期望的视频分辨率。包含w(宽度)和h(高度)属性。如果这两个值非零,则用于设置视频流的分辨率。
  10. usedatachannel: 一个布尔值,指定是否使用数据通道(DataChannel)。数据通道允许在WebRTC连接上直接发送和接收任意数据。

方法

  • receive():
    作用:将Endpoint实例配置为仅接收模式。在这个模式下,Endpoint不会发送本地媒体流到远端,而是监听并接收来自远端的媒体流。

  • start():
    作用:启动Endpoint实例,允许它发送和接收媒体流。此方法会根据配置决定是否开启摄像头和麦克风,并尝试与远端建立连接。

  • sendMsg(data):
    作用:发送消息通过数据通道。如果数据通道已打开,此方法将指定的数据发送给远端。

  • closeDataChannel():
    作用:关闭数据通道(如果已打开)。此方法会尝试关闭与远端的数据通道连接,并清理相关资源。

  • close():
    作用:关闭Endpoint实例。此方法会关闭WebRTC连接(如果已建立)、关闭数据通道(如果已打开),并清理所有相关资源。

  • _onIceCandidate(event):
    作用:内部方法,用于处理ICE候选者信息的接收。ICE(Interactive Connectivity Establishment)是WebRTC用于NAT和防火墙穿越的技术。此方法会将ICE候选者信息记录并可能发送给远端(未在代码片段中直接展示发送逻辑)。

  • _onTrack(event):
    作用:内部方法,用于处理接收到的媒体轨道(如音频或视频轨道)。当从远端接收到新的媒体轨道时,此方法会被触发,并将媒体轨道添加到本地渲染的媒体流中。

  • _onIceCandidateError(event):
    作用:内部方法,用于处理ICE候选者错误。当ICE候选者收集过程中发生错误时,此方法会被触发,并可能记录错误信息或执行其他错误处理逻辑。

  • _onconnectionstatechange(event):
    作用:内部方法,用于处理连接状态的变化。当WebRTC连接的状态发生变化时(如连接建立、断开等),此方法会被触发,并可以据此更新UI或执行其他逻辑。

  • _onDataChannelOpen(event):
    作用:内部方法,用于处理数据通道打开的事件。当使用数据通道时,一旦数据通道成功打开,此方法会被触发。

  • _onDataChannelMsg(event):
    作用:内部方法,用于处理通过数据通道接收到的消息。当数据通道接收到新消息时,此方法会被触发,并处理接收到的消息。

  • _onDataChannelErr(event):
    作用:内部方法,用于处理数据通道错误。当数据通道发生错误时,此方法会被触发,并可能记录错误信息或执行其他错误处理逻辑。

  • _onDataChannelClose(event):
    作用:内部方法,用于处理数据通道关闭的事件。当数据通道被关闭时,此方法会被触发,并可以据此清理相关资源。

用法

首先需要在html中引入文件

<!--  index.html--><script type="text/javascript" src="http://my.zsyou.top/2024/ZLMRTCClient.js"></script>
<!--  app.vue-->
<template><div class="app-container"><InputSearchv-model:value="videoUrl"placeholder="input search text"size="large"@search="onSearch"><template #enterButton><Button @click="btnPlay()">播放</Button></template></InputSearch><div id="rtcPlayer"><video id='webRtcPlayerBox' autoplay controls style="text-align:left;">Your browser is too old which doesn't support HTML5 video.</video></div></div>
</template><script setup>
import {nextTick, onUnmounted, ref} from 'vue'
import {Button, InputSearch, message} from 'ant-design-vue'const videoUrl = ref('')
let webrtcPlayer = nullfunction btnPlay() {nextTick(() => {if (typeof (videoUrl.value) == "undefined" || videoUrl.value === '') {return message.error('请填写视频地址')}play(videoUrl.value)})
}let timer = nullfunction play(url) {webrtcPlayer = new ZLMRTCClient.Endpoint({element: document.getElementById('webRtcPlayerBox'),// TML视频元素的ID或引用,用于显示接收到的远程媒体流。通常是一个<video>元素debug: true,// 指定是否启用调试模式。如果启用,则会输出调试日志,有助于问题的排查和调试。zlmsdpUrl: url,//这是一个URL,指向用于SDP(会话描述协议)消息交换的服务器。在WebRTC通信中,SDP消息用于协商媒体流的参数,如编解码器、IP地址和端口等。simulecast: false,//指定是否启用多路复用(Simulcast)。多路复用允许同时发送多个分辨率和比特率的视频流,以便客户端可以根据其网络条件和能力选择合适的流。useCamera: false,//指定是否使用摄像头作为视频源。如果为false,可能需要使用屏幕共享或其他视频源。audioEnable: true,//指定是否启用音频流。videoEnable: true,//指定是否启用视频流。recvOnly: true,//指定是否仅接收媒体流(即作为接收端)。如果为true,则不会发送本地媒体流到远端。usedatachannel: false,//指定是否使用数据通道(DataChannel)。数据通道允许在WebRTC连接上直接发送和接收任意数据。//resolution: // 一个对象,指定期望的视频分辨率。包含w(宽度)和h(高度)属性。如果这两个值非零,则用于设置视频流的分辨率。})webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {// ICE 协商出错console.error('ICE 协商出错')eventcallbacK("ICE ERROR", "ICE 协商出错")});webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {//获取到了远端流,可以播放console.log('播放成功', e.streams)eventcallbacK("playing", "播放成功")});webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, (e) => {// offer anwser 交换失败console.error('offer anwser 交换失败', e)eventcallbacK("OFFER ANSWER ERROR ", "offer anwser 交换失败")if (e.code == -400 && e.msg == "流不存在") {console.log("流不存在")timer = setTimeout(() => {webrtcPlayer.close();play(url)}, 100)}});webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {// 获取到了本地流// document.getElementById('selfVideo').srcObject=s;eventcallbacK("LOCAL STREAM", "获取到了本地流")});}/*** 停止播放*/
function pause() {if (webrtcPlayer != null) {webrtcPlayer.close();webrtcPlayer = null;}}function eventcallbacK(type, message) {console.log("player 事件回调", type, message)
}onUnmounted(() => {clearTimeout(timer)
})</script><style>
.app-container {min-width: 50vw;
}#rtcPlayer {width: 100%;background: #c1c1c1;
}#webRtcPlayerBox {width: 100%;max-height: 56vh;background-color: #000;
}
</style>

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

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

相关文章

技术分享!国产ARM + FPGA的SDIO通信开发介绍!

SDIO总线介绍 SDIO(Secure Digital lnput and Output),即安全数字输入输出接口。SDIO总线协议是由SD协议演化而来,它主要是对SD协议进行了一些扩展。 SDIO总线主要是为SDIO卡提供一个高速的I/O能力,并伴随着较低的功耗。SDIO总线不但支持SDIO卡,而且还兼容SD内存卡。支持…

韦东山嵌入式linux系列-具体单板的按键驱动程序(查询方式)

1 GPIO 操作回顾 &#xff08;1&#xff09;使能模块&#xff1b; &#xff08;2&#xff09;设置引脚的模式&#xff08;工作于GPIO模式&#xff09;&#xff1b; &#xff08;3&#xff09;设置GPIO本身&#xff08;输入/输出&#xff09;&#xff1b; &#xff08;4&…

在VMware创建Ubuntu24

目录 一、创建虚拟机 1. 自定义创建虚拟机 2. 设置虚拟机兼容 3. 选择镜像 4. 命名虚拟机&#xff0c;选择存放位置 5. 处理器配置 6. 内存配置 7. 网络类型配置 8. I/O控制器类型 9. 磁盘配置 10. 完成虚拟机创建 二、Ubuntu安装 1. 进入虚拟机中进行ubuntu的安…

浏览器打开PDF卡在加载(侧边翻译插件打不开PDF)

如果你的浏览器安装了一些翻译插件&#xff0c;那么可能会导致PDF加载不出来 比如我的浏览器中安装了“侧边翻译”&#xff0c;而我在view Elsever的论文时出现了加载不出来的问题—— 仍然以此扩展为例&#xff0c;那么解决办法是&#xff1a; 取消勾选——

Docker简单快速入门

1. 安装Docker 基于 Ubuntu 24.04 LTS 安装Docker 。 # 更新包索引并安装依赖包 sudo apt-get update sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common# 添加Docker的官方GPG密钥并存储在正确的位置 curl -fsSL https://mirror…

【屏显MCU】多媒体接口总结

本文主要介绍【屏显MCU】的基本概念&#xff0c;用于开发过程中的理解 以下是图层叠加示例 【屏显MCU】多媒体接口总结 0. 个人简介 && 授权须知1. 三大引擎1.1 【显示引擎】Display Engine1.1.1 【UI】 图层的概念1.1.2 【Video】 图层的概念1.1.3 图层的 Blending 的…

nginx代理缓存配置-Linux(CentOS)

代理缓存 1. 编写主配置文件2. 编辑虚拟机配置文件3. 重启nginx服务 nginx代理服务配置&#xff0c;基于http协议 开启代理缓存的前提是已经开启了代理服务&#xff0c;请确保已经开启代理服务 1. 编写主配置文件 主配置文件通常在/etc/nginx/nginx.conf&#xff0c;在该文件…

python机器学习8--自然语言处理(1)

1.基本定义&#xff1a; 语义&#xff1a;就是一句话的重点是什么。 自定词汇&#xff1a;因为语言、文字太多&#xff0c;自定和处理你所关心的重点词汇。 简体转繁体代码 from opencc import OpenCCtext1 "我去过清华大学" openCC OpenCC(s2t) line openCC.…

Typora 【最新1.8.6】版本安装下载教程 (轻量级 Markdown 编辑器),图文步骤详解,免费领取(软件可激活使用)

文章目录 软件介绍软件下载安装步骤激活步骤 软件介绍 Typora 是一款专为 Markdown 爱好者设计的文本编辑器&#xff0c;它结合了简洁的界面设计与强大的 Markdown 渲染能力&#xff0c;为用户提供了一个流畅、高效的写作环境。以下是对 Typora 更详细的介绍&#xff1a; 核心特…

MATLAB绘制方波、锯齿波、三角波、正弦波和余弦波、

一、引言 MATLAB是一种具有很强的数值计算和数据可视化软件&#xff0c;提供了许多内置函数来简化数学运算和图形的快速生成。在MATLAB中&#xff0c;你可以使用多种方法来快速绘制正弦波、方波和三角波。以下是一些基本的示例&#xff0c;展示了如何使用MATLAB的命令来实现正弦…

数据科学统计面试问题 -40问

前 40 名数据科学统计面试问题 一、介绍 正如 Josh Wills 曾经说过的那样&#xff0c;“数据科学家是一个比任何程序员都更擅长统计、比任何统计学家都更擅长编程的人”。统计学是数据科学中处理数据及其分析的基本工具。它提供了工具和方法&#xff0c;可帮助数据科学家获得…

【React】条件渲染:深入探讨高效开发技巧与最佳实践

文章目录 一、什么是条件渲染&#xff1f;二、条件渲染的实现方式三、条件渲染的最佳实践四、复杂条件渲染的实现 在现代前端开发中&#xff0c;React 已成为开发者构建用户界面的首选框架之一。React 的强大之处在于其组件化和状态管理能力&#xff0c;而条件渲染则是 React 开…

防火墙限制docker了

今天有个安全方面的需求&#xff0c;演示环境禁止将3306等高危端口暴露到外网。 于是同事开启了防火墙&#xff0c;仅将应用端口暴露。结果导致演示环境无法使用。 由于公司的应用是基于docker部署的。结果他问我为什么同一台机器&#xff0c;应用无法访问mysql。 docker对于…

SQL labs-SQL注入(五,使用sqlmap进行cookie注入)

本文仅作为学习参考使用&#xff0c;本文作者对任何使用本文进行渗透攻击破坏不负任何责任。 引言&#xff1a; Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时&#xff0c;在连接关闭后&#xff0c;服务端不会记录用户的信息。Cookie…

第十一章 数据结构

第十一章 数据结构 11.1 数组 数组是元素的顺序集合&#xff0c;通常这些元素具有相同的数据类型 索引表示元素在数组中的顺序号&#xff0c;顺序号从数组开始处计数 数组元素通过索引被独立给出了地址&#xff0c;数组整体上有一个名称&#xff0c;但每个元素利用数组的的…

elasticsearch 解决全模糊匹配最佳实践

事件背景&#xff1a; 某 CRM 系统&#xff0c;定义了如下两个表&#xff1a; 客户表 t_custom 字段名 类型 描述 idlong自增主键phonestring客户手机......... 客户产品关系表 t_custom_product 字段名 类型 描述 idlong自增主键custom_idlong客户idproduct_idlong产品…

笔记本检测工具 | 爱回收笔记本质检系统 v1.9.6

软件简介 爱回收笔记本质检系统是一款专为笔记本电脑硬件检测而设计的软件。它以其快速的检测速度、简便的操作流程和直观的检测结果&#xff0c;为用户提供了一种高效、易懂的硬件检测解决方案。 这款软件不仅适用于对电脑硬件有一定了解的用户&#xff0c;也特别适合对硬件…

C#使用csvhelper实现csv的操作

新建控制台项目 安装csvhelper 33.0.1 写入csv 新建Foo.cs namespace CsvSut02;public class Foo {public int Id { get; set; }public string Name { get; set; } }批量写入 using System.Globalization; using CsvHelper; using CsvHelper.Configuration;namespace Csv…

如何为WordPress网站设置多语言站点

随着全球化的发展&#xff0c;拥有一个支持多语言的站点已成为提升用户体验、扩大受众范围的重要手段。本文将详细介绍如何为WordPress网站设置多语言站点&#xff0c;提供两种最佳方案详解&#xff0c;帮助您轻松实现多语言站点的搭建与管理。无论您是选择在同一站点内发布多语…

FastGPT 知识库搜索测试功能解析(一)

本文以 FastGPT 知识库的搜索测试功能为入口,分析 FastGPT 的知识检索流程。 一、搜索功能介绍 1.1 整体介绍 搜索测试功能包含三种类型:语义检索、全文检索、混合检索。 语义检索:使用向量进行文本相关性查询,即调用向量数据库根据向量的相似性检索; 全文检索:使用…