From 01f1a4acb2a114bf82d5927d8d3c6a675a893944 Mon Sep 17 00:00:00 2001 From: "kjellander@chromium.org" Date: Mon, 12 Nov 2012 10:10:12 +0000 Subject: [PATCH] Constraints test page, CSS styles and div-based layout. A new page that makes it possible to test MediaStreamConstraints. The PeerConnection manual test page is modified to automatically resize the video to the receieved stream width and height when frames are received (only works on M24+). CSS styling makes the page look better. div-based layout gets rid of all the table/tr/td tags. BUG=none TEST=successful execution of the PyAuto tests on Mac (couldn't test all successful on Linux due to bugs in video detection on Precise). Manual testing using constraints.html and peerconnection.html. NOTRY=True Review URL: https://chromiumcodereview.appspot.com/11293171 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@167152 0039d316-1c4b-4281-b951-d872f2087c98 --- chrome/test/data/webrtc/getusermedia.js | 81 +++--- chrome/test/data/webrtc/jsep01_call.js | 62 +++-- chrome/test/data/webrtc/manual/constraints.html | 62 +++++ chrome/test/data/webrtc/manual/constraints.js | 150 +++++++++++ .../data/webrtc/manual/peerconnection-help.html | 84 +++++++ chrome/test/data/webrtc/manual/peerconnection.html | 275 +++++++-------------- chrome/test/data/webrtc/manual/peerconnection.js | 126 +++++++--- chrome/test/data/webrtc/manual/stylesheet.css | 75 ++++++ chrome/test/data/webrtc/message_handling.js | 4 +- chrome/test/functional/media_stream_infobar.py | 4 +- chrome/test/functional/webrtc_brutality_test.py | 2 +- chrome/test/functional/webrtc_test_base.py | 4 +- 12 files changed, 658 insertions(+), 271 deletions(-) create mode 100644 chrome/test/data/webrtc/manual/constraints.html create mode 100644 chrome/test/data/webrtc/manual/constraints.js create mode 100644 chrome/test/data/webrtc/manual/peerconnection-help.html rewrite chrome/test/data/webrtc/manual/peerconnection.html (93%) create mode 100644 chrome/test/data/webrtc/manual/stylesheet.css diff --git a/chrome/test/data/webrtc/getusermedia.js b/chrome/test/data/webrtc/getusermedia.js index 067496d40171..2d99fadaa73a 100644 --- a/chrome/test/data/webrtc/getusermedia.js +++ b/chrome/test/data/webrtc/getusermedia.js @@ -16,17 +16,17 @@ var gLocalStream = null; /** - * String which keeps track of what happened when we requested user media. + * The MediaConstraints to use when connecting the local stream with a peer + * connection. * @private */ -var gRequestWebcamAndMicrophoneResult = 'not-called-yet'; +var gAddStreamConstraints = {}; /** - * The media hints to use when connecting the local stream with a peer - * connection. + * String which keeps track of what happened when we requested user media. * @private */ -var gMediaHints = {}; +var gRequestWebcamAndMicrophoneResult = 'not-called-yet'; /** * This function asks permission to use the webcam and mic from the browser. It @@ -35,24 +35,23 @@ var gMediaHints = {}; * appears in Chrome, which will run either the OK or failed callback as a * a result. To see which callback was called, use obtainGetUserMediaResult(). * - * @param requestVideo, requestAudio: whether to request video/audio. - * @param mediaHints The media hints to use when we add streams to a peer - * connection later. The contents of this parameter depends on the WebRTC - * version. This should be javascript code that we eval(). + * @param{string} constraints Defines what to be requested, with mandatory + * and optional constraints defined. The contents of this parameter depends + * on the WebRTC version. This should be JavaScript code that we eval(). */ -function getUserMedia(requestVideo, requestAudio, mediaHints) { +function getUserMedia(constraints) { if (!navigator.webkitGetUserMedia) { returnToTest('Browser does not support WebRTC.'); return; } try { - eval('gMediaHints = ' + mediaHints); + var evaluatedConstraints; + eval('evaluatedConstraints = ' + constraints); } catch (exception) { - failTest('Not valid javascript expression: ' + mediaHints); + failTest('Not valid JavaScript expression: ' + constraints); } - - debug('Requesting: video ' + requestVideo + ', audio ' + requestAudio); - navigator.webkitGetUserMedia({video: requestVideo, audio: requestAudio}, + debug('Requesting getUserMedia: constraints: ' + constraints); + navigator.webkitGetUserMedia(evaluatedConstraints, getUserMediaOkCallback_, getUserMediaFailedCallback_); returnToTest('ok-requested'); @@ -83,21 +82,15 @@ function stopLocalStream() { // Functions callable from other JavaScript modules. /** - * Returns the media hints as passed into getUserMedia. - */ -function getCurrentMediaHints() { - return gMediaHints; -} - -/** * Adds the current local media stream to a peer connection. + * @param{RTCPeerConnection} peerConnection */ function addLocalStreamToPeerConnection(peerConnection) { if (gLocalStream == null) failTest('Tried to add local stream to peer connection,' + ' but there is no stream yet.'); try { - peerConnection.addStream(gLocalStream, gMediaHints); + peerConnection.addStream(gLocalStream, gAddStreamConstraints); } catch (exception) { failTest('Failed to add stream with hints ' + gMediaHints + ': ' + exception); @@ -107,7 +100,7 @@ function addLocalStreamToPeerConnection(peerConnection) { /** * Removes the local stream from the peer connection. - * @param peerConnection + * @param{RTCPeerConnection} peerConnection */ function removeLocalStreamFromPeerConnection(peerConnection) { if (gLocalStream == null) @@ -123,16 +116,46 @@ function removeLocalStreamFromPeerConnection(peerConnection) { // Internals. -/** @private */ +/** + * @private + * @param {MediaStream} stream Media stream. + */ function getUserMediaOkCallback_(stream) { gLocalStream = stream; - var streamUrl = webkitURL.createObjectURL(stream); - document.getElementById('local-view').src = streamUrl; + var videoTag = $('local-view'); + videoTag.src = webkitURL.createObjectURL(stream); + // Due to crbug.com/110938 the size is 0 when onloadedmetadata fires. + // videoTag.onloadedmetadata = updateVideoTagSize_('local-view'); + // Use setTimeout as a workaround for now. + setTimeout(function() {updateVideoTagSize_('local-view')}, 500); gRequestWebcamAndMicrophoneResult = 'ok-got-stream'; } -/** @private */ +/** + * @private + * @param {string} videoTagId The ID of the video tag to update. + */ +function updateVideoTagSize_(videoTagId) { + var videoTag = $(videoTagId); + // Don't update if sizes are 0 (happens for Chrome M23). + if (videoTag.videoWidth > 0 && videoTag.videoHeight > 0) { + debug('Set video tag "' + videoTagId + '" width and height to ' + + videoTag.videoWidth + 'x' + videoTag.videoHeight); + videoTag.width = videoTag.videoWidth; + videoTag.height = videoTag.videoHeight; + } +} + +/** + * @private + * @param {NavigatorUserMediaError} error Error containing details. + */ function getUserMediaFailedCallback_(error) { + debug('GetUserMedia FAILED: Maybe the camera is in use by another process?'); gRequestWebcamAndMicrophoneResult = 'failed-with-error-' + error.code; -} \ No newline at end of file +} + +$ = function(id) { + return document.getElementById(id); +}; diff --git a/chrome/test/data/webrtc/jsep01_call.js b/chrome/test/data/webrtc/jsep01_call.js index e68cde864054..2736a8c8eb0c 100644 --- a/chrome/test/data/webrtc/jsep01_call.js +++ b/chrome/test/data/webrtc/jsep01_call.js @@ -4,22 +4,49 @@ * found in the LICENSE file. */ -/** - * @private - */ +/** @private */ var gTransformOutgoingSdp = function(sdp) { return sdp; } +/** @private */ +var gCreateAnswerConstraints = {}; + +/** @private */ +var gCreateOfferConstraints = { + mandatory: { + OfferToReceiveVideo: true, + OfferToReceiveAudio: true, + } +}; + /** * Sets the transform to apply just before setting the local description and * sending to the peer. - * - * @param transformFunction A function which takes one SDP string as argument - * and returns the modified SDP string. + * @param{function} transformFunction A function which takes one SDP string as + * argument and returns the modified SDP string. */ function setOutgoingSdpTransform(transformFunction) { gTransformOutgoingSdp = transformFunction; } +/** + * Sets the MediaConstraints to be used for PeerConnection createAnswer() calls. + * @param{string} mediaConstraints The constraints, as defined in the + * PeerConnection JS API spec. + */ +function setCreateAnswerConstraints(mediaConstraints) { + gCreateAnswerConstraints = mediaConstraints; +} + +/** + * Sets the MediaConstraints to be used for PeerConnection createOffer() calls. + * @param{string} mediaConstraints The constraints, as defined in the + * PeerConnection JS API spec. + */ +function setCreateOfferConstraints(mediaConstraints) { + gCreateOfferConstraints = mediaConstraints; +} + + // Public interface towards the other javascript files, such as // message_handling.js. The contract for these functions is described in // message_handling.js. @@ -33,10 +60,12 @@ function handleMessage(peerConnection, message) { function() { success_('setRemoteDescription'); }, function() { failure_('setRemoteDescription'); }); if (session_description.type == "offer") { + debug('createAnswer with constraints: ' + + JSON.stringify(gCreateAnswerConstraints, null, ' ')); peerConnection.createAnswer( setLocalAndSendMessage_, function() { failure_('createAnswer'); }, - getCurrentMediaHints()); + gCreateAnswerConstraints); } return; } else if (parsed_msg.candidate) { @@ -71,18 +100,16 @@ function createPeerConnection(stun_server) { } function setupCall(peerConnection) { + debug('createOffer with constraints: ' + + JSON.stringify(gCreateOfferConstraints, null, ' ')); peerConnection.createOffer( setLocalAndSendMessage_, function () { success_('createOffer'); }, - { 'mandatory': { - 'OfferToReceiveVideo': 'true', - 'OfferToReceiveAudio': 'true', - } - }); + gCreateOfferConstraints); } function answerCall(peerConnection, message) { - handleMessage(peerConnection,message); + handleMessage(peerConnection, message); } // Internals. @@ -116,8 +143,13 @@ function setLocalAndSendMessage_(session_description) { /** @private */ function addStreamCallback_(event) { debug('Receiving remote stream...'); - var streamUrl = webkitURL.createObjectURL(event.stream); - document.getElementById('remote-view').src = streamUrl; + var videoTag = document.getElementById('remote-view'); + videoTag.src = webkitURL.createObjectURL(event.stream); + + // Due to crbug.com/110938 the size is 0 when onloadedmetadata fires. + // videoTag.onloadedmetadata = updateVideoTagSize_('remote-view'); + // Use setTimeout as a workaround for now. + setTimeout(function() {updateVideoTagSize_('remote-view')}, 500); // This means the call has been set up. // This only mean that we have received a valid SDP message with an offer or diff --git a/chrome/test/data/webrtc/manual/constraints.html b/chrome/test/data/webrtc/manual/constraints.html new file mode 100644 index 000000000000..bfd308afac6c --- /dev/null +++ b/chrome/test/data/webrtc/manual/constraints.html @@ -0,0 +1,62 @@ + + + + WebRTC GetUserMedia Constraints Manual Test + + + + + + +
+
+

