I want to generate a hash for a given video, in a react native app

Question

I have a video file which has been recorded from the React-native App. Now I want to generate a digital signature, or a hash for this video file, and associate it to the blockchain. Is there any way I can create a hash for the video file in the React-native App?

Answer 1

You can use react-native-fetch-blob and js-sha3 module

After encoding your video file to base64, you can encrypt the base64 value using the hash module.

import RNFetchBlob from 'react-native-fetch-blob'
sha3_256 = require('js-sha3').sha3_256;
...

let data = ''
let hashdata = '';
RNFetchBlob.fs.readStream(
    // file path
    PATH_TO_THE_FILE,
    // encoding, should be one of `base64`, `utf8`, `ascii`
    'base64',
    // (optional) buffer size, default to 4096 (4095 for BASE64 encoded data)
    // when reading file in BASE64 encoding, buffer size must be multiples of 3.
    4095)
.then((ifstream) => {
    ifstream.open()
    ifstream.onData((chunk) => {
      // when encoding is `ascii`, chunk will be an array contains numbers
      // otherwise it will be a string
      data += chunk
    })
    ifstream.onError((err) => {
      console.log('oops', err)
    })
    ifstream.onEnd(() => {  
     hashdata = sha3_256(data); // Convert Data to Hash Value
    })
})

If use Expo

import * as DocumentPicker from 'expo-document-picker';
import * as FileSystem from 'expo-file-system';
sha3_256 = require('js-sha3').sha3_256;
const response: IDocumentPickerResponse = await DocumentPicker.getDocumentAsync({
    copyToCacheDirectory: false,
    type: '*/*',
});
const file: string = await FileSystem.readAsStringAsync(
    response.uri,
    {
        encoding: FileSystem.EncodingTypes.Base64,
    });
const hashdata = sha3_256(file); // Convert Data to Hash Value

Answer 2

You can use rnfs to hash files directly from storage.

You also can use a small package i wrote, react-native-hash, to hash directly from a URL, File or strings, how ever, it only works on Android for now.

Answer 3

Simply use the file system built in function

import * as FileSystem from 'expo-file-system';

let fileInfo = await FileSystem.getInfoAsync(localUri, [{md5: true}]);
            //Display file info for localUri
            console.log(fileInfo.md5);