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);
    // you can set the RGB or create shader effects.
    col = col*vec4(1.0,1.0,1.0,1.0);
    gl_FragColor = vec4(col);
}
`
var scene;
var camera;
var renderer;
var geometry;
var video;
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() {
  // VIDEO
  video = document.getElementById('video');
  var texture = new THREE.VideoTexture(video);
  var videomaterial = new THREE.MeshBasicMaterial({
    map: texture
  });

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

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

  update();
  onWindowResize();

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

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

    var constraints = {
      video: {
        width: 50,
        height: 50,
        facingMode: 'user'
      }
    };
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
      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();
  // this resize camera image
  renderer.setSize(window.innerWidth/2, window.innerHeight);
}

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