基于Node实现视频流播放

[YIngChenIt]

基于Node实现视频流播放

我们首先起一个简单的服务，将视频通过流的方式返回

const http = require('http')
const fs = require('fs')
const videoPath = './video.mp4'

http.createServer((req, res) => {
    if (req.url === '/') {
        res.writeHead(200, { 'Content-type': 'text/html' })
        res.end(
            `<video src="/video" width="500" controls="controls"></video>`
        )
    } else if (req.url === '/video') {
        fs.createReadStream(videoPath).pipe(res)
    }
}).listen(3000, () => {
    console.log('serve start')
})

当我们访问 http://localhost:3000/的时候我们发现视频是可以播放的，但是不可以点击拖拽进度

我们修改一下代码

const http = require('http')
const fs = require('fs')
const videoPath = './video.mp4'
const { stat } = require('fs').promises

http.createServer(async (req, res) => {
    if (req.url === '/') {
        res.writeHead(200, { 'Content-type': 'text/html' })
        res.end(
            `<video src="/video" width="500" controls="controls"></video>`
        )
    } else if (req.url === '/video') {
        const range = req.headers['range']
        if (range) {
            const stats = await stat(videoPath)
            const r = range.match(/=(\d+)-(\d+)?/)
            const start = parseInt(r[1], 10)
            let end = r[2] ? parseInt(r[2], 10) : start + 1024*1024
            if (end > stats.size - 1) {
                end = stats.size - 1
            }
            const head = {
                'Content-Type': 'video/mp4',
                'Content-Range': `bytes ${start} - ${end} / ${stats.size}`,
                'Content-Length': end - start + 1,
                'Accept-Ranges': 'bytes'
            }
            res.writeHead(206, head)
            fs.createReadStream(videoPath, { start, end }).pipe(res)
        } else {
            fs.createReadStream(videoPath).pipe(res)
        }
    }
}).listen(3000, () => {
    console.log('serve start')
})

这样的话就可以每次返回1M给页面，实现进度条拖拽的方式了