DEV Community

Utkarsh212
Utkarsh212

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

Installing the necessary dependencies

npm install react-webcam react-media-recorder @azure/storage-blob
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series