📜  如何创建一个简单的 http 服务器监听 3000 端口来提供视频服务?

📅  最后修改于: 2022-05-13 01:56:26.421000             🧑  作者: Mango

如何创建一个简单的 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/

输出