This page can create GetUserMedia + MediaStreamConstraints that can be used on the
+ PeerConnection Manual Test page.

+ MediaStreamConstraints:
+ +
+ + Audio + Video + +

Video constraints

+ Only applicable if the video checkbox is checked above. +

Mandatory

+ Min + x + + FPS: + Aspect ratio:
+ Max + x + + FPS: + Aspect ratio: + +

Optional

+ Min + x + + FPS: + Aspect ratio:
+ Max + x + + FPS: + Aspect ratio:
+ +

Messages

+ 

+  

+  

+    
Local Preview

+    
+  

+

+
+
diff --git a/chrome/test/data/webrtc/manual/constraints.js b/chrome/test/data/webrtc/manual/constraints.js
new file mode 100644
index 000000000000..f671b6bdf8fc
--- /dev/null
+++ b/chrome/test/data/webrtc/manual/constraints.js
@@ -0,0 +1,150 @@
+/**
+ * Copyright (c) 2012 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/**
+ * See http://dev.w3.org/2011/webrtc/editor/getusermedia.html for more
+ * information on getUserMedia.
+ */
+
+/**
+ * Asks permission to use the webcam and mic from the browser.
+ */
+function getUserMedia() {
+  var constraints = getConstraints_();
+  var constraintsString = JSON.stringify(constraints, null, ' ');
+  $('getusermedia-constraints').innerHTML = constraintsString;
+  if (!navigator.webkitGetUserMedia) {
+    log_('Browser does not support WebRTC.');
+    return;
+  }
+  log_('Requesting getUserMedia with constraints: ' + constraintsString);
+  navigator.webkitGetUserMedia(constraints,
+                               getUserMediaOkCallback_,
+                               getUserMediaFailedCallback_);
+}
+
+// Internals
+
+/**
+ * Builds a Javascript constraints dictionary out of the selected options in the
+ * HTML controls on the page.
+ * @private
+ * @return {Object} A dictionary of constraints.
+ */
+function getConstraints_() {
+  var c = {};
+  c.audio = $('audio').checked;
+  if (!$('video').checked) {
+    c.video = false;
+  } else {
+    c.video = { mandatory: {}, optional: [] };
+    // Mandatory - min
+    if ($('mandatory-min-width').value != '') {
+      c.video.mandatory.minWidth = $('mandatory-min-width').value;
+    }
+    if ($('mandatory-min-height').value != '') {
+      c.video.mandatory.minHeight = $('mandatory-min-height').value;
+    }
+    if ($('mandatory-min-fps').value != '') {
+      c.video.mandatory.minFrameRate = $('mandatory-min-fps').value;
+    }
+    if ($('mandatory-min-ar').value != '') {
+      c.video.mandatory.minAspectRatio = $('mandatory-min-ar').value;
+    }
+    // Mandatory - max
+    if ($('mandatory-max-width').value != '') {
+      c.video.mandatory.maxWidth = $('mandatory-max-width').value;
+    }
+    if ($('mandatory-max-height').value != '') {
+      c.video.mandatory.maxHeight = $('mandatory-max-height').value;
+    }
+    if ($('mandatory-max-fps').value != '') {
+      c.video.mandatory.maxFrameRate = $('mandatory-max-fps').value;
+    }
+    if ($('mandatory-max-ar').value != '') {
+      c.video.mandatory.maxAspectRatio = $('mandatory-max-ar').value;
+    }
+    // Optional - min
+    if ($('optional-min-width').value != '') {
+      c.video.optional.push({ minWidth: $('optional-min-width').value });
+    }
+    if ($('optional-min-height').value != '') {
+      c.video.optional.push({ minHeight: $('optional-min-height').value });
+    }
+    if ($('optional-min-fps').value != '') {
+      c.video.optional.push({ minFrameRate: $('optional-min-fps').value });
+    }
+    if ($('optional-min-ar').value != '') {
+      c.video.optional.push({ minAspectRatio: $('optional-min-ar').value });
+    }
+    // Optional - max
+    if ($('optional-max-width').value != '') {
+      c.video.optional.push({ maxWidth: $('optional-max-width').value });
+    }
+    if ($('optional-max-height').value != '') {
+      c.video.optional.push({ maxHeight: $('optional-max-height').value });
+    }
+    if ($('optional-max-fps').value != '') {
+      c.video.optional.push({ maxFrameRate: $('optional-max-fps').value });
+    }
+    if ($('optional-max-ar').value != '') {
+      c.video.optional.push({ maxAspectRatio: $('optional-max-ar').value });
+    }
+  }
+  return c;
+}
+
+/**
+ * @private
+ * @param {MediaStream} stream Media stream.
+ */
+function getUserMediaOkCallback_(stream) {
+  gLocalStream = stream;
+  var videoTag = $('local-view');
+  videoTag.src = webkitURL.createObjectURL(stream);
+
+  // Due to crbug.com/110938 the size is 0 when onloadedmetadata fires.
+  // videoTag.onloadedmetadata = updateVideoTagSize_(videoTag);
+  // Use setTimeout as a workaround for now.
+  setTimeout(function() {updateVideoTagSize_(videoTag)}, 500);
+  gRequestWebcamAndMicrophoneResult = 'ok-got-stream';
+}
+
+/**
+ * @private
+ * @param {Object} videoTag The video tag to update.
+ */
+function updateVideoTagSize_(videoTag) {
+  // Don't update if sizes are 0 (happens for Chrome M23).
+  if (videoTag.videoWidth > 0 && videoTag.videoHeight > 0) {
+    log_('Set video tag width and height: ' + videoTag.videoWidth + 'x' +
+      videoTag.videoHeight);
+    videoTag.width = videoTag.videoWidth;
+    videoTag.height = videoTag.videoHeight;
+  }
+}
+
+/**
+ * @private
+ * @param {NavigatorUserMediaError} error Error containing details.
+ */
+function getUserMediaFailedCallback_(error) {
+  log_('Failed with error: ' + error);
+}
+
+$ = function(id) {
+  return document.getElementById(id);
+};
+
+/**
+ * Simple logging function.
+ * @private
+ * @param {string} message Message to print.
+ */
+function log_(message) {
+  console.log(message);
+  $('messages').innerHTML += message + '
';
+}
diff --git a/chrome/test/data/webrtc/manual/peerconnection-help.html b/chrome/test/data/webrtc/manual/peerconnection-help.html
new file mode 100644
index 000000000000..7f1c63fe131d
--- /dev/null
+++ b/chrome/test/data/webrtc/manual/peerconnection-help.html
@@ -0,0 +1,84 @@
+
+
+
+  WebRTC PeerConnection Manual Test Help Page
+  
+  
+
+
+
+
WebRTC PeerConnection Manual Test Help Page

