webrtc实时音视频即时通讯，个人心得

1、获取摄像头或屏幕分享(我的电脑是台式主机没有摄像头，只能分享屏幕)

具体文档地址：https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices

这里是采集屏幕音视频，如需采集摄像头将getDisplayMedia方法替换成getUserMedia

<button @click="getScreen()">获取屏幕</button>
<video ref="video_ref" controls style="height:300px;width:300px;"></video>


async getScreen() {
  var options = {
    audio: true,
    video: true
  }
  var stream = await navigator.mediaDevices.getDisplayMedia(options)
  this.$refs.video_ref.srcObject = stream
  this.$refs.video_ref.play()
}

注意navigator.mediaDevices.getDisplayMedia是异步回调

options：代表着轨道约束，audio或video分别采集音频或视频，为false不采集，此为简单的示例，具体文档地址https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

使用示例如下，具体请参照文档自行配置（关于音频的话这些配置感觉没什么用，笔记本还是会有噪音回声之类的）

var options = {
  audio: {
    autoGainControl: true, // 指定是否首选和/或需要自动增益控制的对象
    channelCount: 2, // 指定可接受和/或要求的通道计数或通道计数范围。
    echoCancellation: true, // 指定是否首选和/或需要回声消除的对象。
   },
   video: true
}

stream：表示媒体内容流。一个流由多个轨道组成，例如视频或音频轨道。注意使用srcObject赋值，URL.createObjectURL()无效

注意：获取摄像头或屏幕分享只能在本地localhost或者https环境下，如需两台电脑同事之间流媒体交换互测的话需配置本地https地址，参考别人的，按照流程生成文件，使用博客中的方法我这边不行报错，以下是我的配置 

 

前端开发本地搭建https环境_寂静狂想曲的博客-CSDN博客_前端使用https

2、即时通信，采用webrtc协议交换流媒体，这里是说前端，srs服务搭建我不会，没研究

webrtc协议采用的RTCPeerConnection方法，具体文档地址：https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/RTCPeerConnection

// 推流方法
async pushStream() {
  var pushPc = new RTCPeerConnection(null) 

  // 具体看文档中阐述,发送音视频媒体流，不需要某一个可删除
  pushPc.addTransceiver("audio",{direction: "sendonly"});
  pushPc.addTransceiver("video",{direction: "sendonly"});
 
  // 将上面获取到的流追加进pushPc
  // addTrack()将一个新的媒体轨道添加到轨道集合中，该轨道将被传输到另一个对等点
  this.myStream.getTracks().forEach((track) => {
    pushPc.addTrack(track);
  });

  // 该方法RTCPeerConnection启动创建SDP提议，以启动到远程对等点的新WebRTC连接
  // 创建信令
  var offer = await this.pushPc.createOffer();
  
  // 此描述指定连接本地端的属性，包括媒体格式
  await pushPc.setLocalDescription(offer);

  // 当整体连接状态发生RTCPeerConnection变化时发送。
  pushPc.addEventListener('connectionstatechange',(e) => {
    if(e.target.connectionState == 'connected') {
      console.log('连接成功',e);
    }
    else if(e.target.connectionState == 'failed') {
      console.log('连接失败',e); 
    }
  })
  
  var session = await new Promise((resolve, reject) => {
    var data = {
      // 后端给的推流地址，参数看后端
      api: 'http://172.0.0.1:1985/rtc/v1/publish/',
      // 随机数
      tid: Number(parseInt(new Date().getTime()*Math.random()*100)).toString(16).slice(0, 7), 
      // 当前流地址，live代表房间号，serverstream代表昵称（可自定义）
      streamurl: 'webrtc://172.0.0.1/live/serverstream',
      clientip: null, 
      // 信令
      sdp: offer.sdp
    };

    serve({url: data.api,method: 'post',data: data}).then(res => {
      if (res.data.code) {
        reject(res)
        this.$message.error(`推流失败，请检查`)
        return
      }
        resolve(res)
      }).catch(err => {
        reject(err)
        this.$message.error(`推流失败，请检查`)
      })
    })
  
  
  // 应答
  await pushPc.setRemoteDescription(
    new RTCSessionDescription({type: 'answer', sdp: session.data.sdp})
  );
}

以上只是简单的一个推流示例，我的环境是srs服务器跟webrtc协议，拉流的话跟这个差不多，可以看到时后端给的播放示例，在代码里找到播放事件

目前遇到的问题有推送麦克风音频会把电脑系统音频带进去，无法只采集麦克风音频（台式机带耳机），有会的望指导