Ring med WebRTC mellan en webbläsare och en vanlig telefon

Skrivet av: Eja Höglund

Publicerat: 20 May, 2021

Jag byggde en grej för att kunna ringa med WebRTC mellan en webbläsare och en vanlig telefon. Här kommer jag dela med mig av de teoretiska delarna för att du ska få en tydligare bild av hur det fungerar.

Om du inte vet vad WebRTC är kan du först läsa mitt inlägg om WebRTC för nybörjare.

Vill du sätta upp samma lösning som jag byggde? Här är kodexemplet jag skrev. Om du vill ha hjälp att komma igång finns det steg-för-steg-guider du kan följa:

Hur ringer jag till en webbläsare från en vanlig telefon?

Låt oss först ta ett steg tillbaka.

Att ringa mellan två webbläsare fungerar på samma sätt som att skicka meddelanden mellan två e-postadresser; Du anger den adress du vill komma i kontakt med och klickar sedan på "skicka". Detta fungerar ”out of the box” eftersom adresserna ligger på samma nätverk (Internet).

När vi däremot ska ringa mellan en webbläsare och en vanlig telefon så blir det lite knepigare. I detta fall ligger adresserna på två helt separata nätverk; Internet och telenätet. De två nätverket saknar kännedom om varandra och har dessutom helt olika infrastrukturer.

Om du behöver en analogi kan du kan se det som att en buss försöker simma eller att en båt försöker flyta fram på en grusväg - Det blir error.

Bild av S. Hermann & F. Richter

För att kunna ringa mellan dessa två nätverk behöver vi en mellanhand som sköter kopplingen; Någon måste alltså springa mellan bussen och båten för att de ska kunna utbyta information med varandra. 46elks är ett exempel på en sådan mellanhand.

Så, hur ska du ringa till en webbläsare? - Låt oss hypotetiskt anta att du har följande:

  1. Ett vanligt telefonnummer.
    Det du använder på daglig basis för att ringa/sms vänner och familj.
  2. Ett virtuell telefonnummer.
    Typ som ett vanlig telefonnummer fast med konfigurationsmöjligheter.
  3. Ett WebRTC-nummer.
    Du kan se det som ett användarnamn likt det du har på skype, zoom, facetime etc.

För att ringa till din webbläsare ringer du först till ditt virtuella nummer. Ditt virtuella nummer är konfigurerat till att försöka kontakta ditt WebRTC-nummer. Din webbläsare är tillsagd att lyssna på all kommunikation som rör WebRTC-numret. När ditt virtuella nummer försöker kontakta WebRTC-numret kommer därmed din webbläsare reagera och säga "inkommande samtal".

Låt oss bryta ner detta steg för steg:

Detta är såklart en förenkling. Det finns många tekniska detaljer som sker bakom kulisserna, vi behöver dock inte bry oss om de i det här avseendet 🤓

Hur ringer jag från en webbläsare till en vanlig telefon?

Att ringa från en webbläsare är ungefär samma sak som när du ringer till en webbläsare. Skillnaden här är att du först måste ringa upp dig själv för att kunna ringa ut.

Vi utgår från samma premisser som i föregående exempel och antar att du har följande:

  1. Ett vanligt telefonnummer.
    Det du använder på daglig basis för att ringa/sms vänner och familj.
  2. Ett virtuell telefonnummer.
    Typ som ett vanlig telefonnummer fast med konfigurationsmöjligheter.
  3. Ett WebRTC-nummer.
    Du kan se det som ett användarnamn likt det du har på skype, zoom, facetime etc.

Låt oss bryta ner processen steg för steg:

I tekniska termer innebär allt detta att du gör ett s.k API-anrop till ditt virtuella nummer. Anropet skulle kunna se ut såhär i python:


import requests

auth = (
'API_USERNAME',
'API_PASSWORD'
)

fields = {
    'from': '<your_virtual_number>',
    'to': '<your_webrtc_number>',
    'voice_start': '{"connect":"<recipient_number>"}'
}

response = requests.post(
"https://api.46elks.com/a1/calls",
data=fields,
auth=auth
)

print(response.text)

I anropet skickar du med en parameter som heter voice_start (notera den markerade kodraden ovan) och där anger du vilket telefonnummer du vill ringa till. Detta är samma sak som det meddelande webbläsaren skrev på lappen och gav till personen på stan.

Detta API-anrop är egentligen det enda som skiljer ett utgående samtal från ett inkommande samtal.

Nudå?

Nu är det dags för dig att testa WebRTC. Det gör du antingen genom att bygga något från grunden eller utgå från befintliga exempel.

Som nämnt i början av inlägget så har jag skrivit två guider för ringa och ta emot samtal med WebRTC med tillhörande kodexempel.

Hör gärna av dig. Jag är nyfiken på att höra vad du hittar på 😁