[英]Node.js / Express video streaming (HTTP 206 Partial Content)
我在數據庫(MarkLogic)中有一個二進制文件(mp4視頻文件)。 我正在使用數據庫的Node.js API以塊的形式傳輸文檔。 設置如下所示:
html文件
<video controls="controls" width="600">
<source src="/video/myvideo.mp4" type="video/mp4">
</video>
然后在Express中我設置了一個處理/ video /:param路由的路由(在數據庫中,視頻有唯一的標識符,即字符串'/video/myvideo.mp4')
的node.js
// I'm only showing the relevant things in here
const serveVideo = (req, res) => {
var stream = db.documents.read('/gopro/malta.mp4').stream('chunked');
var chunks = [];
var chunkBytes = 0;
var start = 0;
stream.on('data', (chunk) => {
var headers;
var range = req.headers.range;
var total = 214335483; //total length of vid in bytes
if (range) {
var chunkSize = chunk.length;
// (start === 0) ? start = 0 : start += chunkBytes;
if (chunkBytes === 0) {
start = 0
} else {
start = chunkBytes + 1
}
chunkBytes += chunkSize;
headers = {
'Content-Range': 'bytes ' + start + '-' + chunkBytes + '/' + total,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': 'video/mp4'
};
res.writeHead(206, headers);
chunks.push(chunk);
}
});
stream.on('end', () => {
var allChunks = Buffer.concat(chunks);
res.end(allChunks);
});
});
router.route('/video/:uri').get(serveVideo);
當然,上面的錯誤是“錯誤:發送后無法設置標頭”。 這都是公平的。 但我無法理解這一點 - .stream('chunked')調用強制數據庫以塊的形式檢索文檔,我確實看到那些塊很好,但是如何為瀏覽器返回206呢? 我無法在.on('data')中執行此操作,因為數據正在流式傳輸,因此標頭將被多次發送。 我想我正在使用的數據庫並不是真正相關的 - 我想理解這個概念,或者至少看看我做錯了什么。
任何幫助表示贊賞。 我見過的所有使用Node.js流視頻的示例和其他討論都是從磁盤讀取視頻文件。
更新
現在更改代碼允許FF播放視頻而不是Chrome:
let stream = db.documents.read({uris:'/gopro/malta.mp4'}).stream('chunked');
stream.pipe(res);
Chrome控制台中沒有錯誤。 以下是標題詳細信息 - 請注意,mp4文件有兩個請求:
1
Response Headers
Connection:keep-alive
Date:Sat, 21 May 2016 17:05:30 GMT
Transfer-Encoding:chunked
X-Powered-By:Express
Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8,hu;q=0.6,ro;q=0.4,it;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Cookie:__distillery=v20150227_a8e22306-65b3-4c2e-9a8a-159e308156ad; __smToken=7nYU8NYQY15mPowjjCZsS5D3
DNT:1
Host:localhost:8080
Pragma:no-cache
Range:bytes=0-
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
第2
Response Headers
Connection:keep-alive
Date:Sat, 21 May 2016 17:05:31 GMT
Transfer-Encoding:chunked
X-Powered-By:Express
Request Headers
view source
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-US,en;q=0.8,hu;q=0.6,ro;q=0.4,it;q=0.2
Cache-Control:no-cache
Connection:keep-alive
Cookie:__distillery=v20150227_a8e22306-65b3-4c2e-9a8a-159e308156ad; __smToken=7nYU8NYQY15mPowjjCZsS5D3
DNT:1
Host:localhost:8080
Pragma:no-cache
Range:bytes=28-
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.102 Safari/537.36
on('data')回調可以始終對isFirstChunk變量進行閉包,該變量初始化為true,並且如果isFirstChunk為true,則測試將發出標頭並將isFirstChunk設置為false。
如果可能的話,最好管道流。 npm可能會提供一個流庫(甚至可能是to2()?),它在第一個數據到達時有一個事件。
從長遠來看,您可以合理地在流的開頭為事件提交RFE。
希望有所幫助,
你很可能不需要所有大塊的東西。 手動設置標頭:
res.status(206);
然后只需管道響應:
let stream = db.yourChunkStuff();
stream.pipe(res);
最簡單的方法是管道流。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.