I get images from python opencv then I want show images to user as video stream on browser. Images came on sequence. I do this in python Flask with "multipart/x-mixed-replace" but I can`t find same function on node js.
1 Answer
//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);