Kom igång

För att kunna ta emot samtal i din webbläsare behöver du

  1. Ett konto på 46elks
  2. Ett virtuellt telefonnummer
  3. Ett WebRTC-nummer (prata med vår support så hjälper vi dig)
  4. Konfigurera voice start på ditt virtuella nummer.
    Ange {"connect" : "<ditt-webrtc-nummer>"}.

Bygg din applikation

Vi har ett kodexempel på vår GitHub som du kan ladda ner och använda fritt. När du har laddat ner koden behöver du bara ange dina användaruppgifter för att kunna ta emot samtal i din webbläsare.

  1. Ange dina API-uppgifter
    Högst upp i filen forward.php hittar du nedanstående variabler där du ska ange dina API-uppgifter:

    
             
  2. Ange dina WebRTC-uppgifter
    Högst upp i filen script.js hittar du nedanstående variabler där du ska ange dina WebRTC-uppgifter.

    
            

    inoutnumber är ditt virtuella nummer som du skaffade i steg 2 under Kom igång.

Testa din applikation

Öppna din applikation i webbläsaren och ring till ditt virtuella nummer som du skapade i steg 2 under kom igång. Du kommer snart se samtalet dyka upp i din webbläsare.

I samband med ett inkommande samtal, kommer det dyka upp en popup som frågar om webbläsaren får använda din mikrofon. Godkänn detta för att kunna prata med personen på andra sidan.

Flödet för inkommande samtal

  1. Någon ringer till ditt virtuella nummer.

  2. Samtalet vidarekopplas till ditt WebRTC-nummer som du tidigare konfigurerat i voice_start på ditt virtuella nummer.

  3. Din klient (webbläsaren) är konfigurerad till att lyssna på inkommande samtal till ditt WebRTC-nummer. När klienten reagerar kommer det inkommande samtalet visas i webbläsaren och du kan välja att svara eller lägga på.

  4. När du valt att svara kan du prata med den som ringer.

Vill du veta mer om hur detta fungerar? Vi har ett inlägg som förklarar de teoretiska aspekterna kring hur du ringer med WebRTC mellan en webbläsare och en vanlig telefon.

Felsökning

Varför skickas bara ljudet åt ena hållet?

Problematiken som kan uppstå är att ljudet från webbläsaren skickas till telefonen men inte tvärtom. Det gör att det inte går att prata med varandra.

För att lösa detta kan du kontrollera att ”ljudfilen” från MediaStream har hämtas ut och placerats i en <audio> på sidan. Därefter behöver du programmatiskt klicka på PLAY för att ljudet ska spelas upp.

I ren kod kan det ut som följande:


// Get audio-element from your HTML
var remoteAudio = document.getElementById('remoteAudio');

// Create a new media stream to store audio
var remoteStream = new MediaStream();

// When audio track is added by peer
peerconnection.ontrack = () => {

  // Get every audio track from peer and save it
  peerconnection.getReceivers().forEach((receiver) => {
      remoteStream.addTrack(receiver.track);
  });

  // Add the mediastream to an audio element on the page
  remoteAudio.srcObject = remoteStream;

  // Press play to hear the audio
  remoteAudio.play();
}
            

Notera att detta är en kodsnutt från kodexemplet som tillhör denna guide. Om du har utgått ifrån någon annan kod så kan du behöva modifierade ovanstående kodsnutt för att det ska fungera i din applikation.

Varför bryts samtalen helt plöstligt?

Problemet som kan uppstå är att alla samtal automatiskt bryts efter en viss tidsintervall, t.ex. efter 60 sekunder.

Det finns något som kallas session timers som styr samtalets livslängd. I biblioteket som användes i kodexemplet för denna guide, är session_timers aktiverad per default vilket orsakar att att samtalet avsluta after 60 sekunder. När denna avaktiveras av kan samtalet pågå längre.

Så här kan det se ut i kod (notera näst sista raden):


var configuration = {
  sockets  : [ socket ],
  uri      : 'WEBRTC_URI',
  password : 'YOUR_PASSWORD',
  session_timers: false
};
        

false innebär alltså att session_timers är avaktiverad. Om du sätter den till true så aktiverar du den igen.

Oklart om det är korrekt att helt stänga av session_timers. En bättre lösning hade kanske varit att uppdatera sin session efter en viss tidsintervall.

Ett argument för det är att vi fortfarande vill använda session_timers som en fallback ifall det av någon anledning inte skulle gå att avsluta samtalet.

Kan flera personer använda samma klient samtidigt?

Nej. Standardbeteende i WebRTC är en klient per användare.

Detta betyder att om du bygger en lösning som du konfigurerar med samma användaruppgifter och kör den i två webbläsare samtidigt så kommer du få oväntade resultat. Om du stänger ena webbläsaren så kommer det fungera som det ska.

På samma sätt kan du inte köra din kod på flera datorer om du har konfigurerat den med samma uppgifter. Däremot går det alldeles utmärkt att du konfigurerar din kod med dina uppgifter och din kompis konfigurerar sin kod med sina uppgifter. Ni kan samtidigt köra era lösningar i varsin webbläsare.

Behöver du hjälp?

Kontakta vår support om du har frågor eller funderingar. Vi hjälper dig gärna!

Psst! Kom ihåg att du kan styla din nya "webb-telefon" precis hur du vill 👏🏼