2 * Copyright (c) 2012 The Chromium Authors. All rights reserved.
3 * Use of this source code is governed by a BSD-style license that can be
4 * found in the LICENSE file.
8 * See http://dev.w3.org/2011/webrtc/editor/getusermedia.html for more
9 * information on getUserMedia.
13 * Asks permission to use the webcam and mic from the browser.
15 function getUserMedia() {
16 var constraints = getConstraints_();
17 var constraintsString = JSON.stringify(constraints, null, ' ');
18 $('getusermedia-constraints').innerHTML = constraintsString;
19 if (!navigator.webkitGetUserMedia) {
20 log_('Browser does not support WebRTC.');
23 log_('Requesting getUserMedia with constraints: ' + constraintsString);
24 navigator.webkitGetUserMedia(constraints,
25 getUserMediaOkCallback_,
26 getUserMediaFailedCallback_);
32 * Builds a Javascript constraints dictionary out of the selected options in the
33 * HTML controls on the page.
35 * @return {Object} A dictionary of constraints.
37 function getConstraints_() {
39 c.audio = $('audio').checked;
40 if (!$('video').checked) {
43 c.video = { mandatory: {}, optional: [] };
45 if ($('mandatory-min-width').value != '') {
46 c.video.mandatory.minWidth = $('mandatory-min-width').value;
48 if ($('mandatory-min-height').value != '') {
49 c.video.mandatory.minHeight = $('mandatory-min-height').value;
51 if ($('mandatory-min-fps').value != '') {
52 c.video.mandatory.minFrameRate = $('mandatory-min-fps').value;
54 if ($('mandatory-min-ar').value != '') {
55 c.video.mandatory.minAspectRatio = $('mandatory-min-ar').value;
58 if ($('mandatory-max-width').value != '') {
59 c.video.mandatory.maxWidth = $('mandatory-max-width').value;
61 if ($('mandatory-max-height').value != '') {
62 c.video.mandatory.maxHeight = $('mandatory-max-height').value;
64 if ($('mandatory-max-fps').value != '') {
65 c.video.mandatory.maxFrameRate = $('mandatory-max-fps').value;
67 if ($('mandatory-max-ar').value != '') {
68 c.video.mandatory.maxAspectRatio = $('mandatory-max-ar').value;
71 if ($('optional-min-width').value != '') {
72 c.video.optional.push({ minWidth: $('optional-min-width').value });
74 if ($('optional-min-height').value != '') {
75 c.video.optional.push({ minHeight: $('optional-min-height').value });
77 if ($('optional-min-fps').value != '') {
78 c.video.optional.push({ minFrameRate: $('optional-min-fps').value });
80 if ($('optional-min-ar').value != '') {
81 c.video.optional.push({ minAspectRatio: $('optional-min-ar').value });
84 if ($('optional-max-width').value != '') {
85 c.video.optional.push({ maxWidth: $('optional-max-width').value });
87 if ($('optional-max-height').value != '') {
88 c.video.optional.push({ maxHeight: $('optional-max-height').value });
90 if ($('optional-max-fps').value != '') {
91 c.video.optional.push({ maxFrameRate: $('optional-max-fps').value });
93 if ($('optional-max-ar').value != '') {
94 c.video.optional.push({ maxAspectRatio: $('optional-max-ar').value });
102 * @param {MediaStream} stream Media stream.
104 function getUserMediaOkCallback_(stream) {
105 gLocalStream = stream;
106 var videoTag = $('local-view');
107 videoTag.src = webkitURL.createObjectURL(stream);
109 // Due to crbug.com/110938 the size is 0 when onloadedmetadata fires.
110 // videoTag.onloadedmetadata = updateVideoTagSize_(videoTag);
111 // Use setTimeout as a workaround for now.
112 setTimeout(function() {updateVideoTagSize_(videoTag)}, 500);
113 gRequestWebcamAndMicrophoneResult = 'ok-got-stream';
118 * @param {Object} videoTag The video tag to update.
120 function updateVideoTagSize_(videoTag) {
121 // Don't update if sizes are 0 (happens for Chrome M23).
122 if (videoTag.videoWidth > 0 && videoTag.videoHeight > 0) {
123 log_('Set video tag width and height: ' + videoTag.videoWidth + 'x' +
124 videoTag.videoHeight);
125 videoTag.width = videoTag.videoWidth;
126 videoTag.height = videoTag.videoHeight;
132 * @param {NavigatorUserMediaError} error Error containing details.
134 function getUserMediaFailedCallback_(error) {
135 log_('Failed with error: ' + error);
139 return document.getElementById(id);
143 * Simple logging function.
145 * @param {string} message Message to print.
147 function log_(message) {
148 console.log(message);
149 $('messages').innerHTML += message + '<br>';