屏幕共享不适用于 getDisplayMedia

问题描述

当我添加 getUserMedia 时，它工作正常，但是当我将 getUserMedia 更改为 getdisplayMedia 时，它在我的窗口中显示屏幕共享，但它没有流式传输到其他设备。

这是我的 script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myPeer = new Peer(undefined,{
  path: '/peerjs',host: '/',port: '443'
})
let myVideoStream;
const myVideo = document.createElement('video')
myVideo.muted = true;
const peers = {}
navigator.mediaDevices.getUserMedia({
  video: true,audio: true
}).then(stream => {
  myVideoStream = stream;
  addVideoStream(myVideo,stream)
  myPeer.on('call',call => {
    call.answer(stream)
    const video = document.createElement('video')
    call.on('stream',userVideoStream => {
      addVideoStream(video,userVideoStream)
    })
  })

  socket.on('user-connected',userId => {
    connectToNewUser(userId,stream)
  })
  // input value
  let text = $("input");
  // when press enter send message
  $('html').keydown(function (e) {
    if (e.which == 13 && text.val().length !== 0) {
      socket.emit('message',text.val());
      text.val('')
    }
  });
  socket.on("createMessage",message => {
    $("ul").append(`<li class="message"><b>user</b><br/>${message}</li>`);
    scrollToBottom()
  })
})

socket.on('user-disconnected',userId => {
  if (peers[userId]) peers[userId].close()
})

myPeer.on('open',id => {
  socket.emit('join-room',ROOM_ID,id)
})

function connectToNewUser(userId,stream) {
  const call = myPeer.call(userId,stream)
  const video = document.createElement('video')
  call.on('stream',userVideoStream => {
    addVideoStream(video,userVideoStream)
  })
  call.on('close',() => {
    video.remove()
  })

  peers[userId] = call
}

function addVideoStream(video,stream) {
  video.srcObject = stream
  video.addEventListener('loadedMetadata',() => {
    video.play()
  })
  videoGrid.append(video)
}



const scrollToBottom = () => {
  var d = $('.main__chat_window');
  d.scrollTop(d.prop("scrollHeight"));
}


const muteUnmute = () => {
  const enabled = myVideoStream.getAudioTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getAudioTracks()[0].enabled = false;
    setUnmuteButton();
  } else {
    setMuteButton();
    myVideoStream.getAudioTracks()[0].enabled = true;
  }
}

const playStop = () => {
  console.log('object')
  let enabled = myVideoStream.getVideoTracks()[0].enabled;
  if (enabled) {
    myVideoStream.getVideoTracks()[0].enabled = false;
    setPlayVideo()
  } else {
    setStopVideo()
    myVideoStream.getVideoTracks()[0].enabled = true;
  }
}


const shareScreen = async () => {
  let captureStream = null
  let userId=1233
  try {
    captureStream = await navigator.mediaDevices.getdisplayMedia()
    connectToNewUser(userId,captureStream)

  } catch (err) {
    console.error("Error: " + err)
  }
  // 
  
};


const setMuteButton = () => {
  const html = `
    <i class="fas fa-microphone"></i>
    <span>Mute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setUnmuteButton = () => {
  const html = `
    <i class="unmute fas fa-microphone-slash"></i>
    <span>Unmute</span>
  `
  document.querySelector('.main__mute_button').innerHTML = html;
}

const setStopVideo = () => {
  const html = `
    <i class="fas fa-video"></i>
    <span>Stop Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

const setPlayVideo = () => {
  const html = `
  <i class="stop fas fa-video-slash"></i>
    <span>Play Video</span>
  `
  document.querySelector('.main__video_button').innerHTML = html;
}

这是我的 github fork github code

使用 ssl 证书加密的 heroku 也一切正常。

这是我的 heroku link

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）