How to use MediaStream Recording
html, javascript
Solution
MediaStream Recording (or Media Recorder API after the `MediaRecorder` JS object it defines) has now been implemented in 2 major browsers on desktop:
- Firefox 30 audio + video
- Chrome 47, 48 only for video with experimental Web Platform on in chrome://flags.
- Chrome 49 audio + video
Containers:
- Both record to .webm containers.
Video codecs:
- Both record VP8 video
- Chrome 49+ can record VP9 video
- Chrome 52+ can record H.264 video
Audio codecs:
- Firefox records Vorbis audio @ 44.1 kHz
- Chrome 49 records Opus audio @ 48 kHz
Demos/GitLab:
- https://simpl.info/mediarecorder/
- https://addpipe.com/media-recorder-api-demo/
Make sure you run these demos on HTTPS or localhost:
Starting with Chrome 47, getUserMedia() requests are only allowed from secure origins: HTTPS or localhost.
Further reading:
- MediaRecorder spec on w3c
- HTML5’s Media Recorder API in Action on Chrome and Firefox on addpipe.com
- MediaRecorder API on mozilla.org
- Chrome 47 WebRTC: media recording, secure origins on developers.google.com
- MediaRecorder API Available in Chrome 49 on developers.google.com
Disclaimer: I work at Pipe where we handle video recording.
Problem
Ok, I'm going to try and make my question as clear as possible, but I'm pretty confused, so let me know if I'm not getting the message across. I'm trying to use getUserMedia to use the webcam, and then use this http://www.w3.org/TR/mediastream-recording/ to record a brief captured video. Problem is, when I try to define new MediaRecorder(stream), I'm told that it is undefined. I haven't used this api before, so I don't really know what I'm missing. Here is the relevant code: ``` function onVideoFail(e) { console.log('webcam fail!', e); }; function hasGetUserMedia() { return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia); } if (hasGetUserMedia()) { window.URL = window.URL || window.webkitURL; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({video: true, audio: false}, function(stream){ var video = document.querySelector('video'); var recorder = new MediaRecorder(stream); <<<<<< THIS IS MY PROBLEM SPOT video.src = window.URL.createObjectURL(stream); video.play(); // webcamstream = stream; // streamrecorder = webcamstream.record(); }, onVideoFail); } else { alert('failed'); } } else { alert('getUserMedia() is not supported by this browser!!'); } ``` I've been trying to look at this for reference: HTML5 getUserMedia record webcam, both audio and video