How to play encrypted video in react native offline?

1.2k views Asked by At

I have video in my local file of android and these are encrypted using AEC algorithm. Is there any straight forward way to play that video in react-native-video ? I tried converting it into base64 and decrypting it slice by slice but react-native-video doesn't support base64 as a source. I tried playing it on react-native-webview but it doesn't work. code is below

<WebView
            injectedJavaScript={debugging}
            onMessage={(message) => {
              console.log(message);
            }}
            source={{
              baseUrl: '',
              html: `<html>
                 <body>
                    <video width="100%" height="600" controls controlsList="nodownload" autoplay='autoplay' id='myvideo'>
                    <source type="video/mp4" src="data:video/mp4;base64,${videoFile}">
                     </video>
                  </body>
                  <script src="${RNFetchBlob.fs.dirs.MainBundleDir}/bundle.js"></script>
                  <script type="text/javascript">
                    console.log('check is check')
                  </script>
                  <script type="text/javascript">
                    console.log('check is check  32 and this is from the nepal')
                    let data = '';
                    RNFetchBlob.fs
                    .readStream('file:///' + ${allVideoFile[1].path}, 'base64', 102399, 250)
                    .then((stream) => {
                      stream.open();
                      stream.onData((chunk) => {
                        data+=chunk;
                      });
                      stream.onEnd(() => {});
                    }).catch(err=>{
                      console.log('Error is',err)
                    })
                    console.log('data is',data)
                  </script>
               </html>`,
            }}
          />

I tried various other solution from search but nothing help. I don't know what I am missing here.

1

There are 1 answers

1
Aymen On

so i did kind of this in my app ill give u instructions :

  1. use react-native-fs to get the video file base64
  2. decrypt it and store it using react-native-fs in DocumentDirectoryPath ( this path is predefined in react-native-fs )
  3. react-native-video can read base64 file so put the path directly source={{ uri: videoUrl }}

let me know if it worked for you.

cheers.