使用 nodejs 将 raspivid 输出流式传输到浏览器
stream raspivid output with nodejs to a browser
我正在尝试将 raspivid 的输出流式传输到带有 nodejs 的 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();
});
谁能告诉我如何在浏览器中显示流或指出正确的方向?提前致谢
好吧,我找不到简单的解决方案。
解决这个问题的一种方法是使用 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
或者,您可以在短时间内拍摄照片,然后像此处更好地描述的那样以流的形式发送它们:
http://thejackalofjavascript.com/rpi-live-streaming/
我希望上述解决方案之一对其他人有用:)
我正在尝试将 raspivid 的输出流式传输到带有 nodejs 的 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();
});
谁能告诉我如何在浏览器中显示流或指出正确的方向?提前致谢
好吧,我找不到简单的解决方案。 解决这个问题的一种方法是使用 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
或者,您可以在短时间内拍摄照片,然后像此处更好地描述的那样以流的形式发送它们: http://thejackalofjavascript.com/rpi-live-streaming/
我希望上述解决方案之一对其他人有用:)