Como conectar um peer js ao outro?

Front-end JavaScript
#1

Recentemente venho criando várias postagens sobre o peer js, e recentemente eu criei uma espécie de vídeo chamada aqui , usando aquele mesmo conceito usando esse html:
//lembrando esse html seria usado apenas para o admin.php que seria o responsável por criar a sala

  <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">Criar Sala</button><br><br>
                    <button onclick="joinRoom()" class="join_room">Entrar em uma Sala</button><br>
                </div>
            </div>
        <video id="local-video" ></video>
<video id="remote" ></video>

e esse script (também só será utilizado para o admin):

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)
}

exemplo na pagina html(do usuário comum) ficaria mais o menos assim:

<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>

e esse seria o script(Usuario Comum):

function joinRoom(){
    }

e como você Pode ver ela está vazia, Porque eu quero criar um sistema como se fosse uma live stream onde você só iria assistir o que a outra pessoa estava fazendo , sem necessidade de precisar ligar sua câmera , Fui Claro?

#2

Tem que criar um video e audio “fake”.

const createEmptyAudioTrack = () => {
  const ctx = new AudioContext();
  const oscillator = ctx.createOscillator();
  const dst = oscillator.connect(ctx.createMediaStreamDestination());
  oscillator.start();
  const track = dst.stream.getAudioTracks()[0];
  return Object.assign(track, { enabled: false });
};

const createEmptyVideoTrack = ({ width, height }) => {
  const canvas = Object.assign(document.createElement("canvas"), {
    width,
    height,
  });
  canvas.getContext("2d").fillRect(0, 0, width, height);

  const stream = canvas.captureStream();
  const track = stream.getVideoTracks()[0];

  return Object.assign(track, { enabled: false });
};

const audioTrack = createEmptyAudioTrack();
const videoTrack = createEmptyVideoTrack({ width: 640, height: 480 });
const mediaStream = new MediaStream([audioTrack, videoTrack]);
#4

eu tenho que colocar esse script dentro de joinroom()?

#5

Isso. Mas tem que separar o emissor da Live e o receptor.

Eu separo isso usando banco de dados

#6

Você sabe se têm algum vídeo do YouTube ou alguma matéria em algum site que mostra como fazer isso.

#7