Hi,

Can webm-writer be used to create the final webm output from a mediarecorder blob?

the reason i ask is because chromium browsers don't seem to write the final segment size as its used to stream (hens no final size)

Which causes a playback problem on standard players.

I believe web-writer resolves this issue, but wonder if I can use it like this?

It would be nice if webm writer support OffscreenCanvas, because I'm trying to do render stuffs inside web worker. As far I know, you can get the WebP blob by using OffscreenCanvas#convertToBlob({type: "image/webp"})

When calling complete on a WebMWriter that hasn't received any addFrame calls before, the library crashes in fileOffsetToSegmentRelative because ebmlSegment is still undefined.

I would suggest fixing this by adding a check here to check whether writtenHeader is set or not.

However, I am not sure what the correct error return mechanism should be.
In my project, I fixed this problem with this code:

if (!writtenHeader)
  return Promise.resolve(null);

I think that returning null instead of a Blob object signals that the operation is not illegal per-se but we simply cannot give the client anything usable.
However, I understand that it can also be considered cleaner to restrict the range of possible return values to error | sth. usable. So Promise.reject({?}) is another possible option.
I'd be happy to come up with a PR for this once this question has been resolved.
What do you think?

The video headers are not encoded into the resulting file, making playback impossible on browsers other than Google Chrome.

Is there an interest in adding support for webcodecs? webm-writer-js already handles a lot of the data formatting and muxing for webm; it's pretty close to adding support for webcodecs.

If you didn't know, the w3c's webcodecs repository uses a modified version of webm-writer for one of its samples that can save a limited video. I ran into some flaws with that version, and ended up creating my own version here. It can add EncodedVideoChunks to a webm using a new addChunk function.

Let me know if you want me to do a PR, I'd be happy to. Thanks for all the great work on this library!

I would like to use the WebMWriter inside a WebWorker, but I get the exception

'window' is not defined

Some digging in the code I found that window is used at:

Changing the line to:

return self.atob(url.substring("data:image\/webp;base64,".length)); 

solved the issue.

Hello,
I'm currently working on live transcoding and one of the formats is audio only webm using opus encoding. It can't be played on browser nor a media player and I figured out that it's missing a header. I found this repo and checked the source and found a function which builds/write the header.

Can you explain to me how it works? or how can I create my own implementation for it?

Much thanks!

Thanks for great library.

It seems that exporting video with alpha-transparency is not supported yet.

have any plan for supporting alpha transparency?

thanks.

I'm seeing my animation loop go from 60fps to 15-8 fps when I begin recording. It runs a little bit faster when I set the quality lower. I'm trying to record a canvas approx 1280x720

My animation loop runs smoothly when I use the MediaReording API so I know my system can encode video fast enough.

When I profile the code, it's spending 70-80ms in toDataUrl()

Is there any trick to get this to run faster?

-------------please remove

Is it possible to add audio to the resulting webm file?

I try to use WebmWriter like this:

const { createCanvas, loadImage } = require("canvas");
const CANVAS_WIDTH = 1920;
const CANVAS_HEIGHT = 1080;
const canvas = createCanvas(CANVAS_WIDTH, CANVAS_HEIGHT);
const context = canvas.getContext("2d");

const videoWriter = new webmWriter({
	quality: 0.9999,
	fileWriter: null,
	fd: null,
	frameRate: 30, 
});
for (let i = 0; i < 30 * 5; i++) {
	videoWriter.addFrame(canvas);
}
videoWriter.complete();

But unfortunately I have no luck because evertime I get "Couldn't decode WebP frame, does the browser support WebP?". How to use it with Node.js?

When setting quality to 1, WebMWriter fails to export video since there is no space after VP8 in the generated binary.

Workaround is to set quality to 0.99 but just wanted to let you know, maybe just to constrain quality to 0.99.

Except for this, the library works just fine, I'm using it to export canvas loops (https://observablehq.com/@makio135/bnb) thanks a lot 🙏

Hi! The Betaflight Blackbox Explorer has a little bug since some time ago with your library. For some reason, this was working:

But since some update of something (Node.js, probably), the value of destination.constructor.name is EventTarget and not FileWriter anymore. If I force this if to be true, all works perfectly, so the FileWriter is valid, but for some reason the name is not valid anymore to verify the FileWriter.
Is there some possibility of patching your library changing this verification? Thanks!

Based on some tests, the recording only uses 1 CPU core. Is there a way to use more cores? Maybe #39 is the solution? To split at least the work in 2 cores and maybe double the performance? Recording 15 seconds full HD video on an Apple M1 requires 50 seconds. It would be great to utilize the machine hardware at its fullest and reduce dramatically the time required. Thanks!

What about Googles Vp9 codec? Will it be a Feature next Version?

Hello, Does anyone else have the same problem as me?

Background info:
-The videos were rendered at 60fps,1920x1080, and at the lowest possible quality setting.
-I am using CCapture,a library for replaying canvas based animations. It uses this project for webm video rendering. (Perhaps CCapture is the culprit)

It would be much appreciated if a new release could be cut in order to include #17 which has now landed, and is one of the blockers for us continuing to make use of the library

I'm trying to figure out if I can use webm-writer with a FileWriter using a chrome extension and puppeteer, but it looks like only Chrome apps can in fact use the Storage API, not an extension as mentioned in the Readme.md.

I currently have a web app that when running in Electron it leverages the filesystem to record videos. I'm trying to figure out how I could bring the rendering to the cloud. Thanks!

Hey Guys,

I tried to include the webm-write with webpack, yet it tries to load the 'fs' (node) module on compile

I figured out (using webpack 4) you can add the following to your webpack config to prevent that error from happening.

  node: {
    fs: 'empty',
  },

Yet, I don't know if it'd possible to remove that requirement, maybe by passing fs as an optional parameter.
This would allow people to add their own implementations of fs as well. (like fs-extra if desired)

Suggestion if you do not need fs:

const videoWriter = new WebMWriter({
  fs: null,
})

Or with a custom implementation:

const videoWriter = new WebMWriter({
  fs: require('my-custom-fs'),
})

Could be useful for some unit-tests as well...

Is there a better way to cancel the recording than using the .complete Promise ignoring the outcome?

Is it possible to write to WebP (as dynamic image) instead of WebM?

Looks like the recorded videos have bt470bg as color space. Is there a way to change this?

I use AWS to convert the videos in the cloud from webm to mp4 and they only support:

• SDR (rec. 601 color space)
• SDR (rec. 709 color space)

Meaning colors get modified quite a bit.

I guess this is a browser limitation, but maybe I'm very lucky 😁

Background

Use webm-writer-js to add frames from multiple input video tracks potentially containing different pixel dimensions.

Commented lines in this.addFrame() to avoid error being thrown

this.addFrame = function(canvas) {
// if (writtenHeader) {
//   if (canvas.width != videoWidth || canvas.height != videoHeight) {
//      throw "Frame size differs from previous frames";
//    }
// } else {
  videoWidth = canvas.width;
  videoHeight = canvas.height;
  writeHeader();
  writtenHeader = true;
// }

The resulting video frame rate is not consistent relevant to the multiple input tracks.

Code

<!DOCTYPE html>
<html>

<head>
  <script src="webm-writer.js"></script>
</head>

<body>
  <video controls autoplay></video>
  <canvas></canvas>
  <script>

    let width;
    let height;
    let ctx;
    let controller;
    let done;
    const canvas = document.querySelector("canvas");

    const video = document.querySelector("video");
    const videoWriter = new WebMWriter({
      quality: 0.9, // WebM image quality from 0.0 (worst) to 1.0 (best)
      fileWriter: null, // FileWriter in order to stream to a file instead of buffering to memory (optional)
      fd: null, // Node.js file handle to write to instead of buffering to memory (optional)
      // You must supply one of:
      frameDuration: null, // Duration of frames in milliseconds
      frameRate: 30 // Number of frames per second
    });
    video.onloadedmetadata = e => {
      console.log(e.target.duration);
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      console.log(canvas.width, canvas.height);
      if (!ctx) {
        ctx = canvas.getContext("2d");
        ctx.globalComposite = "copy";
      }
    }
    video.onplay = async e => {
      let frameRate = 0;

      const processData = async({
          done
        }) =>
        done 
        ? await reader.closed
        : (await new Promise(resolve => setTimeout(resolve, !frameRate ? frameRate : (frameRate = 1000/30))), ctx.drawImage(video, 0, 0), videoWriter.addFrame(canvas), processData(await reader.read()));
      
      const rs = new ReadableStream({
        start(c) {
          return controller = c;
        },
        pull(_) {
          controller.enqueue(null);
        }
      });
      const reader = rs.getReader();
      done = processData(await reader.read());
    };
    (async() => {
      const urls = Promise.all([{
        from: 0,
        to: 4,
        src: "https://upload.wikimedia.org/wikipedia/commons/a/a4/Xacti-AC8EX-Sample_video-001.ogv"
      }, {
        from: 10,
        to: 20,
        src: "https://mirrors.creativecommons.org/movingimages/webm/ScienceCommonsJesseDylan_240p.webm#t=10,20"
      }, {
        from: 55,
        to: 60,
        src: "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4"
      }, {
        from: 0,
        to: 5,
        src: "https://raw.githubusercontent.com/w3c/web-platform-tests/master/media-source/mp4/test.mp4"
      }, {
        from: 0,
        to: 5,
        src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4"
      }, {
        from: 0,
        to: 5,
        src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4"
      }, {
        from: 0,
        to: 6,
        src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4#t=0,6"
      }].map(async({
        from,
        to,
        src
      }) => {
        try {
          const request = await fetch(src);
          const blob = await request.blob();
          const blobURL = URL.createObjectURL(blob);
          const url = new URL(src);
          console.log(url.hash);
          return blobURL + (url.hash || `#t=${from},${to}`);
        } catch (e) {
          throw e;
        }
      }));
      let media = await urls;
      for (const blobURL of media) {
        await new Promise(async resolve => {
          video.addEventListener("pause", e => {
            controller.close();
            done.then(resolve);
          }, {
            once: true
          });
          video.src = blobURL;
        });
      }
      const blob = await videoWriter.complete();
      video.remove();
      canvas.remove();
      const videoStream = document.createElement("video");
      videoStream.onloadedmetadata = e => console.log(videoStream.duration);
      videoStream.onended = e => console.log(videoStream.duration, videoStream.currentTime);
      videoStream.controls = videoStream.autoplay = true;
      document.body.appendChild(videoStream);
      const src = URL.createObjectURL(blob);
      console.log(src);
      videoStream.src = src;

    })();
  </script>
</body>

</html>

Issue

plnkr https://plnkr.co/edit/4JxS4O?p=preview

The expected duration of the resulting WebM file is 41-42 seconds. The actual duration is 27-28.

Chrome apps are deprecated, see https://developer.chrome.com/docs/extensions/reference/fileSystem/

This API is part of the deprecated Chrome Apps platform. Learn more about migrating your app.

Following the "migrating your app link" to chrome.fileSystem

chrome.fileSystem

Native FileSystem API

and #31.

To substitute WritableStreamDefaultWriter for FileWriter in webm-writer-js at

if (
        typeof FileSystemFileHandle !== 'undefined' &&
        destination instanceof WritableStreamDefaultWriter
      )

and

          } else if (fileWriter) {
            return new Promise(async function (resolve, reject) {
              // fileWriter.onwriteend = resolve;
              if (newEntry.offset === 0) {
                await fileWriter.ready;
              }
              console.log(newEntry.offset);
              // await fileWriter.seek(newEntry.offset)
              await fileWriter.write({
                type: 'write',
                position: newEntry.offset,
                data: new Blob([newEntry.data]),
              });
              resolve();
            });
          }

