Question

我已经使用base64编码格式和AES加密对视频文件进行了加密。我逐流解密数据并追加/写入每个流（作为.mp4文件）以实现最终的视频，但是要获得最终的输出会花费很多时间。

主要修改：

我发现资源html5-media-and-data-uri有助于播放webview中的数据，但不能播放2,000,000+ base64字符的视频。

使用base64数据在Web视图中解密文件并初始化HTML代码的功能

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查看代码

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

需要帮助，以便找到以反应原生方式从base64播放视频的方式/替代方式。

这是一个脱机电子学习应用程序，其中视频存储在SD-CARD上，数据被实时解密并在视频播放器中播放。

Answer 1

可以通过使您的WebView嵌入式javascript代码从设备存储中读取文件内容来解决此问题，从而避免使用如此大的base64文字内联。

如here所述，建议的解决方法是使用Blob URL。

基本上，您必须：

1 ：在WebView中导入RNFetchBlob和simpleCrypto。（请参阅here）
2 ：获取文件并解密，
3 ：创建Blob网址并将其设置为<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：我能够使用嵌入较大的base64内联文字（2.5mb）的Webview重现您的限制问题。它适用于850kb base64视频。
2：Blob URL方法确实通过获取包含较大base64视频的远程json文件解决了Web视图上的这一限制。
3：我没有测试将RNFetchBlob导入WebView方法。同样，如here所述，它似乎可行。

附加代码

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。毕竟，我们正在处理二进制文件。

在React-Native中使用base64编码的字符串播放视频

1 个答案: