Skip to content

Commit

Permalink
changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jesup
jesup committed Jan 30, 2013
1 parent 91dd98a commit 399a04d
Show file tree
Hide file tree
Showing 2 changed files with 314 additions and 84 deletions.
294 changes: 294 additions & 0 deletions compat_gum.html
View file
@@ -0,0 +1,294 @@
<!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 &amp; 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);
video.setAttribute("autoplay","autoplay");

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;

// polyfill based on code from webrtc.org
// http://review.webrtc.org/930012/patch/2001/3002
var getUserMedia = null;
var attachMediaStream = null;
var detachMediaStream = null;
var stopMediaStream = null;

window.URL = window.URL || window.webkitURL;

if (navigator.mozGetUserMedia) {
console.log("This appears to be Firefox");

// The RTCPeerConnection object.
RTCPeerConnection = mozRTCPeerConnection;

// Get UserMedia (only difference is the prefix).
// Code from Adam Barth.
getUserMedia = navigator.mozGetUserMedia.bind(navigator);

// Attach a media stream to an element.
attachMediaStream = function(element, stream) {
console.log("Attaching media stream");
element.mozSrcObject = stream;
};

detachMediaStream = function(element) {
var temp = element.mozSrcObject;
element.mozSrcObject = null;
return temp;
};

stopMediaStream = function(element) {
element.mozSrcObject.stop();
}
} else if (navigator.webkitGetUserMedia) {
console.log("This appears to be Chrome");

// The RTCPeerConnection object.
RTCPeerConnection = webkitRTCPeerConnection;

// Get UserMedia (only difference is the prefix).
// Code from Adam Barth.
getUserMedia = navigator.webkitGetUserMedia.bind(navigator);

// Attach a media stream to an element.
attachMediaStream = function(element, stream) {
element.src = window.URL.createObjectURL(stream);
//message.innerHTML = "<p>" + element.src + "</p>";
element._saved_stream = stream;
};

detachMediaStream = function(element) {
var temp = element._saved_stream;
element.src = null;
element._saved_stream = null;
return temp;
};

stopMediaStream = function(element) {
element._saved_stream.stop();
}
} else {
console.log("Browser does not appear to be WebRTC-capable");
}

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) {
stopMediaStream(video);
detachMediaStream(video);
content.removeChild(video);
stopbuttons.removeChild(snapshot);
snapshot.value = "Snapshot";
frames.innerHTML = '';
capturing = false;
video_status = false;
} else if (audio_status) {
stopMediaStream(audio);
detachMediaStream(audio);
content.removeChild(audio);
audio_status = false;
} else if (picture_status) {
detachMediaStream(picture);
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) {
attachMediaStream(video, saved_stream);
video.play();
} else if (audio_status) {
attachMediaStream(audio, saved_stream);
audio.play();
}
saved_stream = null;
} else {
if (video_status) {
video.pause();
saved_stream = detachMediaStream(video);
} else if (audio_status) {
audio.pause();
saved_stream = detachMediaStream(audio);
}
}
}

function startMedia(param) {
stop.style.display = "block";
start.style.display = "none";
try {
getUserMedia(param, function(stream) {
message.innerHTML = "<p>Success!</p>";
if (video_status) {
content.appendChild(video);
attachMediaStream(video, stream);
video.play();
frames.innerHTML = '';
stopbuttons.appendChild(snapshot);
} else if (audio_status) {
content.appendChild(audio);
attachMediaStream(audio, 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>

0 comments on commit 399a04d

Please sign in to comment.