gum_test_2_camera.html (133 lines of code) (raw):
<!DOCTYPE html>
<html>
<head>
<title>gUM Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Gentium+Basic:400,700' rel='stylesheet' type='text/css'>
<style>
#main {
display: block;
margin: 0px auto;
text-align: center
}
#content {
display: inline-block;
}
#frames {
display: inline-block;
max-width: 180px;
vertical-align: top;
}
#startbuttons {
display: block;
}
#stopbuttons {
display: none;
}
#message {
font-size: 24px;
font-family: "Gentium Basic", serif;
}
h1 {
font-size: 40px;
font-family: "Gentium Basic", serif;
}
input {
font-size: 28px;
font-family: "Gentium Basic", serif;
}
p {
color: green;
}
p.error {
color: red;
}
</style>
</head>
<body>
<div id="main">
<h2><b>Two-camera getUserMedia Test Page</b></h2>
<a href="http://mozilla.github.com/webrtc-landing">Main webrtc demo page</a><br>
Note: Audio will feedback unless you use a headset!<br><br>
<div id="startbuttons">
<input value="Video Front" onclick="startVideo(true);" type="button">
<input value="Video Rear" onclick="startVideo(false);" type="button">
</div>
<div id="images">
<div id="content"></div>
<div id="frames"></div>
</div>
<div id="message"></div>
<div style="display: block;" id="stopbuttons">
<input value="Stop Front" onclick="stopMedia(true);" type="button">
<input value="Stop Rear" onclick="stopMedia(false);" type="button">
</div>
</div>
<script type="application/javascript">
var video_status = false;
var video = document.createElement("video");
video.setAttribute("width", 160);
video.setAttribute("height", 120);
var video2 = document.createElement("video");
video2.setAttribute("width", 160);
video2.setAttribute("height", 120);
var audio_status = false;
var audio = document.createElement("audio");
audio.setAttribute("controls", true);
var picture_status = false;
var picture = document.createElement("img");
var start = document.getElementById("startbuttons");
var stop = document.getElementById("stopbuttons");
var message = document.getElementById("message");
var content = document.getElementById("content");
var frames = document.getElementById("frames");
var saved_stream = null;
var capturing = false;
function startVideo(front) {
video_status = true;
startMedia(front, {video: true});
// startMedia(front, {video: true /*{ facingMode: direction, require:["facingMode"] } */});
// startMedia(front, front ? { video: true } : { video: true, fake: true});
}
function stopMedia(front) {
if (1 /*video_status*/) {
element = front ? video : video2;
element.mozSrcObject.stop();
element.mozSrcObject = null;
content.removeChild(element);
frames.innerHTML = '';
capturing = false;
//video_status = false;
}
saved_stream = null;
}
function getusermedia_error(err, params) {
if (params.video && params.video.mediaSource) {
message.innerHTML = "<p class='error'>" + err + "</p>" +
"<p>In <a href=\"about:config\">about:config</a>, please enable media.getusermedia.screensharing.enabled<br> and add this" +
" site's domain name to " +
"media.getusermedia.screensharing.allowed_domains in about:config</p>";
} else {
message.innerHTML = "<p class='error'>" + err + "</p>";
}
stopMedia();
}
function startMedia(front, param) {
try {
window.navigator.mozGetUserMedia(param, function(stream) {
message.innerHTML = "<p>Success!</p>";
if (video_status) {
element = front ? video : video2;
content.appendChild(element);
element.mozSrcObject = stream;
element.play();
frames.innerHTML = '';
}
}, function (err) { getusermedia_error(err, param); });
} catch(e) {
getusermedia_error(e, param);
}
}
</script>
</body>
</html>