我已经使用加密base64编码格式和AES加密视频文件。我解密数据流逐流和追加/写每个流（作为.mp4档案），以实现最终的视频，但它需要大量的时间以实现最终的输出。
主要修改：
我发现资源html5-media-and-data-uri这有助于在webview打数据，但它不与2,000,000+的base64字符播放视频。
功能对文件进行解密，并使用Base64数据的网络视图中初始化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卡数据被解密的飞行，并在视频播放器上播放。
这可以通过使您的WebView嵌入的JavaScript代码来读取从设备存储的文件内容，以避免这个大的base64文字内嵌解决它。
如上所述here，建议的解决方法是使用一个blob URL。
基本上，你必须：
RNFetchBlob和simpleCrypto。 （见here）<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>
);
}
放弃
附加代码
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。我宁愿有一些本地代码，由本地作出反应触发，这将写入和读取加密的视频。读会产生temp.mp4的要从react-native-video模块加载。根据罩，加密是在字节级别上完成的。所以我们不需要对它进行解析来回为base64。我们正在处理的毕竟二进制文件。