Node.js 如何构建视频流应用程序

在本文中，我们将创建一个视频流应用程序。视频流应用程序用于流式传输或播放视频，就像一个简单的视频播放器。

功能： 播放视频

方法： 我们将使用express进行此项目，并创建一个服务器文件app.js，然后我们将创建一个包含指向服务器文件（app.js）中 videoplayer 路由的视频链接的HTML文件index.html。在服务器文件中，我们将将index.html发送到主页，然后我们将使用不同类型的内置模块来完全设置服务器文件中的视频播放器路由。

实现： 以下是上述方法的逐步实现。

步骤1：项目设置

初始化NPM： 在终端中创建和定位您的项目文件夹，然后输入以下命令。

npm init -y

它初始化我们的节点应用程序并生成一个package.json文件。

安装依赖项： 将您的根项目目录定位到终端，并输入以下命令

npm install express

在您的项目中将Express安装为依赖项

创建服务器文件： 创建一个’app.js’文件，在该文件中引入Express模块和文件系统模块，并创建一个常量’app’来创建Express模块的一个实例。

const express = require('express');
const fs = require('fs');
const app = express();

步骤2：设置主页

创建Index.html文件： 让我们创建一个简单的HTML文件，在body标签内部包含一行文本，用于设置视频路径和视频的宽度。我们将视频路径设置为 “videoplayer” ，然后在第三步中，我们将在服务器文件（app.js）中设置这个 “videoplayer” 请求来流式传输视频。
index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Video Player</title> 
</head> 
<body> 
    <video src="/videoplayer" width="1080px" 
           controls></video> 
</body> 
</html>

将文件发送到主页： 现在为首页创建一个GET请求，只需将此index.html文件发送到浏览器。

app.get('/', (req, res) => {
   res.sendFile(__dirname + '/index.html');
})

步骤3：设置videoplayer路由： 现在为videoplayer创建一个GET请求。

app.get('/videoplayer', (req, res) => {

})

在这个路径内，按照以下步骤进行。

创建一个 const range： 这个范围包含我们从头部获取的范围值。

const range = req.headers.range

设置视频路径： 这里我们需要创建一个常量 videoPath，并将其设置为视频文件的位置。

const videoPath = pathOfVideo

将 pathOfVideo 替换为您的视频文件的位置。

设置视频大小： 现在我们必须使用 fs 模块的 statSync 方法，传递视频路径，然后计算大小。

const videoSize  = fs.statSync(videoPath).size

设置块大小： 您只需要使用以下代码来设置在Node.js中流式传输的块大小。

const chunkSize = 1 * 1e6;

创建常量 start 和 end： 用于计算视频的起始和结束位置。

const start = Number(range.replace(/\D/g, ""))
const end = Math.min(start + chunkSize, videoSize - 1)

计算内容的长度并将其设置为一个变量：

const contentLength = end - start + 1;

设置播放视频的头部：

const headers = {
    "Content-Range" : `bytes {start}-{end}/${videoSize}`,
    "Accept-Ranges" : "bytes",
    "Content-Length" : contentLength,
    "Content-Type" : "video/mp4"
}

res.writeHead(206, headers)

创建视频流并将其与响应一起传递：

const stream = fs.createReadStream(videoPath, {start, end})

stream.pipe(res)

完整代码：

以下是使用Node.js构建笔记应用的完整代码：

app.js

const express = require('express'); 
const fs = require('fs'); 
const app = express(); 
  
app.get('/', (req, res) => { 
    res.sendFile(__dirname + '/index.html'); 
}) 
  
app.get('/videoplayer', (req, res) => { 
    const range = req.headers.range 
    const videoPath = './video.mp4'; 
    const videoSize = fs.statSync(videoPath).size 
    const chunkSize = 1 * 1e6; 
    const start = Number(range.replace(/\D/g, "")) 
    const end = Math.min(start + chunkSize, videoSize - 1) 
    const contentLength = end - start + 1; 
    const headers = { 
        "Content-Range": `bytes {start}-{end}/${videoSize}`, 
        "Accept-Ranges": "bytes", 
        "Content-Length": contentLength, 
        "Content-Type": "video/mp4"
    } 
    res.writeHead(206, headers) 
    const stream = fs.createReadStream(videoPath, { 
        start, 
        end 
    }) 
    stream.pipe(res) 
}) 
app.listen(3000);

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Video Player</title> 
</head> 
<body> 
    <video src="/videoplayer" width="1080px" 
           controls></video> 
</body> 
</html>