WebRTC实战 | 视频云

这篇具有很好参考价值的文章主要介绍了WebRTC实战 | 视频云。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

WebRTC是当前实时通信领域的重要技术之一,具有广泛的应用前景。可以实现音频、视频和数据的实时传输。支持点对点通信、多方会议、屏幕共享等多种应用场景,同时具有高质量、低延迟、强安全性等特点,是开发实时通信应用的理想选择。可以应用于远程协作、在线教育、在线医疗、物联网等领域,具有广泛的商业应用前景。WebRTC技术包括了音视频的采集、编解码、网络传输、显示等功能,本文主要从API使用说明和注意细节方面介绍一下WebRTC的大致情况。

根据W3C的WebRTC1.0:Real-time Communication Between Browsers规范,WebRTC的源码中定义了两套主要的C++接口,分别是MediaStream与PeerConnection相关的API,MediaStream 相关API定义在源码api\media_stream_interface.h中。主要涉及这4个概念:source、sink、meidatrack、mediastream。

MediaStream API

MediaAPI中有两个重要组成:MediaStreamTrack、MediaStream。MediaStreamTrack对象代表单一类型的媒体流,产生自客户端的media source,可以是音频或者视频,但只能是其中一种,是音频称作audio track,视频的话称作video track,这其实就是我们平时所说的音轨与视频轨。

一个track由source与sink组成。source给track提供数据。

MeidiaStream用于将多个MediaStreamTrack对象打包到一起。一个MediaStream可包含audio track 与video track。类似我们平时的多媒体文件,可包含音频与视频。

一个MediaStream对象包含0或多个MediaStreamTrack对象。MediaStream中的所有MediaStreamTrack对象在渲染时必须同步。就像我们平时播放媒体文件时,音视频的同步。

简单点说,source 与sink构成一个track,多个track构成MediaStram。

source 与 sink

在MediaTrack的源码中,MediaTrack都是由对应的source和sink组成的。

浏览器中存在从source到sink的媒体管道,其中source负责生产媒体资源,包括多媒体文件,web资源等静态资源以及麦克风采集的音频,摄像头采集的视频等动态资源。而sink则负责消费source生产媒体资源,也就是通过,video等媒体标签进行展示,或者是通过RTCPeerConnection将source通过网络传递到远端。RTCPeerConnection可同时扮演source与sink的角色,作为sink,可以将获取的source降低码率,缩放,调整帧率等,然后传递到远端,作为source,将获取的远端码流传递到本地渲染。

检测获取音视频设备

使用MediaDevices 接口提供访问连接媒体输入的设备,如照相机和麦克风,以及屏幕共享等。可以用来取得任何硬件资源的媒体数据。提供访问链接媒体输入的设备,如摄像头、麦克风、屏幕共享等。它可以使你取得任何硬件资源的媒体数据。

通过MediaDevices的方法 enumerateDevices() 请求一个可用的媒体输入和输出设备的列表,例如麦克风,摄像机,耳机设备等。返回的 Promise 完成时,会带有一个描述设备的 MediaDeviceInfo的数组。

WebRTC实战 | 视频云

采集本地音视频数据

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D 转换器等等),也可能是其他轨道类型。

它返回一个 Promise 对象,成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限,或者需要的媒体源不可用,promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

WebRTC实战 | 视频云 

视频约束

getUserMedia()函数接收一个参数MediaStreamConstraints,MediaStreamConstraints对象用于指定要请求的轨道类型(音频,视频或二者)以及(可选)每个轨道的任何要求。

约束项可以具有下面这两个属性中的一个或两个:

  • video—表示是否需要视频轨道audio—表示是否需要音频轨道

  • 如果仅指定是否包含音频和视频流的时候,可以这样 

WebRTC实战 | 视频云

设置分辨率

可以用video中的width和height属性从网络摄像头请求一定的分辨率,比如请求1280×720分辨率的视频流。直接设置的width和height会被视为“ideal”(理想)值,浏览器会尽可能的保持这个分辨率,但是也有可能会返回一个接近的分辨率,因为我们设置的分辨率可能摄像头不支持

WebRTC实战 | 视频云

可以用min,max和exact关键字来限制分辨率范围,从而得到最佳的分辨率

WebRTC实战 | 视频云

