I am capturing various data using a Kinect and to output my color video stream i am drawing onto a HTML5 canvas through CTX for each frame:

const renderColorFrame = (ctx, canvasImageData, newPixelData) => {
  const pixelArray = canvasImageData.data;
  for (let i = 0; i < canvasImageData.data.length; i++) {
    pixelArray[i] = newPixelData[i];
  }
  ctx.putImageData(canvasImageData, 0, 0);
};

I would then like to add this Canvas onto a texture in a Three.JS 3D canvas. However, passing the canvas directly onto the texture does not work. Instead I am outputting the Canvas onto a Video tag and then passing it into the Three.JS canvas.

// Set the video as the RGB Canvas output
const rgbVideo = document.getElementById('rgbVideo');
const stream = $rgbCanvas.captureStream();
rgbVideo.srcObject = stream;

Problem is this is really inefficient and creates significant delays in the video stream itself.

I would like to pass the canvas directly onto the texture (and have it update on each frame), however I cannot find any information if this is possible. Is there anyone who have solved a similar issue?

Here's the way I append the video stream texture onto the plane in the Three.js canvas:

var scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(1080, 720);

document.body.appendChild(renderer.domElement);

//get video feed from html element in index.html and convert to texture
const texture = new THREE.VideoTexture(rgbVideo);


// Create background plane.
const geometry = new THREE.PlaneGeometry(9,5);
const plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: texture }))
plane.position.z = -3
scene.add(plane)