WebRTC实战-第二章-使用WebRTC实现音视频通话-Toy模板网

这篇具有很好参考价值的文章主要介绍了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包括媒体捕获，音频和视频编码和解码，传输层和会话管理。

假设我们是一个视频会议的发起人，我们当然先要知道，我们想跟谁进行视频通话，对方需要把相关的环境数据，比如我用的是什么视频编码啊，我们通信的协议是什么？我们把这些数据信息取了个名字叫 sdp。互相交换了环境数据后，被叫端需要把数据的地址准备好，这些数据协议我们成为 ice，当数据准备完成以后，被叫端把ice发给发起端，发起端通过这个ice就能够连上被叫端了。

简单的总结，互换两种信息，环境描述数据和数据地址。这两种叫为 sdp和ice。

iceServer

webrtc建立点对点的对等连接需要用到iceServers参数，可以使用公开免费的一些ice服务器资源，也可以使用开源程序自己搭建ice server，找了一些资源供参考：

1、IceBox https://doc.zeroc.com/ice/latest/icebox

https://blog.csdn.net/u011784767/article/category/7006667 这里有三篇介绍IceBox的文章

2、coturn https://github.com/coturn/coturn

https://www.cnblogs.com/wunaozai/p/5520084.html 这篇文章里有介绍coturn及安装使用

3、免费直接可用的iceserver列表 https://gist.github.com/yetithefoot/7592580

对于目前我的应用需求来说只需要用到getUserMedia和canvas 就够了，这里没有讲到的关于webrtc的知识还有很多，后续就不做补充了，最好的学习资源都在 https://webrtc.org/start/

4、demo https://www.qcloudtrtc.com/webrtc-samples/choosedevice/index.html

WebRTC共分成三个API，分别对应上面三个作用。

MediaStream （又称getUserMedia）
RTCPeerConnection
RTCDataChannel

getUserMedia

navigator.getUserMedia方法目前主要用于，在浏览器中获取音频（通过麦克风）和视频（通过摄像头），将来可以用于获取任意数据流，比如光盘和传感器。

下面的代码用于检查浏览器是否支持getUserMedia方法。

navigator.getUserMedia  = navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia;

if (navigator.getUserMedia) {
    // 支持
} else {
    // 不支持
}

Chrome 21, Opera 18和Firefox 17，支持该方法。目前，IE还不支持，上面代码中的msGetUserMedia，只是为了确保将来的兼容。

getUserMedia方法接受三个参数。

navigator.getUserMedia({
    video: true, 
    audio: true
}, onSuccess, onError);

getUserMedia的第一个参数是一个对象，表示要获取哪些多媒体设备，上面的代码表示获取摄像头和麦克风;onSuccess是一个回调函数，在获取多媒体设备成功时调用；onError也是一个回调函数，在取多媒体设备失败时调用。

调用流程

WebRTC实战-第二章-使用WebRTC实现音视频通话

开发步骤

客户端显示界面
打开摄像头并显示在页面
websocke连接
join、new-peer、resp-join信令实现
leave、peer-leave信令实现
offer、answer、candidate信令实现

leave、peer-leave信令实现

点击离开按钮
响应离开按钮事件
将leave发送给服务器
服务器处理leave。将发送者删除并通知房间（peer-leave）其他人
房间其他人在客户端响应peer-leave事件

offer、answer、candidate信令实现

收到new-peer（handleRemoteNewPeer处理），作为发起者创建RTCPeerConnection，绑定事件响应函数，加入本地流
创建offer sdp，设置本地sdp，并将offer sdp发送给服务器
服务器收到offer sdp转发给指定的remoteClient
接受者收到offer，也创建RTCPeerConnection，绑定事件响应函数，加入本地流
接受者设置远程sdp，并创建answer sdp，然后设置本地sdp并将answer发送给服务器
服务端收到answer sdp转发给指定的remoteClient
发起者收到answer sdp，则设置远程sdp
发起者和接受者都收到ontrack回调事件，获取到对方码流的对象句柄
发起者和接受者都开始请求打洞，通过onIceCandidate获取到打洞信息（candidate）并发送给对方
如果P2P能成功则进行P2P通话，如果P2P不成功，则进行中继转发通话

开发

获取浏览器的流

常规设置

var constraints = {video: true, audio: true};

function onSuccess(stream) {
  var video = document.querySelector("video");
  video.src = window.URL.createObjectURL(stream);
}

