javascript - 如何将一个对等 js 连接到另一个？

Question

最近我一直在创建几个关于对 js 的帖子，最近我创建了一个名为 [here] 的视频（如何在 peer js 上正确使用 getDisplayMedia？），使用这个 html 使用相同的概念：//记住这个 html 会仅用于 ** admin.php ** 谁将负责创建房间

 <p id="notification" hidden></p>
        <div class="entry-modal" id="entry-modal" style="opacity: 0%;">
                    <p>Create or Join Meeting</p>
                    <input id="room-input" class="room-input" placeholder="Enter Room ID" value="yCJzWAn12EZsjq2mPhPGfmRnMLXQAoLrCe8QwGLI">
                    <div style="display:inline-block;"><br>
                        <button onclick="createRoom()" class="create_room">Create room</button><br><br>
                        <button onclick="joinRoom()" class="join_room">join room</button><br>
                    </div>
                </div>

和这个脚本（它也将只用于管理员）：

const PRE = "DELTA"
const SUF = "MEET"
var room_id;
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var local_stream;
function createRoom(){
    console.log("Creating Room")
    let room = document.getElementById("room-input").value;
    if(room == " " || room == "")   {
        alert("Please enter room number")
        return;
    }
    room_id = PRE+room+SUF;
    let peer = new Peer(room_id)
    peer.on('open', (id)=>{
        console.log("Peer Connected with ID: ", id)
        hideModal()
        getUserMedia({video: true, audio: true}, (stream)=>{
            local_stream = stream;
            setLocalStream(local_stream)
        },(err)=>{
            console.log(err)
        })
        notify("Waiting for peer to join.")
    })
    peer.on('call',(call)=>{
        call.answer(local_stream);
        call.on('stream',(stream)=>{
            setRemoteStream(stream)
        })
    })
}

function setLocalStream(stream){
    
    let video = document.getElementById("local-video");
    video.srcObject = stream;
    video.muted = true;
    video.play();
}
function setRemoteStream(stream){
   
    let video = document.getElementById("remote");
    video.srcObject = stream;
    video.play();
}

function hideModal(){
    document.getElementById("entry-modal").hidden = true
}

function notify(msg){
    let notification = document.getElementById("notification")
    notification.innerHTML = msg
    notification.hidden = false
    setTimeout(()=>{
        notification.hidden = true;
    }, 3000)
}

（普通用户的）html页面上的示例，它或多或少看起来像这样：

<p id="notification" hidden></p>
        <div class="entry-modal" id="entry-modal" style="opacity: 0%;">
                    <p>Create or Join Meeting</p>
                    <input id="room-input" class="room-input" placeholder="Enter Room ID" >
                    <div style="display:inline-block;"><br>
                        <button onclick="joinRoom()" class="join_room">Entrar em uma Sala</button><br>
                    </div>
                </div>
    <video id="remote" ></video>

这将是脚本（普通用户）：

函数加入房间（）{}

如您所见，它是空的，因为我想创建一个系统，就好像它是一个直播流一样，您可以在其中观看其他人在做什么，而无需打开相机，是否清楚？

标签： javascriptpeerjs