Created
September 6, 2017 22:17
-
-
Save AVGP/4c2ce4ab3c67760a0f30a9d54544a060 to your computer and use it in GitHub Desktop.
ffmpeg.js converting webm from a media recorder into mp4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ffmpeg = require('ffmpeg.js/ffmpeg-mp4.js') | |
document.querySelector('button').addEventListener('click', (evt) => { | |
document.querySelector('[camera]').setAttribute('animation', { | |
property: 'rotation', | |
to: '0 360 0', | |
dur: 10000, | |
easing: 'linear' | |
}) | |
var stream = document.querySelector('canvas').captureStream(25) | |
var recorder = new MediaRecorder(stream, {mimeType: 'video/webm;codecs=h264'}) | |
var frames = [] | |
console.log(recorder.mimeType) | |
recorder.ondataavailable = function(evt) { | |
if(evt.data) frames.push(evt.data) | |
} | |
recorder.onstop = function() { | |
var fileBlob = new Blob(frames, { type: 'video/webm;codecs=h264' }) | |
var reader = new FileReader() | |
reader.onload = function(evt) { | |
var mp4 = ffmpeg({ | |
MEMFS: [{name: "test.webm", data: evt.target.result}], | |
arguments: ['-i', 'test.webm','-vcodec', 'copy', '-qscale', '0', 'test.mp4'], | |
stdin: function() {} | |
}) | |
var mp4blob = new Blob([mp4.MEMFS[0].data], {type: 'video/mp4'}) | |
console.log(mp4blob) | |
var dataUrl = window.URL.createObjectURL(mp4blob) | |
var link = document.createElement('a') | |
link.href = dataUrl | |
link.download = 'recording-ftw.mp4' | |
link.click() | |
} | |
reader.readAsArrayBuffer(fileBlob) | |
var dataUrl = window.URL.createObjectURL(fileBlob) | |
var link = document.createElement('a') | |
link.href = dataUrl | |
link.download = 'recording.webm' | |
link.click() | |
} | |
recorder.start(100) | |
setTimeout(() => { | |
recorder.stop() | |
}, 10000) | |
}) |
Oof, this gist is 7 years old...
If I remember and this Google search hasn't misled me - it's this https://github.com/Kagami/ffmpeg.js/
May the odds ever be in your favour.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
where is "ffmpeg.js/ffmpeg-mp4.js"?