Question

我从python opencv获取图像，然后我想以浏览器上的视频流的形式向用户显示图像。图像按顺序显示。我在python Flask中使用“ multipart / x-mixed-replace”进行此操作，但在节点js上找不到相同的功能。

Answer 1

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>


</head>
<body>
<img id="image">
<script>

    const socket = io.connect('http://localhost:3000');
    socket.on('image', (image) => {
        const imageElement = document.getElementById('image');

        console.log(imageElement);


        imageElement.src = `data:image/jpeg;base64,${image}`;


    });


</script>
</body>
</html>

// server.js

const express = require('express');
const cv = require('opencv4nodejs');
const app = express();

const path = require('path');
const FPS = 30;
const server = require('http').Server(app);
const io = require('socket.io')(server);



const wCap = new cv.VideoCapture(0);

app.get('/', function (req, res) {
    res.sendFile('index.html', {root: __dirname});
});


setInterval(() => {
    const frame = wCap.read();
    const image = cv.imencode('.jpg', frame).toString('base64');

    io.emit('image', image)
}, 1000/FPS);
server.listen(3000);

节点js从图像序列创建视频流

1 个答案: