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.
Top comments (0)