The source code for this sample can be found here: https://github.com/gomobile/sample-crosswalk-webrtc-video-client or download the Intel(R) XDK to check out all the HTML5 Samples.

Introduction

This article describes the design and implementation of a WebRTC client sample application running on a mobile device or external location outside of the server. The server setup will also be covered later on. The client app demonstrates the use of WebRTC API for achieving real-time communication. The UI layout is designed to focus on the two HTML5 <video> tags used as a medium of communication. WebRTC is currently only supported on Google Chrome*, Mozilla Firefox* and Opera* desktop browsers.  When it comes to mobile platforms, Android* is the only platform that supports the WebRTC MediaStream API calls in Chrome app for Android version 33.0. WebRTC APIs can also be supported in user developed mobile apps packaged with Crosswalk through the Intel® XDK. Crosswalk is a web runtime that provides all the features of a modern browser such as better support for WebRTC, and WebGL combined with deep device integration and an API for adding native extensions.  A detailed description of WebRTC can be found online at webrtc.org and HTML5Rocks. We will also discus issues encountered during development.

The requirements for the WebRTC sample app are:

• Use of the MediaStream API
• Capturing sound and video from the client’s device camera and microphone
• Support for mobile devices as well as desktop browsers

Client-side Implementation

Purpose

The WebRTC Video Conference sample provides users with the opportunity to connect within a “room” through a websocket connection with an online signaling server. The server handles clients’ video streams and connects them together under a single session.

Design Considerations

It all starts with a connection to the server. Each client will need to connect to the server through the server URL and port.

var socket = io.connect("http://ec2-50-17-69-205.compute-1.amazonaws.com:5238");

First of all, this application is demonstrating the functionality of the MediaStream API (aka getUserMedia).  The MediaStream API handles synchronized streams of media which are the audio from the microphone and video from the camera. The UI is simplified into two segments; localVideo and remoteVideo.  As seen above, the localVideo which is in the upper right corner has the <video> tag that hold the video source for the local user.  Remote users’ video streams are displayed in the middle <div> & <video> tag..

                <div id="videos_div">
                    <div id="myvideo_div" class="video_bdr">
                        <video id="localVideo" autoplay></video>
                    </div>
                    <div id="remotevideo_div" class="video_bdr">
                        <video id="remoteVideo" autoplay></video>
                    </div>   
                </div>

Note: The sample application will alert users to add a room name in the js/main.js file in order for the local user and remote user to connect in a common place.

Development/Testing

For testing an active connection to the server, the XDK Emulate tab provides a simulated environment for evaluating the UI and functionality.  The XDK will access your machine’s webcam if available to display and obtain your video stream.

For a more accurate test of functionality and user experience, I recommend using the Debug tab. The Debug tab provides remote on-device debugging of HTML5 code without requiring a build and install step. Remote debugging is provided by the Google Chrome* Developer Tools (CDT), which includes full JavaScript* debugging with breakpoints and profiling; features that are not possible with the weinre* debug tools. For more details on the Debug Tab, go to http://software.intel.com/en-us/html5/xdkdocs#496098.

Building/Deploying for Mobile

Mobile and Custom Build targets

Crosswalk for Android Build target

The XDK provides the ability to build and package HTML5 projects into installable applications for multiple mobile platforms and other custom build targets.  Since this sample requires WebRTC support to be present in the WebView of the  mobile platform, Crosswalk for Android is the best choice for guaranteeing support.  At the heart of the Crosswalk web runtime is the Blink* rendering and layout engine. Blink provides the same HTML5 features and capabilities found in today's modern web ecosystem, such as WebGL*, Web Audio*, and.WebRTC. For more information on Crosswalk, go to http://software.intel.com/en-us/html5/articles/crosswalk-application-runtime.

Within the Crosswalk for Android target contains a list of plugins to enable access to various device specific features and hardware features. These plugins are essential for this sample especially the Camera, Capture, Connection, and Media.

Server-side Implementation

The client and server implementations are based on the Bitbucket codelab webrtc tutorial.