Воспроизведение видео с помощью Base64 кодированных строк в React-Native

Вопрос задан: 1 год назад Последняя активность: 1 год назад
up 11 down

Я зашифровал видео файл, используя формат кодировки base64 и AES-шифрование. Я дешифрование данных в потоке по-поток и добавлять/запись каждый потока (в виде файла .mp4) для достижения конечного видео, но это занимает много времени, чтобы достичь конечного результата.

Основные Edit:

Я нашел ресурсы html5-медиа-и-данных URI которая помогает воспроизводить данные в webview, Но это не играет видео с 2,000,000+ символов base64.

Функция расшифровать файл и инициализировать HTML-код в веб-просмотра с данными base64

decryptfile() {
RNFetchBlob.fs
  .readStream(
    RNFetchBlob.fs.dirs.DCIMDir + "/encryptfile1.dat",
    "base64",
    2796256, //character to be read at a time for decryption
    2500  // Time taken before each stream enters for decryption
  )
  .then(stream => {
    let data = "";
    stream.open();
    stream.onData(chunk => {
      var decipherText = simpleCrypto.decrypt(chunk.toString()); // Decryption
      decryptText = decryptText + decipherText; // appending decrypted data
    });
    stream.onEnd(() => {
      htmlCode =
        `<html>
           <body>
              <video style="width: 50%; height: 50%; margin-top: 10%; margin-left: 22%;"
              controls>
                <source type="video/mp4" src="data:video/mp4;base64,` +
                 decryptText.toString() + // final decrypted data
                `">
             </video>
          </body>
        </html>`;
      this.setState({ playvideo: !this.state.playvideo }); // state set for playing video at end of decryption
      console.log("File decrypted");
    });
  });
}

Web View Code

<WebView
     style={{ flex: 1 }}
     source={{ html: htmlCode }}
 />

Нужна помощь в поиске путей/альтернатив для воспроизведения видео из base64 в реакции родной.

Это на форуме электронного обучения приложение, где видео сохраняются на SD-CARD и данные расшифровываются на лету и играл в видеоплеере.

1 ответ

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

Реклама

up 5 down

Это можно решить, сделав свой WebView код встроена яваскрипта читать содержимое файла из хранилища устройства для того, чтобы избежать необходимости этого большого base64 буквального инлайн.

Как описано вот, рекомендуемый обходной путь заключается в использовании двоичного объекта URL.

В общем, вы должны:

  • 1: Импорт RNFetchBlob а также simpleCrypto внутри WebView. (видеть вот)
  • 2: Fetch файл и расшифровать его,
  • 3: Создание блобо URL и установить его на <video> атрибут SRC.

Ваш код будет выглядеть примерно так:

componentDidMount() {
  this.setState({htmlCode: `
    <html>
      <body>
        <video id="myvideo" style="width: 50%; height: 50%; margin-top: 10%; margin-left: 22%;" controls></video>

        <script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script>
        <script src="${path/to/simpleCrypto.js}"></script>

        <script type="text/javascript">
          function b64toBlob(b64Data, contentType, sliceSize) {
             //... returns a new Blob using the b64Data.
          }

          //for simplicity, onDecodeEnd abstracts your decryption code
        RNFetchBlob.fs.readStream('encryptfile1.dat').onDecodeEnd((decryptText) => {
          var blob = b64toBlob(base64Video, "video/mp4");
          var url = URL.createObjectURL(blob);
          document.getElementById('myvideo').src = url;
        })
      </script>
    </body>
  </html>
`})

render() {
  return (
    <WebView 
      style={{ flex: 1 }} 
      source={{ html: this.state.htmlCode, baseUrl: RNFetchBlob.fs.dirs.DCIMDir }}> 
   </WebView>
  );
}

отказ

  • 1: Я был в состоянии воспроизвести проблему ограничения с помощью WebView, что встроенная большого base64 встроенного буквальныма (2.5MB). Он работал на 850kb base64 видео.
  • 2: URL подход Blob было решить это ограничение на веб-просмотра, путем извлечения удаленного файла JSON, содержащий большую base64 видео.
  • 3: Я не проверял импорт RNFetchBlob в WebView подхода. Опять же, как описано вот это, кажется, работает.

Дополнительный код

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

PS

Я сам бы не пошел на этот base64 подход. Я предпочел бы иметь некоторый машинный код, срабатывающий от React Native, что бы писать и читать зашифрованные видео. Чтения будет генерировать temp.mp4 быть загружены из react-native-video модуль. Под капотами, шифрование выполняется на уровне байтов. Таким образом, нам не нужно, чтобы разобрать его туда и обратно в base64. Мы имеем дело с бинарными файлами после всех.

Ошибка 505

Что-то пошло не так

Попробуйте воспользоваться поиском