Combinando y grabando ⏺ video 🎥 y audio 🎙 en el navegador

Mozilla Perú 28 Feb 2019

Transcript

1. Combinando y grabando ⏺ video 🎥 y audio 🎙 en el navegador @lupomontero - Mozilla Perú 28 Feb 2019
2. @Laboratoriala @LimaJSorg @NodeSchool @lupomontero @mozillaperu
3. WTF @!#$!! https://support.useloom.com/faqs-and-troubleshooting/general-faq/can-i-use-loo m-with-firefox-safari-etc
4. Estándares al rescate • MediaDevices • MediaStream • <video> • <canvas> • Blob • ...
5. navigator.mediaDevices.getUserMedia navigator.mediaDevices.getUserMedia({ camera: { video: true }, }) .then((stream) => { // `stream` is a `MediaStream` }) .catch(console.error);
6. MediaStream const track = stream.getVideoTracks()[0]; console.log(track.getSettings());
7. <video> const streamSettings = stream.getVideoTracks()[0].getSettings(); const video = document.createElement('video'); video.setAttribute('width', streamSettings.width); video.setAttribute('height', streamSettings.height); video.srcObject = stream; video.play();
8. <canvas> const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.drawImage( image, dx, dy, dWidth, dHeight, ); https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
9. <canvas> const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.drawImage( video, dx, dy, dWidth, dHeight, ); https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
10. canvas.captureStream() const outputStream = new MediaStream(); const inputStreams = [audioStream, canvas.captureStream()]; inputStreams.forEach( stream => stream.getTracks().forEach( track => outputStream.addTrack(track), ), );
11. window.requestAnimationFrame const update = () => { // redraw frame ... window.requestAnimationFrame(update); }; update();
12. MediaRecorder const recordedBlobs = []; const recorder = new MediaRecorder(outputStream, { mimeType: 'video/webm', }); recorder.addEventListener('dataavailable', (e) => { if (e.data && e.data.size > 0) { recordedBlobs.push(e.data); } }); recorder.start(1000);
13. Blob y window.URL recorder.stop(); const blob = new Blob(recordedBlobs, { type: 'video/webm' }); const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = 'test.webm'; document.body.appendChild(a); a.click(); setTimeout(() => { document.body.removeChild(a); window.URL.revokeObjectURL(url); }, 100);
14. Demo time!!!