网站建设与管理视频,如何做网站规划,假怀孕单子在线制作图片,seo推广名词解释webRTC播放视频
后面在项目中会用到通过推拉播放视频流的技术#xff0c;所以最近预研了一下webRTC
首先需要引入封装好的webRTC客户端的js文件ZLMRTCClient.js
下面是地址需要的自行下载
http://my.zsyou.top/2024/ZLMRTCClient.js
配置说明 new ZLMRTCClient.Endpoint…webRTC播放视频
后面在项目中会用到通过推拉播放视频流的技术所以最近预研了一下webRTC
首先需要引入封装好的webRTC客户端的js文件ZLMRTCClient.js
下面是地址需要的自行下载
http://my.zsyou.top/2024/ZLMRTCClient.js
配置说明 new ZLMRTCClient.Endpoint({}) element: 一个HTML视频元素的ID或引用用于显示接收到的远程媒体流。这通常是一个video元素。debug: 一个布尔值指定是否启用调试模式。如果启用则会输出调试日志有助于问题的排查和调试。zlmsdpUrl: 这是一个URL指向用于SDP会话描述协议消息交换的服务器。在WebRTC通信中SDP消息用于协商媒体流的参数如编解码器、IP地址和端口等。simulcast: 一个布尔值指定是否启用多路复用Simulcast。多路复用允许同时发送多个分辨率和比特率的视频流以便客户端可以根据其网络条件和能力选择合适的流。useCamera: 一个布尔值指定是否使用摄像头作为视频源。如果为false可能需要使用屏幕共享或其他视频源。audioEnable: 一个布尔值指定是否启用音频流。videoEnable: 一个布尔值指定是否启用视频流。recvOnly: 一个布尔值指定是否仅接收媒体流即作为接收端。如果为true则不会发送本地媒体流到远端。resolution: 一个对象指定期望的视频分辨率。包含w宽度和h高度属性。如果这两个值非零则用于设置视频流的分辨率。usedatachannel: 一个布尔值指定是否使用数据通道DataChannel。数据通道允许在WebRTC连接上直接发送和接收任意数据。
方法 receive(): 作用将Endpoint实例配置为仅接收模式。在这个模式下Endpoint不会发送本地媒体流到远端而是监听并接收来自远端的媒体流。 start(): 作用启动Endpoint实例允许它发送和接收媒体流。此方法会根据配置决定是否开启摄像头和麦克风并尝试与远端建立连接。 sendMsg(data): 作用发送消息通过数据通道。如果数据通道已打开此方法将指定的数据发送给远端。 closeDataChannel(): 作用关闭数据通道如果已打开。此方法会尝试关闭与远端的数据通道连接并清理相关资源。 close(): 作用关闭Endpoint实例。此方法会关闭WebRTC连接如果已建立、关闭数据通道如果已打开并清理所有相关资源。 _onIceCandidate(event): 作用内部方法用于处理ICE候选者信息的接收。ICEInteractive 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 typetext/javascript srchttp://my.zsyou.top/2024/ZLMRTCClient.js/script!-- app.vue--
templatediv classapp-containerInputSearchv-model:valuevideoUrlplaceholderinput search textsizelargesearchonSearchtemplate #enterButtonButton clickbtnPlay()播放/Button/template/InputSearchdiv idrtcPlayervideo idwebRtcPlayerBox autoplay controls styletext-align:left;Your browser is too old which doesnt support HTML5 video./video/div/div
/templatescript setup
import {nextTick, onUnmounted, ref} from vue
import {Button, InputSearch, message} from ant-design-vueconst 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).srcObjects;eventcallbacK(LOCAL STREAM, 获取到了本地流)});}/*** 停止播放*/
function pause() {if (webrtcPlayer ! null) {webrtcPlayer.close();webrtcPlayer null;}}function eventcallbacK(type, message) {console.log(player 事件回调, type, message)
}onUnmounted(() {clearTimeout(timer)
})/scriptstyle
.app-container {min-width: 50vw;
}#rtcPlayer {width: 100%;background: #c1c1c1;
}#webRtcPlayerBox {width: 100%;max-height: 56vh;background-color: #000;
}
/style
