title: Play video using base64 encoded string in React-Native
body: <p>I have encrypted a video file using base64 encoding format and AES-encryption. I decrypt data stream-by-stream and append/write each stream (as a .mp4 file) to achieve the final video but it takes a lot of time to achieve a final output.</p>
  
  <p><strong>Major Edit:</strong> </p>
  
  <p>I have found resources <a href="https://iandevlin.com/blog/2012/09/html5/html5-media-and-data-uri/" rel="noreferrer">html5-media-and-data-uri</a> which helps to play data in a <code>webview</code>, but it doesn't play videos with 2,000,000+ base64 characters.</p>
  
  <blockquote>
    <p>Function to decrypt a file and initialize HTML code within web view with base64 data</p>
  </blockquote>
  
  <pre><code>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 =&gt; {
      let data = "";
      stream.open();
      stream.onData(chunk =&gt; {
        var decipherText = simpleCrypto.decrypt(chunk.toString()); // Decryption
        decryptText = decryptText + decipherText; // appending decrypted data
      });
      stream.onEnd(() =&gt; {
        htmlCode =
          `&lt;html&gt;
             &lt;body&gt;
                &lt;video style="width: 50%; height: 50%; margin-top: 10%; margin-left: 22%;"
                controls&gt;
                  &lt;source type="video/mp4" src="data:video/mp4;base64,` +
                   decryptText.toString() + // final decrypted data
                  `"&gt;
               &lt;/video&gt;
            &lt;/body&gt;
          &lt;/html&gt;`;
        this.setState({ playvideo: !this.state.playvideo }); // state set for playing video at end of decryption
        console.log("File decrypted");
      });
    });
  }
  </code></pre>
  
  <blockquote>
    <p>Web View Code</p>
  </blockquote>
  
  <pre><code>&lt;WebView
       style={{ flex: 1 }}
       source={{ html: htmlCode }}
   /&gt;
  </code></pre>
  
  <p><strong>Need help in finding ways/alternatives to play videos from base64 in react-native.</strong> </p>
  
  <p>This is an Offline e-learning app where videos are stored on SD-CARD and data is decrypted on the fly and played in a video player.</p>