直播页面，屏幕共享

直播页面，屏幕共享

继阿里云直播后，新需求是老师不仅仅可以露脸直播，还可以将ppt等文档共享出来，让学生看到，因此写下这么一篇文章，记录一下

WebRTC 提供了 mediaDevices.getDisplayMedia API

MDN屏幕捕捉 阿里云直播参考 Web RTC介绍

1.绑定事件，指定共享位置

// 绑定点击事件，finishLive1这个不用管，是我定义的样式
<span class="finishLive1" @click="doShare">分享</span>
//指定video,同时定义一个id，利于后面再次拿取到该标签，这里你可以使用ref，都行，我就使用id了
<video autoplay playsinline id="video_player"></video>

2.获取标签，判断浏览器是否支持，定义video和audio，调用getDisplayMedia

methods:{
    doShare() {
        // #1 获取标签
         const videoPlayer = document.querySelector("video#video_player")
         // #2 判断浏览器是否支持
         if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
             this.$messgae.warning('该浏览器不支持')
             console.log('getDisplayMedia is not supported!');
          }else {
              // #3 定义video和audio
              const constraints = {
                  video : {
                      frameRate: 24,
                      width: 600,
                      height: 480
                  },
                  audio : {
                      echoCancellation : true,
                      noiseSuppression : true,
                      autoGainControl  : true
                  }
              }
              // #4 调用getDisplayMedia，底层是Promise，因此可以拿到成功与失败的结果
              navigator.mediaDevices.getDisplayMedia(constraints).then((mediaStream)=>{
                  // #5 把mediaStream这个视频流直接赋值即可
                  videoPlayer.srcObject = mediaStream;
              }).catch(err=>{
                  console.log(err.name + "," + err.message);
              }
    }
}