+

+  The test page is intended for testing WebRTC calls.
+
+  This is how you set up a normal call:
+

+
    
+  
  1. Open this page in two tabs.
    2. 
+  
  2. Start the peerconnection server. Click on the question mark next
+    to the 'server' field for instruction on how to do that. The easiest
+    thing is to start it on localhost, but you can start it on any
+    machine you like and connect to hostname:8888.
    3. 
+  
  3. Click the Connect button in both tabs.
    4. 
+  
  4. Click the Call button in one of the tabs. You should see a bunch
+    of printouts when this happens. Note that no streams are sent to
+    begin with.
    5. 
+  
  5. Grant media access using the checkboxes and Request button.
    6. 
+  
  6. Send the local stream by clicking the "Send" button, in both tabs.
+    
    7. 
+  
  7. You should now have a call up and both sides should be receiving
+    media data (depending on what access you granted on the respective
+    pages).
    8. 
+  
  8. You can now choose to stop, re-request, re-send or disable streams
+    in any way you like, or hang up and re-start the call. You don't
+    need to disconnect: that's done automatically when you close the
+    page. Hanging up is NOT done automatically though.
    9. 
+

+
Detailed descriptions:

+
+
+
+
diff --git a/chrome/test/data/webrtc/manual/peerconnection.html b/chrome/test/data/webrtc/manual/peerconnection.html
dissimilarity index 93%
index 8846f5725780..e23b7c974466 100644
--- a/chrome/test/data/webrtc/manual/peerconnection.html
+++ b/chrome/test/data/webrtc/manual/peerconnection.html
@@ -1,186 +1,89 @@
-
-
-
-  WebRTC PeerConnection Manual Test
-  
-  
-  
-  
-  
-  
-
-
-  
-    
-      
-    
-    
-      
-    
-    
-      
-      
-    
-    
-      
-      
-      
-    
-  

