Podemos servir video al navegador/front-end usando nodeJS con la ayuda de » express » y el sistema de archivos incorporado de nodeJS » fs «. Aquí usaríamos la etiqueta de video HTML para ver el video en la página web. Usaríamos express para fines de enrutamiento. Enviaríamos los bytes de video creando un flujo de lectura y canalizando el Objeto res hacia él. Veamos paso a paso.
Paso 1: Cree un archivo » app.js » e inicialice el proyecto con npm. Además, mantenga el archivo de video que desea transmitir en la misma carpeta.
npm init
Paso 2: ahora instale Express y cree el archivo » index.html «.
npm install express
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Aquí » Bienvenido a GeeksforGeeks.mp4 » es el archivo mp4 que queremos transmitir.
Paso 3: Codifiquemos ahora el archivo » app.js «. La solicitud GET a ‘ /stream ‘ envía el video como un flujo legible. La raíz de la aplicación carga el archivo “index.html”. Usamos la función res.writeHead() para enviar el mensaje de estado como 200, lo que significa que está bien y el tipo de contenido es mp4/video. Ahora crearíamos una secuencia de lectura usando la función fs.createReadStream() para enviar el video como la secuencia legible para la etiqueta de video HTML.
app.js
// Requiring express for routing
const express = require('express')
// Creating app from express
const app = express()
// Requiring in-built file system
const fs = require('fs')
// GET request which HTML video tag sends
app.get('/stream',function(req,res){
// The path of the video from local file system
const videoPath = 'Welcome-To-GeeksforGeeks.mp4'
// 200 is OK status code and type of file is mp4
res.writeHead(200, {'Content-Type': 'video/mp4'})
// Creating readStream for th HTML video tag
fs.createReadStream(videoPath).pipe(res)
})
// GET request to the root of the app
app.get('/',function(req,res){
// Sending index.html file for GET request
// to the root of the app
res.sendFile(__dirname+'/index.html')
})
// Creating server at port 3000
app.listen(3000,function(req,res){
console.log('Server started at 3000')
})
Paso 4: Ahora codificaremos el archivo “ index.html ”. Aquí estamos usando el atributo de controles para proporcionar varios controles de reproductor multimedia en la etiqueta de video. Y la reproducción automática es un atributo booleano por el cual el video automáticamente comienza a reproducirse tan pronto como puede hacerlo sin detenerse para terminar de cargar los datos. El atributo src de la etiqueta de video HTML es ‘/stream’ como se define en el archivo app.js.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <title>Video Stream</title> </head> <body> <!-- autoplay: A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data --> <video controls autoplay width="500px" height="500px"> <!-- GET request to the stream route --> <source src="/stream" type="video/mp4" /> </video> </body> </html>
Paso 5: ahora ejecuta la aplicación usando
node app.js
Salida: Dirígete a tu navegador e ingresa http://localhost:3000/
Producción
Publicación traducida automáticamente
Artículo escrito por devrajkumar1903 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA