JSFiddle - React, Tailwind, and code Playground

HTML

<div id='container'>
	<div class="item">
		<h1>Video</h1>
		<video autoplay id='video'></video>
	</div>
	<div class="item">
		<h1>Canvas</h1>
		<canvas id="canvas"></canvas>
	</div>
</div>

CSS

.container {
  display: grid;
  grid-column-gap: 50px;
}
.item {
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

JavaScript

/* import * as THREE from 'three'; */

var video = document.getElementById('video');
var myCanvas = document.getElementById('canvas')


navigator.mediaDevices.getUserMedia({
    video: {
      width:     500,
      height:    500,
    }
  }
).then(function(stream) {
  let video = document.querySelector('video');
  video.srcObject = stream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
}).catch(function(err) {
  // deal with an error (such as no webcam)
});

var canvas = document.getElementById('canvas');
//var context = canvas.getContext('2d');

function renderFrame() {
  // re-register callback
  requestAnimationFrame(renderFrame);
  // set internal canvas size to match HTML element size
  canvas.width  = 500;
  canvas.height = 500 ;
  if (video.readyState === video.HAVE_ENOUGH_DATA) {
    //context.drawImage(video, 0, 0, canvas.width, canvas.height);
  }
}
requestAnimationFrame(renderFrame);

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

var renderer = new THREE.WebGLRenderer( { canvas: myCanvas } );
renderer.setSize( 500, 500 );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
};
render();