-        Media hints: 
-      

-        Audio
-        Video
-        
-      
Local Preview
Remote Video

-  
-    
-      
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-      
-    
-  
Server [?]:
-        
-      
PeerConnection:
-        
-        
-      
Local Stream:
-        
-        
-        
-        
-        
-      
Remote Stream:
-        
-        
-      
Options
-        
-            Force Opus in Outgoing SDP
-      

-
-  
-    -      -      -    
-    
-      
-      
-    
-    
-      
-      
-    
-    
-      
-    
-    
-      
-    
-  





-        
Messages

-        
-      
Debug

-
-
-
+
+
+
+  WebRTC PeerConnection Manual Test
+  
+  
+  
+  
+  
+  
+  
+
+
+
+

+  

+    GetUserMedia MediaStreamConstraints:
+    
+    Audio
+    Video
+    
+    Use constraints.html to create more
+    advanced constraints (then paste them into the box to the left).
+  

+  How does this page work?
+      
+  

+
+    

+      
Local Preview

+      

+
+      Server [?]:
+      
+      Peer ID: 
+      

+      PeerConnection createOffer MediaConstraints:
+          

+      
+      

+      PeerConnection createAnswer
+          MediaConstraints:

+      
+      

+      Call:
+      
+      

+      Local Stream:
+      
+      
+      
+      
+      
+      

