Video Stream with Noje.js and Socket.io

CharlesDesign

Hi All,

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)'

Could someone point out what I'm doing wrong?

Thanks in advance, 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);
}

CharlesDesign

Any ideas? It seems the video object is actually being changed in the transfer process.