「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战」。
WebRTC重要的类有以下几个
- MediaStream( 捕获用户设备的音、视频流)
- RTCPeerConnection(在用户之间点对点的传输音频和视频)
- RTCDataChannel(高吞吐量、低延时的点对点数据传输信道)
使用方法
MediaStream 是媒体流,从设备的摄像头、麦克风获取音、视频流数据;RTCPeerConnection 是构造函数,通过 new RTCPeerConnection() 方法,可以创建一个新的 RTCPeerConnection 实例,可以连接 APP 端和远端。
使用时,将 MediaStream 的对象直接赋值给 HTMLMediaElement 接口的 srcObject 属性(video.srcObject = stream;),然后发送到 RTCPeerConnection 对象,传送到远程对象,即可实现媒体流的播放。
如果需要数据传输,则创建 RTCDataChannel 通道,该通道可以实现 APP 端和远端的二进制数据传输。
注:可以使用 adapter-latest.js 实现不同浏览器之间的适配问题。
API 详解
MediaStream
MediaStream 接口是一个媒体内容的流。一个流包含几个 轨道,比如视频和音频轨道。 一个 MediaStream 包含了0-N 条 MediaStreamTrack(音、视频源),MediaStream 是 MediaStreamTrack 的合集,MediaStreamTrack 是 WebRTC 的基本媒体单位,可包含音频、视频或其它轨道类型。MediaStream 又名 getUserMedia,
getUserMedia()方法可以获取本机的摄像头、麦克风的媒体流
getUserMedia()
捕获用户设备的音、视频流。
MediaRecorder
录制音频和视频。
RTCPeerConnection
RTCPeerConnection()构造函数,返回一个新建的 RTCPeerConnection 实例,它代表了本地端机器与远端机器的一条连接。 提供点对点的传输音、视频数据,不需要服务器中转,但是需要服务器建立信道。如果点对点传输失败,也可以通过服务器进行中转。
RTCDataChannel
RTCDataChannel 接口代表在两者之间建立了一个双向数据通道的连接。 RTCDataChannel 可传输任何类型的数据,是建立在 PeerConnection 基础之上的,不可单独使用。
RTCDataChannel 提供了 send() 方法,可以传输数据。
RTCDataChannel.send(data);
以上,就是 WebRTC 几个重要类的说明。