+      Remote Stream:
+      
+      

+      Options:
+      
+          Force Opus in Outgoing SDP

+      
+      
Messages

+      

+    

+    

+      
Remote Video

+      

+
+      
Debug

+      

+    

+  

+

+
+
+
diff --git a/chrome/test/data/webrtc/manual/peerconnection.js b/chrome/test/data/webrtc/manual/peerconnection.js
index b74b28ffe9c4..8c49d397959c 100644
--- a/chrome/test/data/webrtc/manual/peerconnection.js
+++ b/chrome/test/data/webrtc/manual/peerconnection.js
@@ -5,29 +5,34 @@
  */
 
 // The *Here functions are called from peerconnection.html and will make calls
-// into our underlying javascript library with the values from the page.
+// into our underlying JavaScript library with the values from the page
+// (have to be named differently to avoid name clashes with existing functions).
 
 function getUserMediaFromHere() {
-  var audio = document.getElementById('audio').checked;
-  var video = document.getElementById('video').checked;
-  var hints = document.getElementById('media-hints').value;
-
+  var constraints = $('getusermedia-constraints').value;
   try {
-    getUserMedia(video, audio, hints);
+    getUserMedia(constraints);
   } catch (exception) {
     print_('getUserMedia says: ' + exception);
   }
 }
 
 function connectFromHere() {
-  var server = document.getElementById('server').value;
-  // Generate a random name to distinguish us from other tabs:
-  var name = 'peer_' + Math.floor(Math.random() * 10000);
-  debug('Our name from now on will be ' + name);
-  connect(server, name);
+  var server = $('server').value;
+  if ($('peer-id').value == '') {
+    // Generate a random name to distinguish us from other tabs:
+    $('peer-id').value = 'peer_' + Math.floor(Math.random() * 10000);
+    debug('Our name from now on will be ' + $('peer-id').value);
+  }
+  connect(server, $('peer-id').value);
 }
 
 function callFromHere() {
+  // Set the global variables used in jsep01_call.js with values from our UI.
+  setCreateOfferConstraints(getEvaluatedJavaScript_(
+      $('pc-createoffer-constraints').value));
+  setCreateAnswerConstraints(getEvaluatedJavaScript_(
+      $('pc-createanswer-constraints').value));
   call();
 }
 
