Skip to content

Commit f4fb4c9

Browse files
hyukmin-kwonhyukmin-kwon
committed
AR test1 sample added.
1 parent 195b193 commit f4fb4c9

File tree

4 files changed

+358
-0
lines changed

4 files changed

+358
-0
lines changed

‎index.html

+3
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,9 @@ <h1>WebRTC samples</h1>
8080

8181
<h2 id="the-demos">The demos</h2>
8282

83+
<h3 id="ar">AR</h3>
84+
85+
<p><a href="src/content/ar/ar1/">AR test1 using JSARToolKit</a></p>
8386

8487
<h3 id="getusermedia">getUserMedia</h3>
8588

‎src/content/ar/ar1/index.html

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<!--
3+
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by a BSD-style license
6+
* that can be found in the LICENSE file in the root of the source
7+
* tree.
8+
-->
9+
<html>
10+
<head>
11+
12+
<meta charset="utf-8">
13+
<meta name="description" content="WebRTC code samples">
14+
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
15+
<meta itemprop="description" content="Client-side WebRTC code samples">
16+
<meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
17+
<meta itemprop="name" content="WebRTC code samples">
18+
<meta name="mobile-web-app-capable" content="yes">
19+
<meta id="theme-color" name="theme-color" content="#ffffff">
20+
21+
<base target="_blank">
22+
23+
<title>Select audio and video sources</title>
24+
25+
<link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
26+
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
27+
<link rel="stylesheet" href="../../../css/main.css">
28+
29+
<style>
30+
div.select {
31+
display: inline-block;
32+
margin: 0 0 1em 0;
33+
}
34+
p.small {
35+
font-size: 0.7em;
36+
}
37+
label {
38+
width: 12em;
39+
display: inline-block;
40+
}
41+
</style>
42+
43+
</head>
44+
45+
<body>
46+
<div id="container">
47+
48+
<div class="highlight">
49+
<p>New codelab: <a href="https://codelabs.developers.google.com/codelabs/webrtc-web">Realtime communication with WebRTC</a></p>
50+
</div>
51+
52+
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a><span>Select sources &amp; outputs</span></h1>
53+
54+
<p>Get available audio, video sources and audio output devices<b>*</b> from <code>mediaDevices.enumerateDevices()</code> then set the source for <code>getUserMedia()</code> using a <code>deviceId</code> constraint.</p>
55+
56+
<p class="small"><b>*</b>Enable experimental support in <b>Chrome 45.0.2441.x</b> or later by selecting <b>Enable experimental Web Platform features</b> in <b>chrome://flags</b> or by using command line flag "<b>--enable-blink-features=EnumerateDevices,AudioOutputDevices</b>". Use the <code>setSinkID()</code> method on the video element and provide a audio or video element and a sinkId (<code>deviceId</code> for where <code>deviceInfo.kind === 'audiooutput'</code>) as arguments. Also the web page must be served over HTTPS.</p>
57+
58+
<div class="select">
59+
<label for="audioSource">Audio input source: </label><select id="audioSource"></select>
60+
</div>
61+
62+
<div class="select">
63+
<label for="audioOutput">Audio output destination: </label><select id="audioOutput"></select>
64+
</div>
65+
66+
<div class="select">
67+
<label for="videoSource">Video source: </label><select id="videoSource"></select>
68+
</div>
69+
70+
<video id="video" autoplay></video>
71+
72+
<p class="small"><b>Note:</b> If you hear a reverb sound your microphone is picking up the output of your speakers/headset, lower the volume and/or move the microphone further away from your speakers/headset.</p>
73+
74+
<a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/devices/input-output" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
75+
</div>
76+
77+
<script src="../../../js/adapter.js"></script>
78+
<script src="../../../js/common.js"></script>
79+
<script src="js/main.js"></script>
80+
81+
<script src="../../../js/lib/ga.js"></script>
82+
</body>
83+
</html>

