基本的两个API

RTCPeerConnection

视频/音频通信的基础

var self = this;
self.pc = new RTCPeerConnection(iceServer);

MediaStream 

访问本地相机和麦克风的媒体流

            navigator.mediaDevices.getUserMedia({ audio: true, video: false })//音频通话，如果为视频通信把video后面的false改为true即可.then(function(stream) {//绑定本地音频流'LocalAudio'self.thisvideo = document.getElementById('LocalAudio');self.addVideoURL('LocalAudio', stream);//自己写的函数self.thisvideo.muted = true;self.localStream = stream;self.pc.addStream(stream);if(data){self.sendOffer();//自己写的函数}else{self.handleOffer(self.offer);//自己写的函数self.sendAnswer();//自己写的函数}}).catch(function(err) {console.log(err.name + ': ' + err.message);});

其中，addvideoURL函数

      addVideoURL(elementId, stream) {var video = document.getElementById(elementId);// Old brower may have no srcObjectif ('srcObject' in video) {video.srcObject = stream;} else {// 防止在新的浏览器里使用它，应为它已经不再支持了video.src = window.URL.createObjectURL(stream);}},

成功通信的要素

假设A要与B进行通信，两边都要对通信进行初始化，也就是初始化RTCPeerConnection和MediaStream 

我的场景如下：

A想要发起与B的通信，通过websocket（我的选择，也可以用别的通信方式）给B发送想要通信的信息，同时A进行通信初始化：

建立RTCPeerConnection，onicecandidate、onaddstream（绑定对面传来的远程音视频流'RemoteAudio'/'RemoteVideo'），同样是使用websocket发送ice(信令)，发送offer，同时将setLocalDescription设置为自己的offer；建立音视频流，绑定本地音视频标签。

B收到A的想要通信的websocket信息，如果同意通信，则初始化：建立RTCPeerConnection，onicecandidate、onaddstream（绑定对面传来的远程音视频流'RemoteAudio'/'RemoteVideo'），使用websocket发送ice(信令)，发送answer，同时将setLocalDescription设置为自己的answer；建立音视频流，绑定本地音视频标签。

B收到A发送的offer，进行setRemoteDescription，将A的offer设置为远程描述（大概意思是这个我自己的理解）

A收到B发送的answer，进行setRemoteDescription，将B的answer设置为远程描述

A,B收到对方发送的ice，进行addIceCandidate，将对方的ice添加到信令参与者中（大概意思是这个我自己的理解）

至此，通信建立完成，可以进行通信了

结束通信

        let self = this;self.pc.close();self.pc.onicecandidate = null;self.pc.onaddstream = null;self.thisvideo.srcObject.getTracks()[0].stop();self.thisvideo.srcObject.getTracks()[1].stop();

下面放一下我的完整代码，我是根据 isAudioOnly这个参数来判断是进行音频还是视频通信的，并且区分通信发起者和被发起者来初始化。

视频发起者通过websocket发送发起视频的信息并运行initiateCall(true)  ，收到发送发起视频信息的一方运行initiateCall(false) 

        initiateCall(data){console.log("initiateCall:"+data)var self = this;var iceServer = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]};self.pc = new RTCPeerConnection(iceServer);self.pc.onicecandidate = function(event) {console.log("send ice")let message={candidate:event.candidate,to:self.choiceUser[0].userId};self.msgtype=9;self.messageValue=JSON.stringify(message);console.log(this.messageValue)self.send();};self.pc.onaddstream = function(e) {console.log("onaddstream")if(self.isAudioOnly){var video = document.getElementById('RemoteAudio');self.addVideoURL('RemoteAudio', e.stream);}else {var video = document.getElementById('RemoteVideo');self.addVideoURL('RemoteVideo', e.stream);}};if(self.isAudioOnly){console.log("初始化音频")navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) {self.thisvideo = document.getElementById('LocalAudio');self.addVideoURL('LocalAudio', stream);self.thisvideo.muted = true;self.localStream = stream;self.pc.addStream(stream);if(data){self.sendOffer();}else{self.handleOffer(self.offer);self.sendAnswer();}}).catch(function(err) {console.log(err.name + ': ' + err.message);});}else{console.log("初始化视频")navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream) {self.thisvideo = document.getElementById('LocalVideo');self.addVideoURL('LocalVideo', stream);self.thisvideo.muted = true;self.localStream = stream;self.pc.addStream(stream);if(data){self.sendOffer();}else{self.handleOffer(self.offer);self.sendAnswer();}}).catch(function(err) {console.log(err.name + ': ' + err.message);});}

收到 ice信令，执行

this.handleCandidate(message.candidate)

收到answer，执行

this.handleAnswer(message.answer)

////message.answer,message.candidate是我自己写的websocket信息，具体需要自己实现

     sendOffer() {let self = this;self.pc.createOffer(offer => {console.log("send offer");let message={offer:offer,to:self.choiceUser[0].userId};self.msgtype=10;self.messageValue=JSON.stringify(message);//console.log(this.messageValue);self.send();self.pc.setLocalDescription(offer);},error => {alert('Error when creating an offer');});},sendAnswer(){let self = this;self.pc.createAnswer(answer => {console.log("send answer");self.pc.setLocalDescription(answer);let message={answer:answer,to:self.choiceUser[0].userId};self.msgtype=11;self.messageValue=JSON.stringify(message);// console.log(this.messageValue);self.send();},error => {alert('Error when creating an answer');console.log(error)});},handleAnswer(data) {let self = this;self.pc.setRemoteDescription(new RTCSessionDescription(data)).catch(error=>{console.log(error)});console.log("handleAnswer ok")},handleOffer(data) {let self = this;self.pc.setRemoteDescription(new RTCSessionDescription(data)).catch(error=>{console.log(error)});console.log("handleOffer ok")},handleCandidate(data) {let self = this;self.pc.addIceCandidate(new RTCIceCandidate(data));console.log("handleCandidate")},

参考资料：

https://www.sohu.com/a/306564954_120122487（描述比较形象的教程）

http://www.vue5.com/webrtc/webrtc_voice_demo.html （详细的原理以及教程）

如果有什么错误希望大家指出，谢谢