@@ -73,7 +78,7 @@ function stopLocalFromHere() {
 }
 
 function forceOpusChanged() {
-  var forceOpus = document.getElementById('force-opus').checked;
+  var forceOpus = $('force-opus').checked;
   if (forceOpus) {
     forceOpus_();
   } else {
@@ -81,16 +86,30 @@ function forceOpusChanged() {
   }
 }
 
+/**
+ * Updates the constraints in the getusermedia-constraints text box with a
+ * MediaStreamConstraints string. This string is created based on the status of
+ * the checkboxes for audio and video.
+ */
+function updateGetUserMediaConstraints() {
+  var constraints = {
+     audio: $('audio').checked,
+     video: $('video').checked
+  };
+  $('getusermedia-constraints').value =
+      JSON.stringify(constraints, null, ' ');
+}
+
 function showServerHelp() {
-  alert('You need to build and run a peerconnection_server on some '
-    + 'suitable machine. To build it in chrome, just run make/ninja '
-    + 'peerconnection_server. Otherwise, read in https://code.google'
-    + '.com/searchframe#xSWYf0NTG_Q/trunk/peerconnection/README&q=REA'
-    + 'DME%20package:webrtc%5C.googlecode%5C.com.');
+  alert('You need to build and run a peerconnection_server on some ' +
+        'suitable machine. To build it in chrome, just run make/ninja ' +
+        'peerconnection_server. Otherwise, read in https://code.google' +
+        '.com/searchframe#xSWYf0NTG_Q/trunk/peerconnection/README&q=REA' +
+        'DME%20package:webrtc%5C.googlecode%5C.com.');
 }
 
 function toggleHelp() {
-  var help = document.getElementById('help');
+  var help = $('help');
   if (help.style.display == 'none')
     help.style.display = 'inline';
   else
@@ -98,45 +117,80 @@ function toggleHelp() {
 }
 
 function clearLog() {
-  document.getElementById('messages').innerHTML = '';
-  document.getElementById('debug').innerHTML = '';
+  $('messages').innerHTML = '';
+  $('debug').innerHTML = '';
 }
 
+/**
+ * Prepopulate constraints from JS to the UI and setup callbacks in the scripts
+ * shared with PyAuto tests.
+ */
 window.onload = function() {
+  $('pc-createoffer-constraints').value = JSON.stringify(
+      gCreateOfferConstraints, null, ' ');
+  $('pc-createanswer-constraints').value = JSON.stringify(
+    gCreateAnswerConstraints, null, ' ');
   replaceReturnCallback(print_);
   replaceDebugCallback(debug_);
+  updateGetUserMediaConstraints();
   doNotAutoAddLocalStreamWhenCalled();
-}
+};
 
+/**
+ * Disconnect before the tab is closed.
+ */
 window.onunload = function() {
   if (!isDisconnected())
     disconnect();
-}
+};
 
 // Internals.
 
