thenickdude / webm-writer-js

JavaScript-based WebM video encoder for Google Chrome
277 stars 43 forks source link

Chrome Apps and FileWriter are deprecated: Substitute File System Access API for FileWriter #34

Open guest271314 opened 3 years ago

guest271314 commented 3 years ago

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.fileSystemNative FileSystem API

and https://github.com/thenickdude/webm-writer-js/issues/31.

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

https://github.com/thenickdude/webm-writer-js/blob/098a057549eb5c4c63db99302263bb57f67ccfe0/src/BlobBuffer.js#L23

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

and

https://github.com/thenickdude/webm-writer-js/blob/098a057549eb5c4c63db99302263bb57f67ccfe0/src/BlobBuffer.js#L142-L149

          } 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

guest271314 commented 10 months ago

WHATWG File System is now implemented in Chromium (Chrome), Firefox, Safari, which unlike WICG File System Access which writes directly to user-selected directories and files, writes File objects to the origin private filesystem.