WebRTC is the framework to permit real-time video and audio communication between browsers using the HTML5 along with JavaScript APIs. W3C is responsible for standardizing the APIs and ETF is responsible for developing important connection protocols. This has not been standardized yet, however, browsers like Firefox and Chrome have already supported vendor implementations. What this means is that for end-users there is nothing to get bothered with flash or plug-ins or making calls. Everything that is needed to make the audio or video calls is already enabled in the WebRTC browser.
There are lots of uses with webRTC and the standard APIs are as follows:
- getUserMedia – this will enable the access to microphone and cameras from the device of the user
- PeerConnection – this is responsible for handling the communications between the users and the WebRTC servers.
- DataChannel – this is an API used for exchanging different types of data among 2 peers like pictures and files.
WebRTC could only bring high quality of peer-to-peer video or audio conversation between the two browsers. However, building video or audio applications to the real-world will need other standards. TokBox will deliver hosted communication, tools and APIs to unlock the possibilities of WebRTC live videos for the business via OpenTok 2.0.
How to Create “Hello World” Using OpenTok in WebRTC
This guide will help you understand the use of “OpenTok on WebRTC JavaScript Library” for connecting to the OpenTok session, to display existing streams and for publishing the video stream into the session. This might not be the usual “hello World” sample but this shows basic application in using the basics of OpenTok function.
How to Test this online?
Make sure to open the page using the Firefox 21+ or Chrome 23+. Presently, these browsers are only supporting OpenTok from WebRTC JavaScript Library.
Connect a webcam to your desktop and make sure you have configured it to run.
A message will show on top of the browser that signifies the web page wanted to use your microphone and camera. When you see this message, click Allow button.
The example will now connect to the sample of OpenTok session, will display your video at the base of the page and get your video published to the existing session. This will also display other streams within the session when there is any.
To prevent an audio feedback during your test session, you need to mute your computer’s speaker.
You will click a link to bring you to a new browser window.
That link will connect to the same session of OpenTok used by your current page.
This new page will then connect to the session and upon connection, the video stream coming from the other page will also be displayed to the page along with the newly published video stream that appears on both pages.
The link can be opened in another computer then wave to the camera greeting “Hello World”.’
Understand the Code
This is a simple way of connecting to the OpenTo session, display video streams to the sessions and publish video stream to the session. But before you can use OpenTok, you need to get keys first. Sign up for a new account in OpenTok, get the API key, the session ID and the token key from the dashboard.
Adding OpenTok JavaScript Library headed to the webpage section will include the following codes:
<script src=http://static.opentok.com/webrtc/v2.2/js/opentok.min.jstype=”text/javascript” charset=”utf-8”></script>This script has included the current OpenTok JavaScript Library.
Connect to OpenTok Session
Initialize the session by calling OT.initSession() method having your session ID that pertains to our OpenTok session.
When initialization is completed, connect to that certain session through calling connect(). This method needs your API key and your token string: API key serves to identify you being the developer and the token string will define you as the user.
Session.connect(APIKey and Token string)
Prior to calling the connect() process if the session, the code will add event listeners to make OpenTok controller send events to JavaScript functionality:
Session.on(‘sessionConnected’, sessionConnectedHandler);
Session.on(‘streamCreated’, streamCreatedHandler);
Code to remember:
sessionConnectedHandler() will publish the video camera to the session.
publish() process of the session will let you publish the webcam’s audio and video stream to another session.
streamCreatedHandler() purpose is to process the stream added to the session after you have initially connected.
subscribeToStream()this function will check the stream not to correspond to the stream you are publishing.
Once the code will call publish() or subscribe(), the app will simply add the video steams into the new DIV in the HTML body.