-/** @private */
-function disabled_(element) {
-  return document.getElementById(element).disabled;
-}
-
-/** @private */
+/**
+ * @private
+ * @param {string} message Text to print.
+ */
 function print_(message) {
   // Filter out uninteresting noise.
   if (message == 'ok-no-errors')
     return;
 
   console.log(message);
-  document.getElementById('messages').innerHTML += message + '
';
+  $('messages').innerHTML += message + '
';
 }
 
-/** @private */
+/**
+ * @private
+ * @param {string} message Text to print.
+ */
 function debug_(message) {
   console.log(message);
-  document.getElementById('debug').innerHTML += message + '
';
+  $('debug').innerHTML += message + '
';
 }
 
-/** @private */
+/**
+ * @private
+ * @param {string} stringRepresentation JavaScript as a string.
+ * @return {Object} The PeerConnection constraints as a JavaScript dictionary.
+ */
+function getEvaluatedJavaScript_(stringRepresentation) {
+  try {
+    var evaluatedJavaScript;
+    eval('evaluatedJavaScript = ' + stringRepresentation);
+  } catch (exception) {
+    failTest('Not valid JavaScript expression: ' + stringRepresentation);
+  }
+  return evaluatedJavaScript;
+}
+
+/**
+ * Swaps lines within a SDP message.
+ * @private
+ * @param {string} sdp The full SDP message.
+ * @param {string} line The line to swap with swapWith.
+ * @param {string} swapWith The other line.
+ * @return {string} The altered SDP message.
+ */
 function swapSdpLines_(sdp, line, swapWith) {
   var lines = sdp.split('\r\n');
   var lineStart = lines.indexOf(line);
@@ -161,8 +215,8 @@ function preferOpus_() {
     // TODO(phoglund): We need to swap the a= lines too. I don't think this
     // should be needed but it apparently is right now.
     return swapSdpLines_(sdp,
-                         "a=rtpmap:103 ISAC/16000",
-                         "a=rtpmap:111 opus/48000");
+                         'a=rtpmap:103 ISAC/16000',
+                         'a=rtpmap:111 opus/48000');
   });
 }
 
