Transmitir un video desde el almacenamiento de Blob de Azure utilizando Node.js

Answer

1. 

   davy.ai

   August 4, 2023 at 11:42 pm

   Para transmitir un video almacenado en Azure Blob Storage utilizando React en el frontend, puedes utilizar el SDK de cliente JavaScript de Azure Media Services en combinación con Node.js. El SDK te permite interactuar con Azure Media Services utilizando JavaScript y se encarga del codificado y la transmisión del contenido de video.

   Primero, deberás configurar Azure Media Services y crear un punto de conexión de transmisión. Puedes encontrar instrucciones detalladas sobre cómo hacer esto en la documentación de Azure.

   Luego, instala el SDK de cliente JavaScript de Azure Media Services utilizando npm:

   npm install @azure/arm-mediaservices @azure/ms-rest-nodeauth @azure/arm-storage

   Una vez que hayas instalado el SDK, podrás utilizarlo para recuperar el archivo de video de Azure Blob Storage y comenzar a transmitirlo a tu frontend de React. Aquí tienes un ejemplo de fragmento de código:

   const { Credentials } = require("@azure/ms-rest-nodeauth");
   const { AzureMediaServices } = require("@azure/arm-mediaservices");
   const { BlobServiceClient } = require("@azure/storage-blob");
   
   // Obtén las credenciales de Azure Media Services y crea un cliente
   const credentials = new Credentials(process.env.AZURE_CLIENT_ID, process.env.AZURE_CLIENT_SECRET, process.env.AZURE_TENANT_ID, { tokenAudience: "https://rest.media.azure.net/" });
   const client = new AzureMediaServices(credentials, process.env.AZURE_SUBSCRIPTION_ID);
   
   // Obtén la URL del archivo de video en Azure Blob Storage
   const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);
   const containerClient = blobServiceClient.getContainerClient(process.env.AZURE_CONTAINER_NAME);
   const blobClient = containerClient.getBlobClient(process.env.AZURE_BLOB_NAME);
   const blobUrl = blobClient.url;
   
   // Crea un localizador para el punto de endpoint de transmisión
   const locator = await client.assets.createLocator(process.env.AZURE_RESOURCE_GROUP_NAME, process.env.AZURE_ACCOUNT_NAME, process.env.AZURE_ASSET_NAME, "OnDemandOrigin", "locatorName", { type: "Origin", startTime: null, endTime: null });
   
   // Construye la URL para el punto de endpoint de transmisión y pásala al frontend de React
   const streamingEndpointUrl = `https://${process.env.AZURE_ACCOUNT_NAME}.vo.msecnd.net/${locator.streamingLocatorId}/${process.env.AZURE_ASSET_NAME}.ism/manifest(format=m3u8-aapl)`;
   

   En este código, primero te autenticas con Azure Media Services utilizando tus credenciales. Luego, recuperas la URL del archivo de video desde Azure Blob Storage y creas un localizador de transmisión para el video. Finalmente, construyes la URL para el punto de endpoint de transmisión y la pasas a tu frontend de React.

   Ahora puedes utilizar esta URL para transmitir el video en tu aplicación de React utilizando una biblioteca de reproductor de video de terceros como react-player o video.js.

Comments are closed.