问题描述
嘿,我一直在寻找简单的视频API已有很长时间了。我想在一个简单的页面上流式传输视频并将其实现到我的html中。有什么建议可以使我工作吗?
解决方法
我们可以使用 HTTP range requests
和 Node.js 中 fs
模块的流 API 来创建视频流 API。
HTTP 范围请求只允许从服务器向客户端发送 HTTP 消息的一部分。例如,部分请求对于大型媒体或下载具有暂停和恢复功能的文件很有用。
我们将使用 http
模块在 Node.js 中创建一个简单的服务器,并使用 promisify
实用程序将回调转换为来自 fs module
的承诺。
通过 Range Requests,我们可以控制要发送给客户端的数据量。在下面的示例中,我们只是查找范围标头,如果它们存在,我们可以从 range header
解析开始和结束字节,我们将只发送文件的那部分。
我们将创建文件的读取流并将其通过管道传输到 res
(http.ServerResponse
是可写流)。
const { createServer } = require('http');
const path = require('path');
const { promisify } = require('util');
const { stat,createReadStream } = require('fs');
const fileInfo = promisify(stat);
const filename = './streams/test-video.mp4';
createServer( async (req,res) => {
const { size } = await fileInfo(filename);
const fileExtension = path.extname(filename).replace('.','');
const { range } = req.headers;
if (range) {
let [start,end] = range.replace(/bytes=/,'').split('-')
start = parseInt(start,10); // starting bytes
// end = end ? parseInt(end,10) : size - 1 // end of file unless specified
end = Math.min(start + 5000,size - 1); // 5000 bytes starting from start byte or end of file,whichever is smaller
res.writeHead(206,{ // HTTP 206 - Because it is Partial Content
'Content-Range': `bytes ${start}-${end}/${size}`,'Accept-Ranges': 'bytes','Content-Length': (end - start) + 1,// denotes the number of bytes requested and not the entire file size
'Content-Type': `video/${fileExtension}`,});
createReadStream(filename,{ start,end }).pipe(res);
} else {
res.writeHead(200,{
'Content-Type': `video/${fileExtension}`,'Content-Length': size,});
createReadStream(filename).pipe(res);
}
}).listen(3000,() => {
console.log('Server listening on port 3000');
})