Usage

document.querySelector('p').onclick = async () => {
  fileHandle = await showSaveFilePicker({
    suggestedName: 'webm-writer-filesystem-access.webm',
    startIn: 'videos',
    id: 'webm-writer',
    types: [
      {
        description: 'WebM files',
        accept: {
          'video/webm': ['.webm'],
        },
      },
    ],
    excludeAcceptAllOption: true,
  });
  writable = await fileHandle.createWritable();
  fileWriter = await writable.getWriter();
  videoWriter = new WebMWriter({
    quality: 0.95, // WebM image quality from 0.0 (worst) to 1.0 (best)
    fileWriter, // FileWriter in order to stream to a file instead of buffering to memory (optional)
    fd: null, // Node.js file handle to write to instead of buffering to memory (optional)
    // You must supply one of:
    frameDuration: null, // Duration of frames in milliseconds
    frameRate: 30, // Number of frames per second
    // add support for variable resolution, variable frame duration, data URL representation of WebP input
    variableResolution: true, // frameRate is not used for variable resolution
  });
};

Test
webm-writer-js-file-system-access.zip

Hello & thanks for this little nice tool!

The generated webm file is not playable by vlc/WhatsApp other tools, even ffmpeg can't convert it. Its also not possible to share it via WhatsApp etc pp because of "unsupported file format".
All those things are working when using a webm file from here: https://www.webmfiles.org/demo-files

So in my naive understanding :), it should also work with those files created by this lib? (or not?)

In my opinion the file is created successfully. It is created out of 4 single pictures (canvas) with 1fps.
(maybe short webm need special header or smth?)

I attached the test file: test.zip

Where can i take a look to gain more information about the possible error?

Thanks for your help!

ffmpeg

Input #0, matroska,webm, from 'test.webm':
  Metadata:
    encoder         : webm-writer-js
  Duration: 00:00:04.00, start: 0.000000, bitrate: 4849 kb/s
    Stream #0:0: Video: vp8, yuv420p(progressive), 1680x882, SAR 1:1 DAR 40:21, 1 fps, 1 tbr, 1k tbn, 1k tbc (default)

exiftool:

ExifTool Version Number         : 11.88
File Name                       : test.webm
Directory                       : .
File Size                       : 2.3 MB
File Modification Date/Time     : 2020:10:14 16:56:22+02:00
File Access Date/Time           : 2020:10:14 16:56:37+02:00
File Inode Change Date/Time     : 2020:10:14 16:56:31+02:00
File Permissions                : rw-rw-r--
File Type                       : WEBM
File Type Extension             : webm
MIME Type                       : video/webm
EBML Version                    : 1
EBML Read Version               : 1
Doc Type                        : webm
Doc Type Version                : 2
Doc Type Read Version           : 2
Timecode Scale                  : 1 ms
Muxing App                      : webm-writer-js
Writing App                     : webm-writer-js
Duration                        : 4.00 s
Track Number                    : 1
Track Language                  : und
Codec ID                        : V_VP8
Codec Name                      : VP8
Track Type                      : Video
Image Width                     : 1680
Image Height                    : 882
Image Size                      : 1680x882
Megapixels                      : 1.5

The writer works fine until I pass the transparent: true prop. With it, I get an error Uncaught (in promise) TypeError: Cannot read property 'getImageData' of null here

I'm using a three.js canvas with an alpha property. There shouldn't be a problem with it since I am able to take transparent images of the canvas manually. Any help?