使用Node.js，Socket.io和P5.js创建实时视频流

Question

我正在尝试在局域网上创建一个简单的视频流。 但是，当前代码将引发以下错误：

未捕获的TypeError：无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或ImageBitmap或OffscreenCanvas）类型的值

似乎我正在接收的createCapture对象与我正在发送的对象不同，因此为什么无法显示该对象。 有人可以指出如何解决这个问题吗？

谢谢查尔斯

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

您应该将capture作为您的draw()函数的参数传递。 这样，您可以确保使用相同的capture变量！

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