Posted on Sep 10, 2023

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 };