可以使用deviceId指定被用于捕捉流的设备ID。这个设备ID是唯一的,并且在同一个来源的会话中是相同的。需要首先使用MediaDevices.enumerateDevices()来获取设备id。以下是一些常用的约束条件:

WebRTC实战 | 视频云

MediaDevices.getSupportedConstraints()的支持。这个函数会返回一个字典,列出用户代理支持的约束:

WebRTC实战 | 视频云

设置码率

在 通 话 过 程 中 实 时 更 改 视 频 码 率 , 主 要 涉 及 对RTCRtpEncodingPara-meters.maxBitrate 的修改,maxBitrate 能够接受的码率单位是 bps。

WebRTC实战 | 视频云

兼容性问题

有一部分老的浏览器不能兼容navigator.mediaDevices.getUserMedia来获取麦克风和摄像头,可用如下来获取

WebRTC实战 | 视频云

Safari浏览器 不支持多个 tab getUserMedia,否则前一个 tab 会停止采集,远端流也有可能出现黑屏无声。

屏幕共享

MediaDevices 接口的 getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容(如一个窗口)在一个MediaStream里。用法和getUserMedia类似。

WebRTC实战 | 视频云

Safari默认只能共享整个屏幕,不支持选择应用和浏览器标签页。

设备监听

为了在应用程序中监测媒体设备的变化,WebRTC提供了devicechange事件和ondevicec-hange事件句柄,与navigator.mediaDevices结合即可实时监控媒体设备的热插拔。

WebRTC实战 | 视频云

视频质量调整策略

webrtc 提供了三种策略:

  • MAINTAIN_FRAMERATE:保帧率,降分辨率,该模式的使用场景为视频模式。

  • MAINTAIN_RESOLUTION: 保分辨率降帧率,使用场景为屏幕共享或者文档模式,对清晰度要求较高的场景。

  • BALANCED: 平衡帧率与分辨率。默认关闭,需要通过 WebRTC-Video-BalancedDegradation 开启。

    WebRTC实战 | 视频云

webrtc API层提供了自适应策略的设置接口,通过设置 MediaStreamTrack 的 contentHint 属性就可以了。在WebRtcVideoSendStream::GetDegradationPreference 函数中会将 ContentHint 转换成 DegradationPreference。

Audio Content Hints

  • "speech":指定音频源为讲演,可以适当使用噪声消除或者提升源的可理解性等

  • "speech-recognition":指定音频源为语音识别,可以适合提高输入信号的清晰度以进行转录并关闭用于人类消费的音频处理组件

  • "music":指定音频源为音乐,可能意味着调整或关闭用于处理语音数据的音频处理组件,以防止音频失真

Video Content Hints

  • "motion":指定为运动的时候,降低分辨率以保持帧率

  • "detail":指定为细节的时候,降低帧率以保持分辨率,屏幕分享一般默认为细节模式

  • "text":指定为文本,降低帧率以保持分辨率,当编码器的文本模式可用的时候,使用文本模式。此设置通常会针对生成的单个帧中的细节进行优化,而不是平滑播放,并且可能会利用针对文本渲染进行优化的编码器工具,对于属性值为“text”的视频轨道,如果编码编解码器为AV1,则激活“text”模式的编码工具。 

WebRTC实战 | 视频云

RTCPeerConnection API

RTCPeerConnection接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建,保持,监控,关闭连接的方法的实现。
其接口的定义如下:

WebRTC实战 | 视频云

其中有一个可选参数RTCConfiguration, 在文档中定义如下;

WebRTC实战 | 视频云

iceServers,由多个RTCIceServer组成需要填入stun或turn服务的地址;

iceTransportPolicy :ice的传输策略,默认值是all允许考虑所有候选者,值有"all",“public” 已弃用 ,“relay” 只收集中继候选者;

rtcpMuxPolicy:收集 ICE 候选时是否使用的 RTCP 多路复用策略。值有 'negotiate’和 ‘require’;

bundlePolicy:‘balanced’、‘max-compat’和’max-bundle’;默认是balanced。

