CODEWITHSUNDEEP
javascripthtmlhtml5-videowebassemblyvideo-conversion
Janick Koder
Janick Koder

Reputation: 64

Resize video in Browser/Clientside before saving/uploading with JavaScript / HTML5

I am looking for a way / best practice to resize and maybe to trim a video with Javascript, HTML5 or Webassambly in all actual browsers before saving in Filesystem.

What is the "best" way to manipulate a video in the browser? I was looking different concepts of possibilities:

The goal is to share the video decentral by IPFS, so its not possible to resize on serverside. The result can be saved after the resizing.

As a process-schematic it looks like:

  1. open/select a Video from the Filesystem <input type='file' />
  2. resize and maybe trim the video to given attributes
  3. maybe temporary save in "localStorage" or by FilesystemAPI
  4. Do other work, like publication ect.

My idea actual is to stream the video to the document itself and capture the stream. But i am not sure if there is a more fast and efficient way to do this work. Also its not necessary to playback the Video on resize.

Hope you can help me to find a good solution and tell me your experience with this.

Upvotes: 1

Views: 1241

Answers (1)

Brad
Brad

Reputation: 163262

The only sort-of reasonable way to do it is to draw the video frames to a canvas (no WebGL needed, just .drawImage()), and use the CanvasCaptureMediaStream and record that with the MediaRecorder API.

This is wonky though... doesn't guarantee correct frame timing, most browsers have bugs when the tab is not active, etc.

The other way is to build FFmpeg for JavaScript, which ends up being huge and slow.

If at all possible, you're better off making a browser extension to handle this until the Web Codecs API comes to fruition.

Upvotes: 1

Related Questions