Quickstart WebRTC Tutorial by Telnyx

WebRTC is an incredibly powerful technology that allows you to add real-time communication capabilities to your application. Available on all modern browsers, this Telnyx WebRTC tutorial and quickstart guide will have you building your own WebRTC app in no time.

WebRTC Tutorial: How to Build Your First App

In this guide, you’ll learn how to get started with Telnyx WebRTC using the Telnyx Portal and API. Just follow these steps:

1. 1Sign up for a Telnyx Account.
2. 2Create a Credential Connection to configure how you connect your calls.
3. 3Create an Outbound Voice Profile to configure your outbound call settings and assign it to your Credential Connection.
4. 4Grab your API key
5. 5Create a new on-demand credential and generate a token
6. 6Authenticate to the Telnyx WebRTC platform and place a call

Sign Up for a Telnyx Mission Control Portal Account

Head to telnyx.com/sign-up to sign up for your free Telnyx account. It’ll give you access to our Mission Control Portal where you can buy phone numbers, set up and manage Call Control Applications, and more.

Create a Credential Connection for your Calls

A Credential Connection groups configuration for your calls, such as which codecs to use (tip: enable VP8 codec for video).

1. 1Navigate to the SIP Connections page of the Mission Control Portal.
2. 2Click the "+ Add SIP Connection" button near the top right corner of the page.
3. 3Enter the name you wish to have for your SIP Connection.
4. 4Select "Credentials" as the "Connection Type".
5. 5A username and password will automatically be generated. You can ignore it for now.
6. 6Click "Set Credentials".
7. 7Click "Done".

   Note - Credential Connections by default have the VP8 codec disabled. Edit the connection "Inbound" settings to enable it.

Create an Outbound Voice Profile

To be able to place calls, you must first create an Outbound Voice Profile and assign your Credential Connection to it.

Select "Outbound Voice Profiles" on the left-hand navigation menu, click "+Add New Profile" and set up your profile name. Add the Credential Connection you just created above and select your traffic type.

You can also do this programmatically via our RESTful API. Check out our documentation for Outbound Voice Profiles.

Grab your API Key

If you already have a Telnyx V2 API Authentication key, skip to Step 3.

1. 1In the Telnyx Mission Control Portal, in the left menu bar navigate to "Auth".
2. 2Ensure, API V2 is selected in the horizontal menu bar.
3. 3Click "Create API key"
4. 4Copy the API key and save it somewhere safe.

Create On-demand Credential

Create the Credential

curl -X POST \
  --header "Content-Type: application/json" \
  --header "Authorization: Bearer YOUR_API_KEY" \
  --data '{
    "connection_id": "<your connection ID>"
  }' \
  https://api.telnyx.com/v2/telephony_credentials

Copy Code

Example Response

{
  "data": {
    "id": "68f28076-119e-440d-bb69-9a8d359857c2",
    "name": "2020-08-05 13:42:22.991499Z",
    "record_type": "credential",
    "resource_id": "connection:1431843891430033126",
    "sip_password": "570067b6e4d7495db417e150a81380d9",
    "sip_username": "gencredbcXbCt2uEOaD6e2VN2Bs3b2HDlQVW2v3CJFTQ6Xes9",
    "created_at": "2020-08-05T13:42:22.992Z",
    "expires_at": null,
    "updated_at": "2020-08-05T13:42:22.992Z",
    "user_id": "14c31d6d-aa05-4598-bef8-5acd2197f0c1"
  }
}

Copy Code

Notes:

• By default, on-demand credentials will not expire.
• The randomly generated sip_username will be used to receive SIP using <sip_username>@sip.telnyx.com as destination

Generate a token

curl -X POST \
  --header "Content-Type: application/json" \
  --header "Authorization: Bearer YOUR_API_KEY" \
  --data '{}' \
  https://api.telnyx.com/v2/telephony_credentials/<credential_id>/token

Copy Code

Example Response

eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJ0ZWxueXhfdGVsZXBob255IiwiZXhwIjoxNTk2NzIxMzg1LCJpYXQiOjE1OTY2MzQ5ODUsImlzcyI6InRlbG55eF90ZWxlcGhvbnkiLCJqdGkiOiJkYmNkZTkzNi04NjdmLTRjMzctYWI1ZS00MGYzY2Q3ODJjZGEiLCJuYmYiOjE1OTY2MzQ5ODQsInN1YiI6IjY4ZjI4MDc2LTExOWUtNDQwZC1iYjY5LTlhOGQzNTk4NTdjMiIsInRlbF90b2tlbiI6IlN4N0tPQU9DblcxUGxIcXVxSEdMT29mTVRiRHJtM1pJM3Bnb1dXX0hkNHNMbmVQUHZXZXh2WXpVQWFLY2pxQ0d2amhfbTQ0S3MwMXFpaEpOMXVMOG95d2Rxdm13ZUExTzZjRlR2UF9jT0J3Skp3bjdZYmJYV3diYW9RR3VabzFNazJIS2dVYjlxQndTVDJxSUZ6dzkwa29CIiwidHlwIjoiYWNjZXNzIn0.ogJujxfbCktNxZ5eeyslLzZylswNqZW4OwLKrkehlb6w-tpbgJ-Ywfgy4Eirmi_BaZ_ThPlgTua0G1jafqFGRw

Copy Code

Note:

• The response body is a JWT (JSON Web Token) that expires in 24h
• The token is associated with the Credential, and is rendered invalid if the credential expires or is deleted

Authenticate to WebRTC and place a call

Using Telnyx WebRTC test application

The Telnyx WebRTC test application is built using our Javascript WebRTC SDK, to showcase our WebRTC platform and make it easier to test your setup.

With the token generated above, you can register to WebRTC servers, providing a Caller ID Name and Caller ID Number and Client State.

Client State Tips:

• If you're wanting to integrate client calls into a third party application, webhooks can be enabled via SIP Connections > Basic Options > Events > Webhook URL
• The client_state field can then be scraped and processed by any backend application where webhooks are configured to POST to.
• In the sample application, it will need to be base64 encoded.

When clicking on Connect, a log message will be shown indicating the client has been registered. After this, you can place a test call to any number available in your Outbound Profile settings, or to a SIP destination.

Tips:

• If you create two different Credentials, you can open two browser instances and call one from the other
• If VP8 codec is enabled for both calling and called party a video call can be established

Follow-ups

Check out Telnyx WebRTC SDKs, available for both Javascript and React-Native:

• https://www.npmjs.com/package/@telnyx/webrtc
• https://www.npmjs.com/package/@telnyx/react-native