美文网首页
【WebRtc】获取分享屏幕

【WebRtc】获取分享屏幕

作者: HeloWxl | 来源:发表于2023-03-13 11:11 被阅读0次

    分享前页面

    image.png

    获取分享屏幕

    image.png

    Code

     /**
         * 开始屏幕共享
         */
        openShareScreen() {
          var that = this
          // 判断是否支持获取本地屏幕分享数据
          if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
            that.$notify({
              title: '警告',
              message: '浏览器不支持本地屏幕设备',
              type: 'warning'
            });
            return;
          }
          const constraints = {
            audio: true,
            video: true
          };
          this.loading = true
          this.getLocalDisplayMedia(constraints).then(stream => {
            // 拿到流数据后,将流显示在video标签内
            this.setDomVideoStream('localVideo', stream);
            // 监听流
            stream.getVideoTracks()[0].onended = () => {
              //监听以后的处理逻辑……
              this.$notify({
                title: '提示',
                message: '屏幕共享已关闭',
                type: 'success'
              });
              that.closeUserMedia('localVideo')
            }
          });
        }
    

    期待更新,麻烦点个赞,点个关注,栓Q !

    相关文章

      网友评论

          本文标题:【WebRtc】获取分享屏幕

          本文链接:https://www.haomeiwen.com/subject/okrcrdtx.html