JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<video id="video" style="display:none" autoplay playsinline></video>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";


let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 16);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let g = new THREE.PlaneGeometry(16, 9, 80, 45);

let video = document.getElementById('video');

const texture = new THREE.VideoTexture(video);

let m = new THREE.PointsMaterial({
  map: texture,
  size: 0.3,
  onBeforeCompile: shader => {
    shader.vertexShader = `
    	varying vec2 vUv;
      ${shader.vertexShader}
    `.replace(
      `#include <begin_vertex>`,
      `#include <begin_vertex>
      	vUv = uv;
      `
    );
    console.log(shader.vertexShader);
    shader.fragmentShader = `
    	varying vec2 vUv;
    	${shader.fragmentShader}
    `.replace(
      `#include <map_particle_fragment>`,
      `	
      	vec4 mapTexel = texture2D( map, vUv );
				diffuseColor *= mapTexelToLinear( mapTexel );
      `
    );
    console.log(shader.fragmentShader);
  }
});

let p = new THREE.Points(g, m);
scene.add(p);


if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

  const 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...