Skip to content

Instantly share code, notes, and snippets.

@pmeinhardt

pmeinhardt/index.html

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pmeinhardt/4c7d9403a031520dd69d to your computer and use it in GitHub Desktop.
Save pmeinhardt/4c7d9403a031520dd69d to your computer and use it in GitHub Desktop.
Download ZIP
mediarecorder-demo (no file:/// urls, use a file server, works in firefox nightly - 24/05/2014)
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Stream Recording</title>
</head>
<body>
<video id="playback" controls autoplay></video>
<button onclick="stopRecording()">stop</button>
<a id="download-link" href="#" download="recording.webm">Download</a>
<script src="recorder.js"></script>
</body>
</html>
Raw
recorder.js
(function() {
var recorder = null;
window.startRecording = function startRecording(stream) {
recorder = new MediaRecorder(stream);
var info = {type: 'video/webm'};
var parts = [];
recorder.ondataavailable = function ondataavailable(event) {
parts.push(new Blob([event.data], info));
console.log(event.data);
};
recorder.onerror = function onerror(event) {
console.log(event);
};
recorder.onwarning = function onwarning(event) {
console.log('Warning:', event);
};
recorder.onstop = function onstop(event) {
console.log('Recorder stopped', event);
var url = window.URL.createObjectURL(new Blob(parts, info));
document.getElementById('playback').src = url;
document.getElementById('download-link').href = url;
};
recorder.start(2000);
};
window.stopRecording = function stopRecording() {
if (recorder) recorder.stop();
};
navigator.mozGetUserMedia({
audio: true,
video: true
}, function onGetMedia(stream) {
startRecording(stream);
}, function onError(error) {
console.error('Error fetching media!', error);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment