Как кешировать аудиофайл для работников сервиса? - PullRequest
0 голосов
/ 26 августа 2018

Я пишу веб-приложение на HTML / Javacript, которое записывает аудио и загружает его на сервер. Теперь я хотел бы также поместить его в кэш, чтобы он был доступен для service.workers для автономного сценария. Какой лучший способ сделать это?

Программный поток:

  1. Запись звука
  2. Захват данных в BLOB-объекте
  3. Сохранить данные на сервере
  4. Слушайте записанные вещи

Если вы в сети, конечно, все работает хорошо.
Я хотел бы, чтобы файл был доступен для прослушивания локально, прежде чем он был удаленно сохранен, и создал его резервную копию на сервере как можно скорее.
Это моя рутина:

function mettiincache(name, myBlob) {  
    var resp = new Response(myBlob)
    var CACHE_NAME = 'window-cache-v1';
    caches.open(CACHE_NAME).then(function (cache) {
    cache.put(name, resp)
    }).catch(function (error) {
    ChromeSamples.setStatus(error);
    });
}

Когда я смотрю в хранилище приложений / кэша с помощью Chrome DevTools, я нахожу запись с правильным путем / именем и типом содержимого, но с длиной содержимого 0 байтов

Ответы [ 2 ]

0 голосов
/ 26 августа 2018

Обратите внимание, что вы можете создать / использовать отдельный рабочий файл "audioWorker.js" из SW.js для запуска аудио-кэша приложений, потому что IMO его проще тестировать, а жизненный цикл SW довольно сложен и ориентирован на собственный кэш приложений. «реальных» URL-адресов, используемых приложением.

Также обратите внимание на несоответствие с допустимыми протоколами, используемыми в обычной реализации Service-Worker, которая перехватывает вызовы «fetch» ​​- протокол blob, используемый браузером на ваших аудиоблоках, будет отклонен как недействительные URL-адреса реализацией browser.SW. Вы не можете просто передать URL-адрес своего блоба в обычный жизненный цикл ПО, потому что его URL начинается с 'blob: //'.

URL-адрес из audioBlob вполне подойдет, если вы решите НЕ использовать SW для кэша. Тем не менее, вы можете добавить суффикс mimeType ...

url = URL.createObjectURL(audio);  // protocol of this is 'blob://'
wUrl = url +"?type=" + {$audio.blob.data.type};

console.log("SW CACH1 " +wUrl);
myCacheWorker.postMessage({ action: 'navigate', url: wUrl });

в cacheWorker, по сообщению, запись в кеш:

onmessage = function( e ){
  switch( e.data.action ){
    case 'navigate':
        upcache(e.data.url).then(() => {
          postMessage({done: 'done'});
        });
        break;
}}

    //boiler plate cache write below from any example
    var upcache = function( url ){
      return caches.open($cname)
        .then((openCache) => {
          return fetch(fetchUrl).then(function(resp) {
            if (!resp.ok) {
              throw new TypeError('Bad response status');
            }
            return openCache.put(url, resp);
          })
      });
    }
0 голосов
/ 26 августа 2018

вы можете использовать sql lite для хранения данных в браузере, есть множество инструментов, которые могут помочь вам в разработке, я использую этот инструмент сам, https://sqlitebrowser.org/ для отладки, тестирования и чтенияДанные из браузеров, вы можете использовать серии данных и публиковать их на стороне клиента.Вы можете обратиться к этой ссылке, а также ссылку, как использовать sql lite в браузере, вы храните аудио файлы в виде двоичных файлов?Как правило, sql lite хорош, но вы должны позаботиться о хранении конфиденциальных данных, не шифруя их, иначе они будут скомпрометированы, также вы можете использовать Indexed Database API v 2.0.

вот ссылка для получения дополнительной информации об этом.https://www.w3.org/TR/IndexedDB/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...