@@ -181,3 +235,7 @@ function forceOpus_() {
 function dontTouchSdp_() {
   setOutgoingSdpTransform(function(sdp) { return sdp; });
 }
+
+$ = function(id) {
+  return document.getElementById(id);
+};
diff --git a/chrome/test/data/webrtc/manual/stylesheet.css b/chrome/test/data/webrtc/manual/stylesheet.css
new file mode 100644
index 000000000000..6c557fa83dbc
--- /dev/null
+++ b/chrome/test/data/webrtc/manual/stylesheet.css
@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2012 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+body, td {
+  font-family: Helvetica Narrow, sans-serif;
+  font-size: 11px;
+}
+
+h1, h2, h3 {
+  margin: 6px 0px 3px 0px;
+}
+
+a {
+  text-decoration:none;
+}
+
+pre {
+  background-color: #e2e2e2;
+  margin-right: 20px;
+}
+
+a:hover {
+ text-decoration:underline;
+}
+
+textarea {
+  font-size: 11px;
+  font-family: monospace, Courier;
+  border: 1px solid #ccc;
+}
+
+button {
+  font-size: 11px;
+  margin-left: 0px;
+}
+
+input[type=text] {
+  border:1px solid #ccc;
+}
+
+input[type=checkbox] {
+  position: relative;
+  top: 2px;
+}
+
+video {
+  border:1px solid #ccc;
+}
+
+#wrapper {
+  margin:0px auto;
+  padding:5px;
+}
+
+#container {
+  overflow: hidden;
+  width: 100%;
+}
+
+#left {
+  float: left;
+}
+
+#left-half {
+  float: left;
+  width: 50%;
+}
+
+#right-half {
+  width: 50%;
+  margin-left: 50%;
+}
diff --git a/chrome/test/data/webrtc/message_handling.js b/chrome/test/data/webrtc/message_handling.js
index 2abdc91e351d..0728086d600c 100644
--- a/chrome/test/data/webrtc/message_handling.js
+++ b/chrome/test/data/webrtc/message_handling.js
@@ -67,9 +67,9 @@ var STUN_SERVER = 'stun.l.google.com:19302';
 /**
  * Connects to the provided peerconnection_server.
  *
- * @param {string} serverUrl The server URL in string form without an ending
+ * @param{string} serverUrl The server URL in string form without an ending
  *     slash, something like http://localhost:8888.
- * @param {string} clientName The name to use when connecting to the server.
+ * @param{string} clientName The name to use when connecting to the server.
  */
 function connect(serverUrl, clientName) {
   if (gOurPeerId != null)
diff --git a/chrome/test/functional/media_stream_infobar.py b/chrome/test/functional/media_stream_infobar.py
index c7130f80bac6..548fdc1b9453 100755
--- a/chrome/test/functional/media_stream_infobar.py
+++ b/chrome/test/functional/media_stream_infobar.py
@@ -70,7 +70,7 @@ class MediaStreamInfobarTest(webrtc_test_base.WebrtcTestBase):
     self.NavigateToURL(url)
 
     self.assertEquals('ok-requested', self.ExecuteJavascript(
-        'getUserMedia(true, true, "{}")'))
+        'getUserMedia("{ audio: true, video: true, }")'))
 
     self.WaitForInfobarCount(1)
     self.PerformActionOnInfobar(with_action, infobar_index=0)
@@ -80,4 +80,4 @@ class MediaStreamInfobarTest(webrtc_test_base.WebrtcTestBase):
 
 
 if __name__ == '__main__':
-  pyauto_functional.Main()
\ No newline at end of file
+  pyauto_functional.Main()
diff --git a/chrome/test/functional/webrtc_brutality_test.py b/chrome/test/functional/webrtc_brutality_test.py
index 8ee66dcb8c7d..dd211e489617 100755
--- a/chrome/test/functional/webrtc_brutality_test.py
+++ b/chrome/test/functional/webrtc_brutality_test.py
@@ -70,7 +70,7 @@ class WebrtcBrutalityTest(webrtc_test_base.WebrtcTestBase):
 
   def _GetUserMediaWithoutTakingAction(self, tab_index):
     self.assertEquals('ok-requested', self.ExecuteJavascript(
-      'getUserMedia(true, true)', tab_index=0))
+      'getUserMedia("{ audio: true, video: true, }")', tab_index=0))
 
 
 if __name__ == '__main__':
diff --git a/chrome/test/functional/webrtc_test_base.py b/chrome/test/functional/webrtc_test_base.py
index d2711c24ded8..9a340c8d4ea7 100755
--- a/chrome/test/functional/webrtc_test_base.py
+++ b/chrome/test/functional/webrtc_test_base.py
@@ -33,7 +33,7 @@ class WebrtcTestBase(pyauto.PyUITest):
       A string as specified by the getUserMedia javascript function.
     """
     self.assertEquals('ok-requested', self.ExecuteJavascript(
-        'getUserMedia(true, true, "{}")', tab_index=tab_index))
+        'getUserMedia("{ audio: true, video: true, }")', tab_index=tab_index))
 
     self.WaitForInfobarCount(1, tab_index=tab_index)
     self.PerformActionOnInfobar(action, infobar_index=0, tab_index=tab_index)
@@ -159,4 +159,4 @@ class WebrtcTestBase(pyauto.PyUITest):
   def StopPeerConnectionServer(self):
     """Stops the peerconnection_server."""
     assert self._server_process
-    self._server_process.kill()
\ No newline at end of file
+    self._server_process.kill()
-- 
2.11.4.GIT