WebRTC Video Chat i 20 rader JavaScript (4 / 7 steg)

Steg 4: Förbereder sig för att ta emot samtal

För att starta att underlätta videosamtal, behöver du en publicera och prenumerera på nyckel. För att få din pub/sub nycklar, måste du först registrera dig för ett PubNub konto. När du registrerat dig, kan du hitta din unika PubNub nycklar i PubNub Developer Dashboard. I gratis sandlåda nivån bör ge dig all den bandbredd du behöver bygga och testa WebRTC programmet.

Först, kan använda JavaScript för att hitta våra video hållare, där andra som ringer ansikten kommer att gå.

var video_out = document.getElementById("vid-box");

Därefter ska vi implementera funktionen inloggning. Den här funktionen ställer in telefonen med användarnamnet de tillhandahålls som en UUID.

funktion login(form) {
var telefonen = window.phone = telefon ({
nummer: form.username.value || "Anonym", / / lyssna på användarnamn linje annan anonym
publish_key: 'your_pub_key',
subscribe_key: 'your_sub_key',
});
Phone.Ready(function() {form.username.style.background="#55ff5b";});
Phone.Receive(function(session) {
session.Connected(function(session) {video_out.appendChild(session.video);});
session.ended(function(session) {video_out.innerHTML='';});
});
returnera false; Så form inte lämnar in.
}

Du kan se vi använder användarnamnet som telefonnummer, och initiera PubNub med din egen publicera och prenumerera på nycklar. Den nästa funktionen, phone.ready, kan du definiera en callback för när telefonen är klar att placera ett samtal. Jag helt enkelt ändra användarnamn input bakgrunden till grönt, men du kan skräddarsy det efter dina behov.

Funktionen phone.receive kan du definiera en motringning som tar en session som en parameter för när en samtal uppstår, vare sig det vara ett nytt samtal, lägga på ett samtal, eller för att förlora service, du bifoga de händelsehanterare till sessioner i phone.receive.

Jag definierade session.connected som åberopas efter att ha fått ett telefonsamtal, och när du är redo att börja videochatt. Jag helt enkelt bifogas den sessionen stream våra video div.

Sedan definierar jag session.ended som kallas efter åberopa phone.hangup. Det är där du placerar avsluta-samtal logik. Jag helt enkelt rensa video innehavarens innerHTML.