在React中使用base64编码的字符串播放视频
我用base64编码格式和AES加密加密了一个视频文件.我解密数据流，并附加/写入每个流(作为一个.mp4文件)，以实现最终的视频，但它需要大量的时间来实现最终的输出。
专业编辑：
我已经找到了资源html5 5-媒体和数据-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在react.中播放的视频。
这是一个离线的电子学习应用，视频存储在SD卡上，数据被动态解密，并在视频播放器中播放。
回答 1
Stack Overflow用户
发布于 2019-02-01 21:57:20
可以通过让您的WebView嵌入式javascript代码从设备存储中读取文件内容来解决这个问题，以避免这样大的base64文字内联。
正如所描述的这里，推荐的解决方法是使用blob。
基本上你必须：
- 1：在WebView中导入
RNFetchBlob和simpleCrypto。(见这里) - 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来重现您的限制问题。它适用于一个850 It的base64视频。
- 2: Blob方法通过获取包含较大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;
}PS
我自己也不赞成这种base64方法。我希望有一些本机代码，由Reactive原住民触发，来编写和读取加密的视频。读取将生成一个要从temp.mp4模块加载的react-native-video。在引擎盖下，加密是在字节级别完成的。因此，我们不需要来回解析它到base64。毕竟我们在处理二进制文件。
https://stackoverflow.com/questions/54348500
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号