各个含义如下:

  • Balanced实际就是音频轨、视频轨各自各自使用一个传输通道,是分开的。其中多路音频轨是共用同一个传输通道、多路视频轨也是使用同一个通道。

  • max-compat是最大兼容性,怎样才能达到最大的兼容性呢?就是每一个轨都有自己的通道,如果我有这个两个音频,一个视频,就有三个通道,就是每个音频走自己的,那视频也是一样的。等到Balanced策略不成功的时候,就使用max-compat这种方式。

  • max-bundle就是最大化的使用一个绑定,那就是将所有的这些这个媒体的这个流都用一个这个通道进行传输。这是webrtc建议的方式,这样的话对于底层来说就比较简单了,而且你建立这个连接之后,只需要一个证书,而不需要一堆证书,否则的话,你每一个连接都需要一个证书,就会非常的耗费时间。

一般使用方式如下:

WebRTC实战 | 视频云

主要方法:

  • addIceCandidate 向ICE代理提供远程候选人。

  • addStream 添加MediaStream作为视频或音频的本地源。

  • addTrack 添加MediaStreamTrack

  • close 关闭连接。

  • createAnswer 创建answer。此方法的两个第一个参数是成功回调和错误回调。可选的第三个参数是要创建的选项。

  • createDataChannel 创建一个新的数据通道RTCDataChannel

  • createOffer 用来创建offer,创建成功后调用setLocalDescription方法将localDescription设置为offer,localDescription即为我们需要发送给应答方的sdp

  • getConfiguration 获取配置信息

  • getStats 创建一个新的RTCStatsReport,其中包含有关连接的统计信息。

  • removeStream 删除MediaStream作为视频或音频的本地源。

  • removeTrack 删除MediaStreamTrack作为视频或音频的本地源。

  • setLocalDescription 设置本地连接描述信息。该方法采用三个参数,RTCSessionDescription对象,成功回调,失败回调。

  • setRemoteDescription 设置远程连接描述信息

主要事件:

  • onaddstream 事件用来监听通道中新加入的流,当addstream事件被触发时,会调用此处理程序。当远程方将MediaStream添加到此连接时,会发送此事件。

  • ondatachannel 当数据通道事件被触发时,会调用此处理程序。将RTCDataChannel添加到此连接时发送此事件。

  • onicecandidate 当RTCIceCcandidate对象添加时,会发送此事件。

  • oniceconnectionstatechange 当iceConnectionState的值发生更改时,会发送此事件。

  • onnegotiationneeded 当触发需要协商的事件时,会调用此处理程序。此事件由浏览器发送,以通知将来某个时候需要进行协商。

  • onremovestream 当信号状态更改事件被触发时,会调用此处理程序。当signalingState的值发生变化时,会发送此事件。

  • onsignalingstatechange当removestream事件被激发时,会调用此处理程序。此事件是在从该连接中删除MediaStream时发送的。

  • ontrack当远程方将MediaStream添加到此连接时,会发送此事件。

    RTCPeerConnection使用步骤如下:

1、创建一个新的 RTCPeerConnection对象,将采集到的音视频轨道,通过addTrack进行添加,发送给远端。远端可以通过监听ontrack来监听音视频的到达,并进行播放。

WebRTC实战 | 视频云                   

2、交换 SDP,交换 SDP 的目的是为了让对方知道彼此具有哪些能力,然后根据双方各自的能力进行协商,协商出大家认可的音视频编解码器、编解码器相关的参数(如音频通道数,采样率等)、传输协议等信息。创建 offer 设置为 pc1的本地描述,通过信令服务器发送到远端,作为 pc2的远端描述.pc2收到后创建answer设置成自己的本地描述,

WebRTC实战 | 视频云

3、收集Candidate,应答方收到发起方发送的ICE数据时,调用pc的addIceCandidate方法。pc2.addIceCandidate(new RTCIceCandidate(ice))复制代码发起方收到应答方发送的ICE数据时,同样调用RTCPeerConnection对象的addIceCandidate方法。

WebRTC实战 | 视频云

至此,一个最简单的WebRTC连接就建立完成了。文章来源地址https://www.toymoban.com/news/detail-475587.html

