WebRTC Quick Start Guide

If you aren’t sure what WebRTC is, and how you can use Voice Elements to build WebRTC applications, you’ll want to read this link for more information.

WebRTC Demos

We’ve created different WebRTC Demos that use Voice Elements, so you can get an idea of the types of applications that you can build.

What do I need to build?

When you use Voice Elements to build a WebRTC application, you’ll need to build a web page and a Voice Elements Application.

Web Page

The web page that you build will contain the interface that your users will interact with. Just like you need to reference the Voice Elements DLL’s when you build a Voice Application, you will need to reference our javascript library. It is located here:
http://webrtc.voiceelements.com/InventiveWebRTC.js.

You can use pure html/javascript or use any server side language of your choice to build this web application.

Below is some sample html /javascript that is a good example of a basic WebRTC application:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Sample WebRTC</title>


</head>
<body>
    <audio id="sourceAudio" autoplay muted="true"></audio>
    <audio id="remoteAudio" autoplay></audio>
    <button id="btnConnect" onclick="btnConnectClick();">
        Connect
    </button>
    
    <script type="text/javascript" src="http://webrtc.voiceelements.com/InventiveWebRTCCloud.js"></script>
</body>
        <script type="text/javascript">
            function btnConnectClick() {
                switch (btnConnect.innerText) {
                    case 'Connect':
                        IVLConnect('ws://192.168.1.130:61052/'); // The address of the VE server you want to connect to
                        break;
                    case 'Disconnect':
                        IVLDisconnect();
                        lblStatus.innerText = "Disconnected";
                        btnConnect.innerText = 'Connect';
                        btnConnect.disabled = false;
                        break;
                }
            }

    </script>
</html>

There are a few key pieces:

1) You need to set the audio tags. The source audio is the audio that will come in from microphone. You need to make sure you use the id sourceAudio.
2) The remote audio is the audio that will be played by your WebRTC application. You need to make sure you use the id remoteAudio.
3) You need to make sure that your reference to the InventiveWebRTC.js goes just before the closing body tag.
4) You also need to make sure that your WebRTC javascript code also goes just before the closing body tag.

Voice Elements Application

Inside of Voice Elements your WebRTC application will work similarly to a typical Voice Application. You need to register certain URL’s that your application will respond to. You will also need to register to the NewCall event. Once you have done both of these things, whenever a WebRTC application makes a web socket connection request Voice Elements will trigger a NewCall event to your application.

RegisterWebRTCUrl

The RegisterWebRTCUrl() function tells Voice Elements which web pages you want your application to respond to. Below is an example of it’s usage. You should put this code in just after connecting to a Voice Elements Server, and just before registering new call events.

s_TelephonyServer.RegisterWebRtcUrl("http://192.168.1.175/softphone.html";

Subscribe to the NewCall event

Just after connecting to the telephony server, you need to tell Voice Elements which method to call when a NewCall is received, you do this by registering the NewCall event:

s_TelephonyServer.NewCall += new VoiceElements.Client.NewCall(s_TelephonyServer_NewCall);

The code in your new call event should look something like this:

            try
            {
                Log.Write("NewCall Arrival! DNIS: {0}  ANI: {1}  Caller ID Name: {2}", e.ChannelResource.Dnis, e.ChannelResource.Ani, e.ChannelResource.CallerIdName);

                // Handle The New Call Here
                // You should actually create a class to handle this call.  See the Sampler application for how to do this.

                // You can subscribe to get the disconnected event.
                e.ChannelResource.Disconnected += new Disconnected(ChannelResource_Disconnected);

                // Check to make sure that it's a WebRTC Channel
                WebRtcChannel WebChannel = e.ChannelResource as WebRtcChannel;
                if (WebChannel != null)
                {
                    WebChannel.Answer();
                    WebChannel.VoiceResource.PlayTTS("Thanks for testing WebRTC");
                }
                else
                {
                    // handle this how you would normally handle a call
                }
            }
            catch (HangupException)
            {
                Log.Write("The Caller Hungup.");
            }
            catch (Exception ex)
            {
                Log.WriteException(ex, "IvrApplication::NewCall");
            }
            finally
            {
                // Unsubscribe the event.
                e.ChannelResource.Disconnected -= new Disconnected(ChannelResource_Disconnected);
                // Hangup
                e.ChannelResource.Disconnect();
                // Always Dispose the object.
                e.ChannelResource.Dispose();

                Log.Write("Call complete.");

            }

There are a few key pieces:
1) We want to see if the incoming channel resource is a WebChannel. So we use the as statement. If it’s not null, that means that it’s a WebRTC call. Otherwise, we know that it’s a regular call.
2) The DNIS property will get populated with the URL of the webpage that is making the connection request.
3) You treat the WebRTC Channel very similarly to a regular Channel Resource. Notice, that the WebChannel comes with it’s own Voice Resource, which we use to play a TTS message.

Next Steps

This walk through shows how to make very basic WebRTC applications. You’ll want to read the WebRTC – Deep Dive for instructions on creating more advanced WebRTC applications. That guide explains how to send JSON messages between your web application and Voice Elements applications to create feature-rich, responsive WebRTC applications.