Uploading Javascript Blob Objects to Azure Blob Storage from a React Application

This post will teach us how to connect Azure Blob storage directly from a react.js application and upload files and blob objects to Azure Blob storage.

About the Application

• In this application, we aim to record a video through the device's webcam and then upload that recorded data to Azure Blob storage in mp4 file format.
• To capture the video from the webcam, we used the react-media-recorder package, and for accessing the Azure blob storage, we used the @azure/storage-blob package.
• The recorded video stream is stored as a javascript blob object, and the package provides access to that stream in the form of a blob URL after the recording is stopped.
• We used this blob object as our dummy data, but you can upload whatever files or data you want.

Prerequisites

• You must have access to a azure storage account with role of "Storage Blob Data Contributor".
• The name of the storage account and the container in which you want to store the files.
• The SAS(Shared Access Signatures) Token to provide secure, delegated access to resources in your Azure storage account.

Setting up the Application

Creating a new react application

npx create-react-app recorder
cd recorder

Installing the necessary dependencies

npm install react-webcam react-media-recorder @azure/storage-blob

Setting up the recorder component

We will use the react-media-recorder package to record the webcam of the device. It provides built-in access to helper functions to start, pause and stop the recording and a set of properties like status, mediaBlobUrl and previewStream to access and manage the recorded data.

import React, { useState } from 'react'
import Webcam from 'react-webcam'
import { ReactMediaRecorder } from 'react-media-recorder'
import { uploadVideoToBlob} from './azureUtils'


function App() {
  return (
    <div>
      <ReactMediaRecorder
        video
        onStop={async (blobUrl) => {

          // used to fetch binary data from a URL (specified by blobUrl
          const blobData = await fetch(blobUrl).then((res) => res.blob())
          const reader = new FileReader()

          // read that data as an array buffer
          reader.readAsArrayBuffer(blobData)

          // uploading to azure blob storage once the data is successfully loaded
          reader.onloadend = async () => {
            const arrayBuffer = reader.result
            uploadVideoToBlob(arrayBuffer, (new Date()).toISOString(), "video/mp4")
          }
        }}
        render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
          <div>
            <Webcam className='webcam-container' />
            <button onClick={startRecording}>Start Recording</button>
            <button onClick={stopRecording}>Stop Recording</button>
            {status}
          </div>
        )}
      />
    </div>
  )
}

export default App

The App component renders a ReactMediaRecorder component, which is used to record video. The App component also renders a Webcam component, which is used to display the webcam feed.

Here mediaBlobUrl is the URL provided by the react-media-recorder to access the blob object.

Uploading the recorded content to Azure Blob storage

import { BlobServiceClient } from "@azure/storage-blob";

// The name of the Azure Storage account.
const storageAccountName = "YOUR_STORAGE_ACCOUNT_NAME";

// The SAS token for the Azure Storage account.
const sasToken = "YOUR_SAS_TOKEN";

// The name of the Azure Storage container.
const containerName = "YOUR_STORAGE_ACCOUNT_CONTAINER_NAME";

/**
 * Uploads a video to an Azure Storage blob.
 *
 * @param arrayBuffer The video data as an ArrayBuffer.
 * @param fileName The name of the blob. Defaults to "output".
 */
const uploadVideoToBlob = async (arrayBuffer, fileName = "output", contentType = "application/octet-stream") => {
    try {
        // Create a new Blob object from the ArrayBuffer.
        const blob = new Blob([arrayBuffer]);

        // Create a new BlobServiceClient object with the storage account name and SAS token.
        const blobService = new BlobServiceClient(`https://${storageAccountName}.blob.core.windows.net/?${sasToken}`);

        // Get the container client for the specified container.
        const containerClient = blobService.getContainerClient(containerName);

        // Get the size of the blob.
        const contentLength = blob.size;

        // Upload the blob to the container.
        await containerClient.uploadBlockBlob(fileName, blob, contentLength, {
            // Set the blob content type.
            blobHTTPHeaders: {
                blobContentType: contentType,
            },
        });
    } catch (error) {
        console.error("Error uploading blob:", error);
    }
};

// Export the uploadVideoToBlob function.
export { uploadVideoToBlob };

Here, we are explicitly setting the blobContentType to video/mp4, but you can set it as per your file type.

Thank you for reading! Be sure to send your questions and suggestions here.