如何解决屏幕共享不适用于 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 举报,一经查实,本站将立刻删除。