WebRTC是什么

WebRTC是一个开源项目,包含相关协议及API具体实现。WebRTC的作用是实现浏览器端到端的实时数据传输。

端到端媒体传输的建立过程(eg A with B)

  1. A获取媒体流(MediaStream)或数据流
    一般通过MediaDevices.getUserMedia()获取媒体流,媒体流包含了请求媒体类型的(音视频)轨道MediaStreamTrack。一个流可以包含视频轨道,音频轨道或其他。关于MediaDevices参考这里
    通过MediaStream的addTrack方法可以添加轨道(有坑)。
  2. A生成一个RTCPeerConnection接口对象
    RTCPeerConnection接口代表一个由本地计算机到远端的WebRTC连接。该接口提供了创建,保持,监控,关闭连接的方法的实现。
    pc = new RTCPeerConnection([RTCConfiguration dictionary]) 可选参数包括ice服务器等。
  3. A将流加入到RTCPeerConnection对象中
pc.addStream(stream);
//或者加入轨道
stream.getTracks().forEach(track => pc.addTrack(track, stream));
  1. A生成Offer信息
pc.createOffer(function(offer)=>{
//创建完成 TODO 5
},error)
  1. A将生成的Offer设置为本地描述
    RTCSessionDescription描述了连接或者待连接的端和这端的配置信息。
pc.setLocalDescription(new RTCSessionDescription(offer),function(){
//设置完成 TODO 6
},error);
  1. A将生成的Offer发给另一端B(服务器中转)
send json.stringify(offer)
  1. B生成RTCPeerConnection,并按需求设置流
new RTCPeerConnection()
  1. B将收到的Offer设置为远端描述
pc.setRemoteDescription(new RTCSessionDescription(Json.parse(offerString)),function(){
    //设置完成 TODO 9
},error);
  1. B生成Answer,并设置为本地描述
pc.createAnswer(function(answer){
    pc.setLocalDescription(new RTCSessionDescription(answer),function(){
        //设置完成,TODO 10
    })
},error)
  1. B把Answer发送给发起方A(服务器中转)
send json.stringify(answer)
  1. A将Answer设置为远端描述
pc.setRemoteDescription(new RTCSessionDescription(Json.parse(answerString)),function(){
    //设置完成
},error);

理想情况下,现在已经建立连接了。

交换与使用媒体流

当一方addStream时,另一方的RTCPeerConnection会触发onaddstream事件回调,通过事件参数可以获取对面的stream数据,以此进行媒体显示等。

mozilla对于addStream的解释:

当类型为MediaStreamEvent的addstream 事件发生时,通过RTCPeerConnection触发RTCPeerConnection.onaddstream 事件处理函数。当远程媒体流MediaStream 添加到连接后发送事件。当RTCPeerConnection.setRemoteDescription() 后此事件立即被调用而不需要等待SDP交换完成。

创建数据通道(未测试)

//from https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection
var pc = new PeerConnection();
var channel = pc.createDataChannel("Mydata");
channel.onopen = function(event) {
  channel.send('sending a message');
}
channel.onmessage = function(event) { console.log(event.data); }

遇到的一些问题

  • 关于一个MediaSteam添加多个轨道的问题(原文)
    img
  • 本机测试无法连接
    Windows(有时)开两个页面,建立连接后触发了onaddstream事件,但是赋给Video的流不播放。换成本机与虚拟机则正常,原因未知。
  • 局域网里两个客户端连接不上
    交换了下ice信息,加了个addIceCandidate()就好了,原因不明。

我来吐槽

*

*

2位绅士参与评论

  1. 柠檬酸03-13 22:16 (5天前)回复

    公司新项目准备用WebRTC做直播流,来学习学习~

  2. littleplus03-02 21:32 回复

    关于webrtc我的了解只有获取真实IP地址(穿透代理的那种