用 webRTC 写一个一对一的视频通话

要使用 webRTC 进行一对一的视频通话，需要以下步骤：

1. 建立本地媒体流对象

使用 getUserMedia() 方法获取本地视频和音频流对象。

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
})
.then(function(localStream) {
    // localStream 是本地媒体流对象
})
.catch(function(error) {
    console.log(error);
});

2. 建立 peer connection 对象

使用 RTCPeerConnection() 方法创建 peer connection 对象，并将本地媒体流对象添加到 peer connection 中。

var pc = new RTCPeerConnection();

localStream.getTracks().forEach(function(track) {
    pc.addTrack(track, localStream);
});

3. 建立远程媒体流对象

通过 peer connection 对象，监听远程的媒体流对象。

pc.addEventListener('track', function(event) {
    // event.streams 是一个媒体流对象数组
    var remoteStream = event.streams[0];
});

4. 发送 offer 和 answer

通过 peer connection 对象，发送 offer 和 answer 信令，建立连接。

pc.createOffer()
.then(function(offer) {
    return pc.setLocalDescription(offer);
})
.then(function() {
    // 发送 offer 信令
})
.catch(function(error) {
    console.log(error);
});

// 接收到 offer 信令后，回复 answer 信令
pc.setRemoteDescription(offer)
.then(function() {
    return pc.createAnswer();
})
.then(function(answer) {
    return pc.setLocalDescription(answer);
})
.then(function() {
    // 发送 answer 信令
})
.catch(function(error) {
    console.log(error);
});

// 接收到 answer 信令后，设置远程描述
pc.setRemoteDescription(answer)
.catch(function(error) {
    console.log(error);
});

5. 连接成功后，进行视频通话

当连接成功后，就可以在页面中显示本地视频和远程视频，并进行视频通话了。

// 添加本地视频和远程视频
var localVideo = document.getElementById('localVideo');
var remoteVideo = document.getElementById('remoteVideo');

localVideo.srcObject = localStream;
remoteVideo.srcObject = remoteStream;

完整的一对一视频通话示例代码请参考：https://webrtc.github.io/samples/src/content/peerconnection/pc1/