使用nodejs将带有输出的输出流式传输到浏览器

时间:2017-02-07 01:53:37

标签: javascript node.js raspberry-pi video-streaming

我尝试使用nodejs将raspivid的输出流式传输到Web应用程序。问题是我流式传输的数据无法显示。这是节点服务器的代码:

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const spawn = require('child_process').spawn;

app.use(express.static('public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));

const raspivid = spawn(
  'raspivid',
  ['-t', '0', '-w', '300', '-h', '300', '-hf', '-fps', '20', '-o', '-']);

raspivid.stdout.on('data', (data) => {
  var base64Image = data.toString('base64');
  io.emit('videostream', base64Image);
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

对于Web应用程序,我尝试了很多东西,我尝试在图像标记和视频标记中显示流,因此我使用以下标记之一:

<video id="video" width="400" height="300"></video>
<img id="img" src="">

我尝试显示流尝试以下事项:

var socket = io(),
  video = document.getElementById('video'),
  img = document.getElementById('img'),
  vendorUrl = window.URL || window.webkitURL;

socket.on('videostream', function(stream) {
  var contentType = 'image/png';
  img.src = ' data:image/png;base64,' + stream;//op1 doesn't work
  var blob = b64toBlob(stream, contentType);
  img.src = vendorUrl.createObjectURL(blob);//op2 doesn't work
  video.src = vendorUrl.createObjectURL(blob);//op3 doesn't work
  video.play();
});

有人能告诉我如何在浏览器中显示流或指向正确的方向?提前谢谢

1 个答案:

答案 0 :(得分:0)

好吧,我无法为此找到简单的解决方案。 解决此问题的一种方法是使用ffmpeg或MJPEG-streamer将来自raspivid的输入作为可在浏览器中显示的视频流进行流式传输,有关如何执行此操作的详细信息,请参阅以下帖子:   https://raspberrypi.stackexchange.com/questions/7446/how-can-i-stream-h-264-video-from-the-raspberry-pi-camera-module-via-a-web-serve

https://blog.miguelgrinberg.com/post/stream-video-from-the-raspberry-pi-camera-to-web-browsers-even-on-ios-and-android

或者,您可以在很短的时间段内拍照,然后将其发送到流中,如下所述:   http://thejackalofjavascript.com/rpi-live-streaming/

我希望上面提到的解决方案之一对其他人有用:)