CODEWITHSUNDEEP
javascripttypescripthash
jsejcksn
jsejcksn

Reputation: 33786

Calculate SHA-1 checksum of local html5 video file using JavaScript

When a video on my local storage—let's say it's currently located at file:///home/user/video.m4v—is opened by dragging it into a new tab in Chrome, how can I calculate the SHA-1 checksum for the file using JavaScript?

Purpose:
I am planning to write a Chrome extension which will store the calculated checksum of videos (files with extensions matching a pattern) as localStorage objects in order to save the playback position of video upon tab close and then restore it when the file is loaded again, even if the location or filename of the video is changed.

Upvotes: 1

Views: 1882

Answers (2)

jsejcksn
jsejcksn

Reputation: 33786

Web APIs have progressed considerably since I asked this question. Calculating a hex digest is now possible using the built-in SubtleCrypto.digest().

TS Playground link

function u8ToHex (u8: number): string {
  return u8.toString(16).padStart(2, '0');
}

/** Ref: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#supported_algorithms */
const supportedAlgorithms = [
  'SHA-1',
  'SHA-256',
  'SHA-384',
  'SHA-512',
] as const;

type SupportedAlgorithm = typeof supportedAlgorithms[number];
type Message = string | Blob | BufferSource;

async function hexDigest (
  algorithm: SupportedAlgorithm,
  message: Message,
): Promise<string> {
  let buf: BufferSource;
  if (typeof message === 'string') buf = new TextEncoder().encode(message);
  else if (message instanceof Blob) buf = await message.arrayBuffer();
  else buf = message;
  const hash = await crypto.subtle.digest(algorithm, buf);
  return [...new Uint8Array(hash)].map(u8ToHex).join('');
}

Upvotes: 2

Seika85
Seika85

Reputation: 2021

You need a crypto library for this. A well known one is Google CryptoJS.

I found this as an specific example for your task: https://gist.github.com/npcode/11282867

After including the crypto-js source:

function sha1sum() {
    var oFile = document.getElementById('uploadFile').files[0];
    var sha1 = CryptoJS.algo.SHA1.create();
    var read = 0;
    var unit = 1024 * 1024;
    var blob;
    var reader = new FileReader();
    reader.readAsArrayBuffer(oFile.slice(read, read + unit));
    reader.onload = function(e) {
        var bytes = CryptoJS.lib.WordArray.create(e.target.result);
        sha1.update(bytes);
        read += unit;
        if (read < oFile.size) {
            blob = oFile.slice(read, read + unit);
            reader.readAsArrayBuffer(blob);
        } else {
            var hash = sha1.finalize();
            console.log(hash.toString(CryptoJS.enc.Hex)); // print the result
        }
    }
}

I wouldn't recommend to calculate a hash over the whole video file as it can be pretty resource consuming depending on the file size. Maybe you can use just the meta information or reconsider about the filename and filepath again?

Upvotes: 3

Related Questions