Javascript 无法将网络摄像头作为纹理加载到three.js中的着色器中

我正在尝试将我的网络摄像头作为纹理加载到three.js中。只要将普通图像作为纹理加载到着色器中，它就可以正常工作，但一旦加载网络摄像头，它就会变黑。 我想这和我装相机的方式有关

以下是代码笔的链接：

这是我的密码：

const vshader = `
varying vec2 vUv;
    
void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`;

const fshader = `
varying vec2 vUv;
uniform sampler2D tex;

void main() {
    vec4 col = texture2D(tex, vUv);
    // vec3 col = vec3(1., 0., 1.);
    gl_FragColor = vec4(col);
}
`
var scene;
var camera;
var renderer;
var geometry, material;
var video;
var loader;
var plane;

function sceneSetup() {

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, 1, 1000);

  camera.position.z = 2;
  loader = new THREE.TextureLoader();

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

function bufferTextureSetup() {
  // TEXTURE WORKS FINE
  const iChannel1 = loader.load('https://i.imgur.com/jlFgGpe.jpg');

  // VIDEO
  video = document.getElementById('video');
  var texture = new THREE.VideoTexture(video);
  var geometry = new THREE.PlaneBufferGeometry(16, 9);

  geometry.scale(0.5, 0.5, 0.5);
  var videomaterial = new THREE.MeshBasicMaterial({
    map: texture
  });

  // 1 Shader
  material = new THREE.ShaderMaterial({
    uniforms: {
      tex: {
        type: "t",
        value: iChannel1
      },
    },
    vertexShader: vshader,
    fragmentShader: fshader,
    wireframe: false
  });
  plane = new THREE.PlaneBufferGeometry(window.innerWidth, window.innerHeight);

  const box = new THREE.Mesh(plane, material);
  scene.add(box);

  update();

  onWindowResize();

  window.addEventListener('resize', onWindowResize, false);

  // load video
  if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

    var constraints = {
      video: {
        width: 1280,
        height: 720,
        facingMode: 'user'
      }
    };

    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {

      // apply the stream to the video element used in the texture
      video.srcObject = stream;
      video.play();

    }).catch(function (error) {
      console.error('Unable to access the camera/webcam.', error);

    });

  } else {

    console.error('MediaDevices interface not available.');

  }

}

sceneSetup();
bufferTextureSetup();

function onWindowResize(event) {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

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