如何创建一个简单的 http 服务器监听 3000 端口来提供视频服务?
借助“ express ”和内置的nodeJS文件系统“ fs ”,我们可以使用nodeJS向浏览器/前端提供视频。在这里,我们将使用 HTML video 标签来查看网页上的视频。我们将使用 express 进行路由。我们将通过创建一个读取流并将 res 对象传送给它来发送视频字节。让我们一步一步来。
第 1 步:创建一个“ app.js ”文件并使用 npm 初始化项目。此外,将要流式传输的视频文件保存在同一文件夹中。
npm init
第 2 步:现在安装 express 并创建“ index.html ”文件。
npm install express
项目结构:它将如下所示。
这里的“ Welcome-To-GeeksforGeeks.mp4 ”是我们要流式传输的 mp4 文件。
第 3 步:现在让我们编写“ app.js ”文件。对“ /stream ”的 GET 请求将视频作为可读流发送。应用程序的根目录加载“index.html”文件。我们使用 res.writeHead()函数将状态消息发送为 200,表示 OK,内容类型为 mp4/video。我们现在将使用 fs.createReadStream()函数创建一个读取流,以将视频作为 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')
})
index.html
Video Stream
第 4 步:现在我们将编写“ index.html ”文件。在这里,我们使用controls属性在 video 标签中提供各种媒体播放器控件。自动播放是一个布尔属性,通过该属性,视频会在可以播放时自动开始播放,而不会停止完成数据加载。 HTML 视频标签的src属性是 app.js 文件中定义的“/stream”。
索引.html
Video Stream
第 5 步:现在使用
node app.js
输出:转到您的浏览器并输入 http://localhost:3000/