gum_picture.html (211 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>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" onclick="startVideo();" type="button">
<input value="Audio" onclick="startAudio();" type="button">
<input value="Audio & Video" onclick="startAudioVideo();" type="button">
<input value="Picture" onclick="startPicture();" type="button">
</div>
<div id="images">
<div id="content"></div>
<div id="frames"></div>
</div>
<div id="message"></div>
<div style="display: none;" id="stopbuttons">
<input value="Stop" onclick="stopMedia();" type="button">
<input value="Pause/Play" onclick="pauseMedia();" type="button">
<input id="snapshot" value="Snapshot" onclick="startSnapshot();" type="button">
</div>
</div>
<script type="application/javascript">
var video_status = false;
var video = document.createElement("video");
video.setAttribute("width", 640);
video.setAttribute("height", 480);
var snapshots = [];
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 snapshot = document.getElementById("snapshot");
var saved_stream = null;
var capturing = false;
function startVideo() {
video_status = true;
startMedia({video:true});
}
function startAudioVideo() {
video_status = true;
audio_status = true;
startMedia({video:true, audio:true});
}
function startAudio() {
audio_status = true;
startMedia({audio:true});
}
function startPicture() {
picture_status = true;
startMedia({picture:true});
}
function stopMedia() {
if (video_status) {
video.mozSrcObject.stop();
video.mozSrcObject = null;
content.removeChild(video);
stopbuttons.removeChild(snapshot);
snapshot.value = "Snapshot";
frames.innerHTML = '';
capturing = false;
video_status = false;
} else if (audio_status) {
audio.mozSrcObject.stop();
audio.mozSrcObject = null;
content.removeChild(audio);
audio_status = false;
} else if (picture_status) {
picture.mozSrcObject = null;
content.removeChild(picture);
picture_status = false;
}
saved_stream = null;
stop.style.display = "none";
start.style.display = "block";
}
function pauseMedia() {
if (saved_stream) {
if (video_status) {
video.mozSrcObject = saved_stream;
video.play();
} else if (audio_status) {
audio.mozSrcObject = saved_stream;
audio.play();
}
saved_stream = null;
} else {
if (video_status) {
video.pause();
saved_stream = video.mozSrcObject;
video.mozSrcObject = null;
} else if (audio_status) {
audio.pause();
saved_stream = audio.mozSrcObject;
audio.mozSrcObject = null;
}
}
}
function startMedia(param) {
stop.style.display = "block";
start.style.display = "none";
try {
window.navigator.mozGetUserMedia(param, function(stream) {
message.innerHTML = "<p>Success!</p>";
if (video_status) {
content.appendChild(video);
video.mozSrcObject = stream;
video.play();
frames.innerHTML = '';
stopbuttons.appendChild(snapshot);
} else if (audio_status) {
content.appendChild(audio);
audio.mozSrcObject = stream;
audio.play();
} else if (picture_status) {
content.appendChild(picture);
picture.src = window.URL.createObjectURL(stream);
picture.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
}
}, function(err) {
message.innerHTML = "<p class='error'>" + err + "</p>";
stopMedia();
});
} catch(e) {
message.innerHTML = "<p class='error'>" + e + "</p>";
stopMedia();
}
}
function startSnapshot() {
capturing = !capturing;
if (capturing) {
captureImage();
snapshot.value = "Stop Snapshot";
} else {
snapshot.value = "Snapshot";
}
}
function captureImage() {
if (video_status && capturing) {
//dump("Capturing len " + snapshots.length + "\n");
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = video.videoWidth/4;
canvas.height = video.videoHeight/4;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
if (snapshots.unshift(canvas) > 4)
snapshots.length = 4;
frames.innerHTML = '';
for(var i=0; i<snapshots.length; i++) {
frames.appendChild(snapshots[i]);
}
setTimeout(captureImage, 2000);
}
}
</script>
</body>
</html>