function onError(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, onSuccess, onError);

如果网页使用了getUserMedia方法，浏览器就会询问用户，是否同意浏览器调用麦克风或摄像头。如果用户同意，就调用回调函数onSuccess；如果用户拒绝，就调用回调函数onError。

onSuccess回调函数的参数是一个数据流对象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分别返回一个数组，其成员是数据流包含的音轨和视轨（track）。使用的声音源和摄影头的数量，决定音轨和视轨的数量。比如，如果只使用一个摄像头获取视频，且不获取音频，那么视轨的数量为1，音轨的数量为0。每个音轨和视轨，有一个kind属性，表示种类（video或者audio），和一个label属性（比如FaceTime HD Camera (Built-in)）。

onError回调函数接受一个Error对象作为参数。Error对象的code属性有如下取值，说明错误的类型。

PERMISSION_DENIED：用户拒绝提供信息。
NOT_SUPPORTED_ERROR：浏览器不支持硬件设备。
MANDATORY_UNSATISFIED_ERROR：无法发现指定的硬件设备。

设置限制条件

getUserMedia方法的第一个参数，除了指定捕获对象之外，还可以指定一些限制条件，比如限定只能录制高清（或者VGA标准）的视频。


var hdConstraints = {
  video: {
    mandatory: {
      minWidth: 1280,
      minHeight: 720
    }
  }
};

navigator.getUserMedia(hdConstraints, onSuccess, onError);

创建RTCPeerConnection

RTCPeerConnection的作用是在浏览器之间建立数据的“点对点”（peer to peer）通信，也就是将浏览器获取的麦克风或摄像头数据，传播给另一个浏览器。这里面包含了很多复杂的工作，比如信号处理、多媒体编码/解码、点对点通信、数据安全、带宽管理等等。

不同客户端之间的音频/视频传递，是不用通过服务器的。但是，两个客户端之间建立联系，需要通过服务器。服务器主要转递两种数据。

通信内容的元数据：打开/关闭对话（session）的命令、媒体文件的元数据（编码格式、媒体类型和带宽）等。
网络通信的元数据：IP地址、NAT网络地址翻译和防火墙等。
WebRTC协议没有规定与服务器的通信方式，因此可以采用各种方式，比如 WebSocket 。通过服务器，两个客户端按照 Session Description Protocol（SDP协议） 交换双方的元数据。

RTCPeerConnection带有浏览器前缀，Chrome浏览器中为webkitRTCPeerConnection，Firefox浏览器中为mozRTCPeerConnection。Google维护一个函数库adapter.js，用来抽象掉浏览器之间的差异。

WebRTC实战-第二章-使用WebRTC实现音视频通话

RTCDataChannel

RTCDataChannel的作用是在点对点之间，传播任意数据。它的API与WebSockets的API相同。

下面是一个示例。

var pc = new webkitRTCPeerConnection(servers,
  {optional: [{RtpDataChannels: true}]});

pc.ondatachannel = function(event) {
  receiveChannel = event.channel;
  receiveChannel.onmessage = function(event){
    document.querySelector("div#receive").innerHTML = event.data;
  };
};

sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});

document.querySelector("button#send").onclick = function (){
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

Chrome 25、Opera 18和Firefox 22支持RTCDataChannel。

WebRTC Security

我们将在“WebRTC信令”一章中为我们创建的信令服务器添加安全功能。会有两个增强功能 -

使用Redis数据库进行用户认证
启用安全套接字连接(https)

外部函数库

RTCPeerConnectionl，RTCDataChannel由于这两个API比较复杂，一般采用外部函数库进行操作。目前，视频聊天的函数库有SimpleWebRTC、easyRTC、webRTC.io，点对点通信的函数库有PeerJS、Sharefest。

下面是SimpleWebRTC的示例。

var webrtc = new WebRTC({
  localVideoEl: 'localVideo',
  remoteVideosEl: 'remoteVideos',
  autoRequestMedia: true
});

webrtc.on('readyToCall', function () {
    webrtc.joinRoom('My room name');
});

下面是PeerJS的示例。

var peer = new Peer('someid', {key: 'apikey'});
peer.on('connection', function(conn) {
  conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
  });
});

// Connecting peer
var peer = new Peer('anotherid', {key: 'apikey'});
var conn = peer.connect('someid');
conn.on('open', function(){
  conn.send('hi!');
});