Skip to content

Instantly share code, notes, and snippets.

@AVGP
Created September 6, 2017 22:17
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save AVGP/4c2ce4ab3c67760a0f30a9d54544a060 to your computer and use it in GitHub Desktop.
Save AVGP/4c2ce4ab3c67760a0f30a9d54544a060 to your computer and use it in GitHub Desktop.
ffmpeg.js converting webm from a media recorder into mp4
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)
})
@lucasduartedeveloper
Copy link

where is "ffmpeg.js/ffmpeg-mp4.js"?

@AVGP
Copy link
Author

AVGP commented Jan 22, 2024

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