FileSystem API: 웹사이트를 위한 대용량 파일 클라이언트측 저장소

내 클라이언트는 비디오를 저장할 수 있지만 특정 앱에서만 액세스할 수 있는 기본 앱과 마찬가지로 비디오에 '다운로드' 옵션을 제공하도록 요청했습니다.

마침내 웹 사이트에 특정 저장 공간(가상 디스크 작동 방식과 동일)이 제공되는 샌드박스 저장을 허용하는 FileSystem API를 우연히 발견했습니다.

작은 비디오 파일로 내 운을 테스트하기 시작했습니다. 가장 도움이 된 두 링크는 ​​HTML5 Rocks 및 StackOverflow

브라우저에서 FileSystem API를 요청하는 다음 함수를 만들었습니다.

initFileSystem() {
  //Possible ways to access filesystem
  window.requestFileSystem =
    window.requestFileSystem || window.webkitRequestFileSystem;

  //Define maximum size to allocate (I set it to 500MB), Set callback and an error handler
  window.requestFileSystem(
    window.TEMPORARY,
    500 * 1024 * 1024,
    onInitFs,
    errorHandler
  );

  function errorHandler(e) {
    console.log("Error: " + e);
  }

그런 다음 비디오(getfile)를 생성하는 다음 콜백 함수를 생성했습니다. XHR을 사용하여 비디오를 가져오고 FileWriter를 사용하여 blob으로 저장했습니다.

//Callback function
function onInitFs(fs) {
  _fs = fs;
  saveVideo(fs);
}

function saveVideo(fs) {
  //Creates file named video.mp4
  fs.root.getFile(
    "video.mp4",
    { create: true, exclusive: true },
    //Writes file after fetching
    function (fileEntry) {
      fileEntry.createWriter(function (fileWriter) {
        fetchResource(fileWriter);
      }, errorHandler);
    },
    errorHandler
  );
}

//Fetches video using XHR
function fetchResource(fileWriter) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = "arraybuffer";
  xhr.open("GET", "http://example:com/video.mp4", true);

  //Convert Video To Blob
  xhr.onload = function (e) {
    if (this.status == 200) {
      var bb = new Blob([this.response]);
      fileWriter.write(bb);
    } else {
      console.log(this.status);
    }
  };
  xhr.send();
}

마지막으로 HTML5 비디오 플레이어를 만들고 비디오 blob을 URL로 추가했습니다.

<video id="ourVideo" controls=""></video>

Note: Create the same initFileSystem function for playing video

function onInitFs(fs) {
  _fs = fs;
  playVideo(fs);
}

function playVideo(fs) {
  //Fetches file from filesystem
  fs.root.getFile(
    filename,
    {},
    function (fileEntry) {
      console.log(fileEntry);

      document.querySelector("#ourVideo").src=fileEntry.fullPath;
      fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
          document.querySelector("#ourVideo").play();
        };
        reader.readAsText(file);
      }, errorHandler);
    },
    errorHandler
  );
}

여기서 fileEntry.fullPath는 파일 시스템 URL(filesystem:http://example:com/temporary/video.mp4)을 생성하여 FileSystem에서 비디오를 가져옵니다.

안타깝게도 FileSystem은 일부 Chromium 기반 브라우저(Edge, Chrome, Android용 Chrome, Opera, Samsung Internet)에서만 지원되며 더 이상 W3C에서 표준화되지 않습니다.

나는 크롬이 그것을 부유 상태로 유지하고 다른 브라우저(Firefox, Safari)가 동일하게 구현하거나 대안을 제공하기를 바랍니다.