到了这里,关于WebRTC实战 | 视频云的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于ZLMediaKit的webrtc实时视频传输demo搭建

    环境 部署ZLMediaKit流媒体服务器 安装openssl 首先可以检查一下自己的openssl的版本如果是1.1.1以上就可以忽略这一步 安装libsrtp 其中初始化配置的时候可能会报错,如果报错换成 ./configure --enable-openssl 即可 对于一些比较新的编译环境(如GCC 10+),编译 libsrtp-2.3.0 可能会存在问题

    2024年02月02日
    浏览(28)
  • 【WebRTC】音视频通信

    WebRTC对等体还需要查找并交换本地和远程音频和视频媒体信息,例如分辨率和编解码器功能。 交换媒体配置信息的信令通过使用被称为SDP的会话描述协议格式来交换,被称为提议和应答的元数据块 一方发起调用 getUserMedia 打开本地摄像头 媒体协商(信令交换,媒体协商主要

    2024年02月07日
    浏览(42)
  • docker部署SRS实时视频服务器,rtmp推流,用WebRTC播放

    SRS是一个简单高效的实时视频服务器,支持RTMP/WebRTC/HLS/HTTP-FLV/SRT/GB28181 大家可以先去gitub上面看使用说明,地址是:v4_CN_Home · ossrs/srs Wiki · GitHub 然后我们通过docker去启动SRS,这些文档里面都有,就不用多说了,然后我们可以用rtmp推流 用WebRTC播放,首先要支持WebRTC我们需要

    2023年04月11日
    浏览(44)
  • VUE+webrtc-streamer实现实时视频播放(监控设备-rtsp)

    首先说明目前我只完成了本地测试,因还没确定技术选型所以暂无项目应用,先做一下储备,后续项目应用的话这篇文章会持续更新。 监控设备播放效果如下:基于公司环境测试了大华和海康的监控设备(H264编码)可以正确播放 1、下载webrtc-streamer,本机测试我下载的最新

    2024年02月01日
    浏览(25)
  • VUE+webrtc-streamer 实现实时视频播放(监控设备-rtsp)

    下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面 地址:https://github.com/mpromonet/webrtc-streamer/releases 注意:第三步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1端口可 文章参考链接:https://blog.csdn.net/liona_koukou/article/details/126605137

    2024年02月02日
    浏览(42)
  • SRS流媒体服务(四)WebRTC实现实时视频通话和低延时互动直播

    CentOS版本号:7.9 SRS版本号:4.0.215 服务器IP:192.168.5.104 注意需要开启端口号:1935、1985、8000(UDP端口)、8080。 注意需要开启服务:http WebRTC是一个由Google发起的实时通讯解决方案,其中包含视频音频采集,编解码,数据传输,音视频展示等功能,我们可以通过技术快速地构

    2024年02月12日
    浏览(57)
  • WebRTC实战 | 视频云

    WebRTC是当前实时通信领域的重要技术之一,具有广泛的应用前景。可以实现音频、视频和数据的实时传输。支持点对点通信、多方会议、屏幕共享等多种应用场景,同时具有高质量、低延迟、强安全性等特点,是开发实时通信应用的理想选择。可以应用于远程协作、在线教育

    2024年02月08日
    浏览(23)
  • VUE3 播放RTSP实时、回放(NVR录像机)视频流(使用WebRTC)

    1、下载webrtc-streamer,下载的最新window版本 Releases · mpromonet/webrtc-streamer · GitHub  2、解压下载包  3、webrtc-streamer.exe启动服务 (注意:这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少,直接双击exe文件会占用cpu) cmd  webrtc-streamer.exe -o 启动如下图所示,

    2024年04月12日
    浏览(38)
  • WebRTC实战-第二章-使用WebRTC实现音视频通话

    、 什么是WebRTC|WebRTC入门到精通必看|快速学会音视频通话原理|WebRTC超全资料分享FFmpeg/rtmp/hls/rtsp/SRS WebRTC **WebRTC详细指南** http://www.vue5.com/webrtc/webrtc.html WEBRTC三种类型(Mesh、MCU 和 SFU)的多方通信架构 WebRTC API包括媒体捕获,音频和视频编码和解码,传输层和会话管理 。 假设

    2023年04月12日
    浏览(37)
  • 【网络通信 -- WebRTC】项目实战记录 -- linux 环境下 libmediasoup 编译与测试

    【1】编译配置 libwebrtc 【1.1】下载并配置 depot_tools 【1.2】获取 WebRTC 源码 【1.3】编译 WebRTC 【1.4】获取 WebRTC 相关头文件与库 【2】编译配置 libmediasoupclient 【3】编译运行 mediasoup-broadcaster-demo mediasoup-broadcaster-demo 使用 libmediasoupclient 库实现向 mediasoup 服务器发布一个预设的视

    2024年02月10日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包