Creating a live video stream with Node.js, Socket.io and P5.js

Question

I'm trying to create a simple video stream on the local network. However, the current code throws the following error:

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

It seems that the createCapture object I'm receiving is different than the one I'm sending, hence why it can't be displayed. Could someone point out how to solve this?

Thanks, Charles

Server.js

var express = require('express');
// Create the app
var app = express();

// Set up the server
// process.env.PORT is related to deploying on heroku
//var server = app.listen(3000);

var server = app.listen(3000, '0.0.0.0', function() {
    console.log('Listening to port:  ' + 3000);
  });

app.use(express.static('public'));

// WebSocket Portion
// WebSockets work with the HTTP server
var socket = require('socket.io');

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
var io = socket(server);

io.sockets.on('connection', newConnection);

function newConnection(socket){
    console.log("New connection: " + socket.id);

    socket.on('camera', newFrame);

    function newFrame(data){
        socket.broadcast.emit('camera', data);
        // for(var propertyName in data) {
        //  console.log(propertyName);
        // }
        //console.log(data.elt);
    }
}

Sketch.js

var socket;
var capture;

function setup() {
  createCanvas(innerWidth, innerHeight);
  background(0);

  capture = createCapture(VIDEO);
  capture.hide();

  socket = io.connect("http://localhost:3000");

  socket.on('camera', newFrame);
  noStroke();
}

function newFrame(data){
    image(data, 0, 0, 640, 320);
}


function draw() {
  socket.emit('camera', capture);
}

Answer 1

You should pass capture as a parameter of your draw() function. This way you can make sure you are using the same capture variable!

function draw(capture) {
    socket.emit('camera', capture); }