我一直致力于解决方案,将一系列jpg流式传输到客户端,并将它们显示为视频。这是为了避免全景演示中的iPad上的自动播放问题。我们不需要音频,因此我尝试查看MJPEG,但由于浏览器从不缓存流,因此它不是一个可行的解决方案,尽管它在客户端上表现非常好。
有没有人遇到类似的东西,你解决了吗?在这一点上,我有点痴迷于让它发挥作用!
到目前为止,node.js MJPEG流媒体服务器看起来像这样:
var express = require('express'),
fs = require('fs'),
http = require('http');
var app = express();
var server = http.createServer(app);
// Routes
app.use(express.static('app'));
app.get(/\.(mjpeg)$/i, function(request, res) {
var path = res.req._parsedOriginalUrl.path,
string = path.replace(/.*\\|\..*$/g, ''),
name = string.replace('/', '');
var files = fs.readdirSync('app/assets/streams/' + name + '/');
res.writeHead(200, {
'Content-Type': 'multipart/x-mixed-replace; boundary=myboundary',
'Cache-Control': 'no-cache',
'Connection': 'close',
'Pragma': 'no-cache'
});
var i = 1, id;
var stop = false;
res.connection.on('close', function() { stop = true; });
var send_next = function () {
if (stop)
return;
i = (i + 1);
// Increment with zero based number padding. (SO: ignore this, implementation specific)
if (i < 100 && i >= 10)
id = '0' + i;
else if (i < 10)
id = '00' + i;
else
id = i;
var filename = id + '.jpg';
//console.log(i, id, 'file length:', files.length, 'Path: app/assets/streams/' + name + '/' + filename);
fs.readFile('app/assets/streams/' + name + '/' + filename, function (err, content) {
res.write("--myboundary\r\n");
res.write("Content-Type: image/jpeg\r\n");
res.write("Content-Length: " + content.length + "\r\n");
res.write("\r\n");
res.write(content, 'binary');
res.write("\r\n");
// Start next in stream
setTimeout(send_next, 42);
});
// If we're at the end, reset current stream.
if (i === files.length) i = 1;
};
send_next();
});
// Setup
var port = process.env.PORT || 5000;
server.listen(port, function() {
console.log('Listening on ' + port);
});
我知道在该代码中可以进行一些优化,但它仅用于演示目的。
编辑:我正在寻找可以提供400帧(~20kb,可能是base64编码的字符串)的解决方案,然后我可以在客户端上缓存,并在连续循环中流式传输。好奇,如果其他人已经解决了类似的问题,以及如何。