关于webrtc在vue中的使用

基本的两个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 srcObject
        if ('srcObject' in video) {
          video.srcObject = stream;
        } else {
          // 防止在新的浏览器里使用它，应为它已经不再支持了
          video.src = window.URL.createObjectURL(stream);
        }
      },

 

成功通信的要素

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

我的场景如下：