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

Question

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

Ron*_*obo 12 html android webview react-native react-native-android

我使用base64编码格式和AES加密加密了一个视频文件.我逐流解密数据并附加/写入每个流(作为.mp4文件)以实现最终视频,但是需要花费大量时间来实现最终输出.

主要编辑:

我找到了资源html5-media-and-data-uri,它有助于播放a中的数据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");
    });
  });
}

Run Code Online (Sandbox Code Playgroud)

网络视图代码

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

Run Code Online (Sandbox Code Playgroud)

需要帮助来寻找方法/替代方案,以反应原生方式播放base64中的视频.

这是一个离线电子学习应用程序,其中视频存储在SD-CARD上,数据在运行中解密并在视频播放器中播放.

Answer 1

dio*_*sgg 6

可以通过使用WebView嵌入式javascript代码从设备存储中读取文件内容来解决它,以避免使用这个大型base64文字内联.

如上所述这里,建议的解决方法是使用一个blob URL.

基本上你必须:

1:导入RNFetchBlob和simpleCrypto内部WebView.(见这里)
2:获取文件并解密,
3:创建blob 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>
  );
}

Run Code Online (Sandbox Code Playgroud)

放弃

1:我能够使用嵌入了大型base64内联文字(2.5mb)的Webview重现您的限制问题.它适用于850kb base64视频.
2:Blob URL方法通过获取包含较大base64视频的远程json文件,确实解决了Web视图上的此限制.
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;
}

Run Code Online (Sandbox Code Playgroud)

PS

我本人不会采用这种base64方法.我宁愿有一些由React Native触发的本机代码,可以写入和读取加密的视频.读取将生成要从react-native-video模块加载的temp.mp4 .在引擎盖下,加密是在字节级别完成的.所以我们不需要来回解析它到base64.毕竟我们正在处理二进制文件.

归档时间：	6 年，10 月前
查看次数：	998 次
最近记录：	6 年，10 月前