article

Summary

From the release of Android 5.0, WebView based on Chromium M37 release adds support for WebRTC, WebAudio and WebGL. For full features of WebView update, you can go visit the following forum article that we have put up.

New features in the WebView Update https://forums.developer.amazon.com/forums/thread.jspa?threadID=4884&tstart=0

What is WebRTC?

Web Real-Time Communication (WebRTC) is an API definition created by W3C that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need for external plugins. WebRTC has three main parts. - Acquiring audio and video (http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-mediastream) - Communicating audio and video (http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcpeerconnection) - Communicating arbitrary data (http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcdatachannel)

MediaStream API

MediaStream represents synchronized streams of media. It allows access to local multimedia devices, such as microphones or video cameras, and provides control where these multimedia stream data are consumed.

var constraints = {video: true};
function successCallback(stream) {
    var video = document.querySelector("video");
    video.src = windo.URL.createObjectURL(stream);
}navigator.getUserMedia(contraints, successCallback, errorCallback);

You can get full sample code from http://simpl.info/getusermedia/. Using Constraints, you get a general control to the contents (media type, resolution, frame rate, etc) of the MediaStream.

video: {
     mandatory: {
          minWidth: 640,
          minHeight: 360
     },
     optional [{
          minWidth: 1280,
          minHeight: 720
     }]
}

Using combination of MediaStream and WebAudio API, you can get the audio from your microphone or other audio input source to the MediaStream.

(getUserMedia + Web Audio)

navigator.webkitGetUserMedia({audtio:true}, gotStream); // Success callback when requesting audio input stream
function gotStream(stream) {
     var audioContext = new webkitAudioContext(); // Create an AudioNode from the stream
     var mediaStreamSource = audioContext.createMediaStreamSource(stream);
     // Connect it to the destination
     mediaStreamSource.connect(audioContext.destination);
}

For details, go to http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-mediastream.

WebCamToy does a good job of using MediaStream API for their service: http://webcamtoy.com/.

RTCPeerConnection

RTCPeerConnection handles stable and efficient communication of streaming data between peers. Main tasks are signal processing, codec handling, peer to peer communication, security, and bandwidth management.

pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStream;
pc.addStream(localStream);
pc.createOffer(gotOffer);

function gotOffer(desc) {
     pc.setLocalDescription(desc);
     sendOffer(desc);
}

function gotAnswer(desc) {
     pc.setRemoteDescritpion(desc);
}

function gotRemoteStream(e) {
     attachMediaStream(remoteVideo, e.stream);
}

RTCDataChannel

WebRTC supports other types of data to real-time communication. RTCDataChannel API enables peer-to-peer exchange of arbitrary data with low latency and high throughput. Some use cases for this API could be gaming, text chat, file transfer, remote desktop application.

For details: go to http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-rtcdatachannel.

So what do these new features mean to you as an app developer?

You can now create WebApps with real-time communication features with simple Camera/Microphone integration. You will only need to know JavaScript to implement this and there are many resources online.

Getting Started with WebRTC - http://www.html5rocks.com/en/tutorials/webrtc/basics/

WebRTC Code and API - http://www.webrtc.org/reference

WebRTC Samples: https://webrtc.github.io/samples/

Real-time communication with WebRTC; Google I/O 2013(VIDEO) - https://www.youtube.com/watch?v=p2HzZkd2A40

Keywords: Lollipop, WebRTC, WebAudio, WebGL, WebView, MediaStream, RTCPeerConnection, RTCDataChannel, WebApps

[KB_0103]