The MediaRecorder API lets you record media streams, i.e. moving images and audio
navigator.mediaDevices.getUserMedia({
audio: true
}).then(function (stream) {
var recorder = new MediaRecorder(stream);
}
recorder.addEventListener('dataavailable', function(e) {
// e.data contains the audio data! let's associate it to an <audio> element
var el = document.querySelector('audio');
el.src = URL.createObjectURL(e.data);
});
// start recording here...
recorder.start();
// and eventually call this to stop the recording, perhaps on the press of a button
recorder.stop();
navigator.mediaDevices.getUserMedia({
audio: true,
video: true // <-- new!
})
var options = {
audioBitsPerSecond : 128000,
videoBitsPerSecond : 2500000,
mimeType : 'video/mp4'
}
var mediaRecorder = new MediaRecorder(stream,options);
var canvasStream = canvas.captureStream();
var recorder = new MediaRecorder(canvasStream);
// set the stream as src for a video element
video.src = URL.createObjectURL(stream)
// periodically draw the video into a canvas
ctx.drawImage(video, 0, 0, width, height);
// get the canvas content as image data
var imageData = ctx.getImageData(0, 0, width, height);
// apply your pixel magic to this bitmap
var data = imageData.data; // data is an array of pixels in RGBA
for (var i = 0; i < data.length; i+=4) {
var average = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = average >= 128 ? 255 : 0; // red
data[i + 1] = average >= 128 ? 255 : 0; // green
data[i + 2] = average >= 128 ? 255 : 0; // blue
// note: i+3 is the alpha channel, we are skipping that one
}
var stream = canvas.captureStream();
recorder = new MediaRecorder(stream);
var sourceNode = audioContext.createMediaStreamSource(stream);
stream -> MediaStreamSource -> filter -> outputNode
stream -> MediaStreamSource -> filter -> outputNode
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function (stream) {
var streamDestination = audioContext.createMediaStreamDestination();
filter.connect(streamDestination);
var filteredRecorder = new MediaRecorder(streamDestination.stream);
stream -> MediaStreamSource -> filter -> outputNode
stream -> MediaStreamSource -> filter -> outputNode
var filter = audioContext.createBiquadFilter();
sourceNode.connect(filter);
//filter.connect(audioContext.destination);
Separate Video
Separate Audio
var videoStream = new MediaStream();
var videoTracks = inputStream.getVideoTracks();
videoTracks.forEach(function(track) {
videoStream.addTrack(track);
});
var audioStream = new MediaStream();
var audioTracks = inputStream.getAudioTracks();
audioTracks.forEach(function(track) {
audioStream.addTrack(track);
});
Manipulate Both
// Manipulate videoStream into a canvas and then
var videoOutputStream = videoCanvas.captureStream();
// Manipulate audio with an audio context and then
var audioOutputStream = streamDestination.stream;
var outputStream = new MediaStream();
[audioOutputStream, videoOutputStream].forEach(function(s) {
s.getTracks().forEach(function(t) {
outputStream.addTrack(t);
});
});
Join them Together
And Finally MediaRecorder
var finalRecorder = new MediaRecorder(outputStream);
Developer Edition 47+
Firefox for Android 48+
Chrome 47+ *
Opera 36+ *
* Can only capture WebRTC and requires enabling
??
??
??
API Documentation:
https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API
Mozilla Dev Blog:
https://hacks.mozilla.org/2016/04/record-almost-everything-in-the-browser-with-mediarecorder/