‎src/content/ar/ar1/js/main.js

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/*
2+
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
3+
*
4+
* Use of this source code is governed by a BSD-style license
5+
* that can be found in the LICENSE file in the root of the source
6+
* tree.
7+
*/
8+
9+
'use strict';
10+
11+
var videoElement = document.querySelector('video');
12+
var audioInputSelect = document.querySelector('select#audioSource');
13+
var audioOutputSelect = document.querySelector('select#audioOutput');
14+
var videoSelect = document.querySelector('select#videoSource');
15+
var selectors = [audioInputSelect, audioOutputSelect, videoSelect];
16+
17+
function gotDevices(deviceInfos) {
18+
// Handles being called several times to update labels. Preserve values.
19+
var values = selectors.map(function(select) {
20+
return select.value;
21+
});
22+
selectors.forEach(function(select) {
23+
while (select.firstChild) {
24+
select.removeChild(select.firstChild);
25+
}
26+
});
27+
for (var i = 0; i !== deviceInfos.length; ++i) {
28+
var deviceInfo = deviceInfos[i];
29+
var option = document.createElement('option');
30+
option.value = deviceInfo.deviceId;
31+
if (deviceInfo.kind === 'audioinput') {
32+
option.text = deviceInfo.label ||
33+
'microphone ' + (audioInputSelect.length + 1);
34+
audioInputSelect.appendChild(option);
35+
} else if (deviceInfo.kind === 'audiooutput') {
36+
option.text = deviceInfo.label || 'speaker ' +
37+
(audioOutputSelect.length + 1);
38+
audioOutputSelect.appendChild(option);
39+
} else if (deviceInfo.kind === 'videoinput') {
40+
option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
41+
videoSelect.appendChild(option);
42+
} else {
43+
console.log('Some other kind of source/device: ', deviceInfo);
44+
}
45+
}
46+
selectors.forEach(function(select, selectorIndex) {
47+
if (Array.prototype.slice.call(select.childNodes).some(function(n) {
48+
return n.value === values[selectorIndex];
49+
})) {
50+
select.value = values[selectorIndex];
51+
}
52+
});
53+
}
54+
55+
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
56+
57+
// Attach audio output device to video element using device/sink ID.
58+
function attachSinkId(element, sinkId) {
59+
if (typeof element.sinkId !== 'undefined') {
60+
element.setSinkId(sinkId)
61+
.then(function() {
62+
console.log('Success, audio output device attached: ' + sinkId);
63+
})
64+
.catch(function(error) {
65+
var errorMessage = error;
66+
if (error.name === 'SecurityError') {
67+
errorMessage = 'You need to use HTTPS for selecting audio output ' +
68+
'device: ' + error;
69+
}
70+
console.error(errorMessage);
71+
// Jump back to first output device in the list as it's the default.
72+
audioOutputSelect.selectedIndex = 0;
73+
});
74+
} else {
75+
console.warn('Browser does not support output device selection.');
76+
}
77+
}
78+
79+
function changeAudioDestination() {
80+
var audioDestination = audioOutputSelect.value;
81+
attachSinkId(videoElement, audioDestination);
82+
}
83+
84+
function gotStream(stream) {
85+
window.stream = stream; // make stream available to console
86+
videoElement.srcObject = stream;
87+
// Refresh button list in case labels have become available
88+
return navigator.mediaDevices.enumerateDevices();
89+
}
90+
91+
function start() {
92+
if (window.stream) {
93+
window.stream.getTracks().forEach(function(track) {
94+
track.stop();
95+
});
96+
}
97+
var audioSource = audioInputSelect.value;
98+
var videoSource = videoSelect.value;
99+
var constraints = {
100+
audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
101+
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
102+
};
103+
navigator.mediaDevices.getUserMedia(constraints).
104+
then(gotStream).then(gotDevices).catch(handleError);
105+
}
106+
107+
audioInputSelect.onchange = start;
108+
audioOutputSelect.onchange = changeAudioDestination;
109+
videoSelect.onchange = start;
110+
111+
start();
112+
113+
function handleError(error) {
114+
console.log('navigator.getUserMedia error: ', error);
115+
}

‎src/content/ar/ar1/js/test.js

+157
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/*
2+
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
3+
*
4+
* Use of this source code is governed by a BSD-style license
5+
* that can be found in the LICENSE file in the root of the source
6+
* tree.
7+
*/
8+
/* eslint-env node */
9+
10+
'use strict';
11+
12+
// This is a basic test file for use with testling.
13+
// The test script language comes from tape.
14+
var test = require('tape');
15+
16+
var webdriver = require('selenium-webdriver');
17+
var seleniumHelpers = require('webrtc-utilities').seleniumLib;
18+
19+
test('Fake device selection and check video element dimensions ' +
20+
'in input-output demo',
21+
function(t) {
22+
// FIXME: use env[SELENIUM_BROWSER] instead?
23+
var driver = seleniumHelpers.buildDriver();
24+
25+
var browser = process.env.BROWSER;
26+
27+
driver.get('file://' + process.cwd() +
28+
'/src/content/devices/input-output/index.html')
29+
.then(function() {
30+
t.pass('Page loaded');
31+
// Making sure we can select the 1st audio device.
32+
// TODO: Select more devices if Firefox adds a 2nd fake A&V device and
33+
// Chrome adds another fake video device.
34+
t.pass('Selecting 1st audio device');
35+
return driver.wait(webdriver.until.elementLocated(
36+
webdriver.By.css('#audioSource:nth-of-type(1)')));
37+
})
38+
// Check enumerateDevices has returned an id.
39+
.then(function(element) {
40+
return driver.wait(webdriver.until.elementIsVisible(element))
41+
.then(function() {
42+
element.click();
43+
return element.getAttribute('value');
44+
});
45+
})
46+
.then(function(deviceId) {
47+
t.ok(deviceId, 'Device/source id: ' + deviceId);
48+
})
49+
.then(function() {
50+
// Making sure we can select the 1st video device.
51+
// TODO: Select more devices if Firefox adds a 2nd fake A/V device and
52+
// Chrome adds another fake video device.
53+
t.pass('Selecting 1st video device');
54+
return driver.wait(webdriver.until.elementLocated(
55+
webdriver.By.css('#videoSource:nth-of-type(1)')));
56+
})
57+
// Check enumerateDevices has returned an id.
58+
.then(function(element) {
59+
return driver.wait(webdriver.until.elementIsVisible(element))
60+
.then(function() {
61+
element.click();
62+
return element.getAttribute('value');
63+
});
64+
})
65+
.then(function(deviceId) {
66+
t.ok(deviceId !== '', 'Device/source id: ' + deviceId);
67+
})
68+
.then(function() {
69+
// Make sure the stream is ready.
70+
return driver.wait(function() {
71+
return driver.executeScript('return window.stream !== undefined;');
72+
}, 30 * 1000);
73+
})
74+
// Check for a fake audio device label (Chrome only).
75+
.then(function() {
76+
return driver.executeScript('return stream.getAudioTracks()[0].label');
77+
})
78+
.then(function(deviceLabel) {
79+
var fakeAudioDeviceName = null;
80+
81+
switch (browser) {
82+
case 'chrome':
83+
fakeAudioDeviceName = 'Fake Audio 1';
84+
break;
85+
case 'firefox':
86+
// TODO: Remove the "deviceLabel === ''" check once Firefox ESR
87+
// reaches 46 (supports device labels for fake devices).
88+
fakeAudioDeviceName = (deviceLabel === '') ? '' :
89+
'Default Audio Device';
90+
break;
91+
default:
92+
t.skip('unsupported browser');
93+
}
94+
t.ok(fakeAudioDeviceName === deviceLabel,
95+
'Fake audio device found with label: ' + deviceLabel);
96+
})
97+
// Check for a fake video device label (Chrome only).
98+
.then(function() {
99+
return driver.executeScript('return stream.getVideoTracks()[0].label');
100+
})
101+
.then(function(deviceLabel) {
102+
var fakeVideoDeviceName = null;
103+
104+
switch (browser) {
105+
case 'chrome':
106+
fakeVideoDeviceName = 'fake_device_0';
107+
break;
108+
case 'firefox':
109+
// TODO: Remove the "deviceLabel === ''" check once Firefox ESR
110+
// reaches 46 (supports device labels for fake devices).
111+
fakeVideoDeviceName = (deviceLabel === '') ? '' :
112+
'Default Video Device';
113+
break;
114+
default:
115+
t.pass('unsupported browser');
116+
throw 'skip-test';
117+
}
118+
119+
t.ok(fakeVideoDeviceName === deviceLabel,
120+
'Fake video device found with label: ' + deviceLabel);
121+
})
122+
// Check that there is a video element and it is displaying something.
123+
.then(function() {
124+
return driver.findElement(webdriver.By.id('video'));
125+
})
126+
.then(function(videoElement) {
127+
t.pass('Found video element');
128+
var width = 0;
129+
var height = 0;
130+
return new webdriver.promise.Promise(function(resolve) {
131+
videoElement.getAttribute('videoWidth').then(function(w) {
132+
width = w;
133+
t.pass('Got videoWidth ' + w);
134+
if (width && height) {
135+
resolve([width, height]);
136+
}
137+
});
138+
videoElement.getAttribute('videoHeight').then(function(h) {
139+
height = h;
140+
t.pass('Got videoHeight ' + h);
141+
if (width && height) {
142+
resolve([width, height]);
143+
}
144+
});
145+
});
146+
})
147+
.then(function(dimensions) {
148+
t.pass('Got video dimensions ' + dimensions.join('x'));
149+
})
150+
.then(function() {
151+
t.end();
152+
})
153+
.then(null, function(err) {
154+
t.fail(err);
155+
t.end();
156+
});
157+
});

0 commit comments

Comments
 (0)