Como conectar um peer js ao outro?

5 respostas Resolvido
nick1

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?

5 Respostas

rodriguesabner

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]);
nick1

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

rodriguesabner

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

Eu separo isso usando banco de dados

nick1

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

rodriguesabner
Solucao aceita
Criado 29 de abril de 2021
Ultima resposta 30 de abr. de 2021
Respostas 5
Participantes 2