我正在尝试使用peer/getUserMedia创建一个视频会议的web应用。
目前，当我将唯一ID发送到视频会议时，我能够听/看到任何加入我的会话的人。
然而，只有第一个加入我的会话的人可以与我进行通信/看到我。
我想让其他用户也能看到/听到视频会议中的每个人。
到目前为止，这是我所做的工作。另外，当前编写的代码，每当一个新用户加入时，我的视频就会再次添加，所以如果我是主持人，我会看到两个自己的视频，但这对我来说是容易解决的。
<html>
<body>
<h3 id="show-peer"></h3>
<div style="display: grid; justify-content: space-around; margin:10px;">
<div style="width: 300px;height: 200px;transform: scale(-1, 1);border: 2px solid; display:grid; margin-bottom: 5%;" id="ourVideo"></div>
<div style="width: 300px;height: 200px;transform: scale(-1, 1);border: 2px solid; display: grid;" id="remoteVideo"></div>
</div>
<input id="peerID" placeholder="Peer ID">
<button id="call-peer" onclick="callPeer()">Call Peer</button>
<br>
<button id="screenShare"onclick="shareScreen()">Share Screen</button>
</body>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
<script>
window.addEventListener('load',(event)=>{
var peer= new Peer()
var myStream;
var currentPeer;
var peerList=[];
peer.on('open',function(id){
document.getElementById("show-peer").innerHTML=id
})
peer.on('call',function(call){
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then((stream)=>{
myStream = stream
addOurVideo(stream)
call.answer(stream)
call.on('stream',function(remoteStream){
if(!peerList.includes(call.peer)){
addRemoteVideo(remoteStream)
currentPeer = call.peerConnection
peerList.push(call.peer)
}
})
}).catch((err)=>{
console.log(err+" unable to get media")
})
})
function stopScreenShare(){
let videoTrack = myStream.getVideoTracks()[0];
var sender = currentPeer.getSenders().find(function(s){
return s.track.kind ==videoTrack.kind;
})
sender.replaceTrack(videoTrack)
};
document.getElementById("call-peer").addEventListener('click',(e)=>{
let remotePeerId= document.getElementById("peerID").value;
document.getElementById("show-peer").innerHTML= "connecting "+remotePeerId;
console.log(remotePeerId)
callPeer(remotePeerId);
})
document.getElementById("screenShare").addEventListener('click',(e)=>{
navigator.mediaDevices.getDisplayMedia({
video: {
cursor: "always"
},
audio:{
autoGainControl: false,
echoCancellation: false,
googAutoGainControl: false,
noiseSuppression: false
}
}).then((stream)=>{
let videoTrack = stream.getVideoTracks()[0];
videoTrack.onended = function(){
stopScreenShare()
}
let sender = currentPeer.getSenders().find(function(s){
return s.track.kind == videoTrack.kind
})
sender.replaceTrack(videoTrack)
}).catch((err)=>{
console.log("unable to get display media"+err)
})
})
function callPeer(id){
navigator.mediaDevices.getUserMedia({
video:true,
audio:true
}).then((stream)=>{
myStream = stream
addOurVideo(stream)
let call = peer.call(id,stream)
call.on('stream',function(remoteStream){
if(!peerList.includes(call.peer)){
addRemoteVideo(remoteStream)
currentPeer = call.peerConnection
peerList.push(call.peer)
}
})
}).catch((err)=>{
console.log(err+" unable to get media")
})
}
function addRemoteVideo(stream){
let video = document.createElement("video");
video.classList.add("video")
video.srcObject = stream;
video.play()
document.getElementById("remoteVideo").append(video)
}
function addOurVideo(stream){
let video = document.createElement("video");
video.classList.add("video")
video.srcObject = stream;
video.play()
video.muted=true;
document.getElementById("ourVideo").append(video)
}
});
</script>
</html>