aframevr · jimver04 · Feb 5, 2022 · Feb 6, 2022 · Feb 6, 2022 · Feb 6, 2022
diff --git a/examples/test/canvas-texture-video/components/canvas-updater.js b/examples/test/canvas-texture-video/components/canvas-updater.js
@@ -0,0 +1,14 @@
+/* global AFRAME */
+
+AFRAME.registerComponent('canvas-updater', {
+  dependencies: ['geometry', 'material'],
+
+  tick: function () {
+    var el = this.el;
+    var material;
+
+    material = el.getObject3D('mesh').material;
+    if (!material.map) { return; }
+    material.map.needsUpdate = true;
+  }
+});
diff --git a/examples/test/canvas-texture-video/components/draw-canvas-video-green-screen.js b/examples/test/canvas-texture-video/components/draw-canvas-video-green-screen.js
@@ -0,0 +1,59 @@
+/* global AFRAME */
+
+/**
+ * Draw dynamic colorful rectangles.
+ */
+AFRAME.registerComponent('draw-canvas-video-green-screen', {
+
+  schema: {
+    canvas: {type: 'selector'},
+    myvideo: {type: 'selector'}
+  },
+
+  init: function () {
+    // --------- here I capture my own stream in order to transmit it as I want ----
+    var constraints = {
+      video: true
+    };
+
+    // Get my camera stream (to do some processing before capturing to canvas
+    var myvideo = this.myvideo = document.createElement('video');
+    var promise = navigator.mediaDevices.getUserMedia(constraints);
+
+    promise.then(SuccessCallback);
+
+    function SuccessCallback (stream) {
+      myvideo.srcObject = stream;
+      myvideo.play();
+    }
+
+    this.canvas = this.data.canvas;
+    this.ctx = this.canvas.getContext('2d');
+    this.w = this.canvas.width;
+    this.h = this.canvas.height;
+  },
+
+  tick: function (t) {
+    var ctx = this.ctx;
+    var myvideo = this.myvideo;
+    var r, g; //, b;  // r,g,b level of a pixel
+    var w = this.w;
+    var h = this.h;
+    ctx.drawImage(myvideo, 0, 0, w, h);
+
+    var imageData = ctx.getImageData(0, 0, w, h);
+
+    for (var i = 0; i < imageData.data.length; i += 4) {
+      r = imageData.data[i]; // red level of pixel
+      g = imageData.data[i + 1]; // green level of pixel
+      // b = imageData.data[i + 2]; // blue level of pixel
+      if (g - r > 0.08) { // if green is 2% more than red then we set this pixel as transparent by setting the alpha=0
+        // imageData.data[i] = 0;      // red: you can use various colors, e.g. for video effects
+        // imageData.data[i + 1] = 0; // green
+        // imageData.data[i + 2] = 0; // blue
+        imageData.data[i + 3] = 0; // alpha is zero
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+  }
+});
diff --git a/examples/test/canvas-texture-video/index.html b/examples/test/canvas-texture-video/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title>Canvas Texture with green screen effect</title>
+    <meta name="description" content="Canvas Texture with Green Screen Effect - A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="./components/canvas-updater.js"></script>
+    <script src="./components/draw-canvas-video-green-screen.js"></script>
+  </head>
+  <body>
+    <a-scene stats>
+
+
+      <a-assets>
+        <canvas id="helloWorldCanvas" crossOrigin="anonymous"></canvas>
+      </a-assets>
+
+      <a-entity material="shader: flat; src: #helloWorldCanvas"
+                geometry="primitive: plane; width: 160; height: 90"
+                position="0 60 -250" rotation="0 35 0"
+                canvas-updater
+                draw-canvas-video-green-screen="canvas: #helloWorldCanvas">
+      </a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test/shader-texture-video/components/video-init-component.js b/examples/test/shader-texture-video/components/video-init-component.js
@@ -0,0 +1,23 @@
+/* global AFRAME */
+/**
+ * Start video
+ */
+AFRAME.registerComponent('video-init-component', {
+
+  schema: {
+    videoDOM: {type: 'selector'}
+  },
+
+  init: function () {
+    var promise = navigator.mediaDevices.getUserMedia({video: true});
+    promise.then(SuccessCallback);
+
+    var myvideo = this.data.videoDOM;
+
+    // we can not call this inside the function below
+    function SuccessCallback (stream) {
+      myvideo.srcObject = stream;
+      myvideo.play();
+    }
+  }
+});
diff --git a/examples/test/shader-texture-video/index.html b/examples/test/shader-texture-video/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <title>Green Screen custom video shader</title>
+    <meta name="description" content="Texture with Video Custom shader for green pixels - A-Frame">
+    <script src="../../../dist/aframe-master.js"></script>
+    <script src="./components/video-init-component.js"></script>
+    <script src="shaders/green-screen.js"></script>
+  </head>
+  <body>
+
+    <a-scene stats>
+      <a-assets>
+        <video id="camvideo" crossOrigin="anonymous" src="#"></video>
+      </a-assets>
+
+      <a-entity material="shader: green-screen; uMap: #camvideo"
+                geometry="primitive: plane; width: 160; height: 90"
+                position="0 60 -250" rotation="0 35 0"
+                video-init-component="videoDOM:#camvideo"
+      >
+      </a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/test/shader-texture-video/shaders/green-screen.js b/examples/test/shader-texture-video/shaders/green-screen.js
@@ -0,0 +1,37 @@
+/* global AFRAME */
+/**
+ * The Green screen shader
+ */
+AFRAME.registerShader('green-screen', {
+
+    schema: {
+        uMap: {type: 'map', is: 'uniform'},
+        greenThreshold:{type: 'float', is: 'uniform', default:0.08}
+    },
+
+    vertexShader: `varying vec2 vUv;
+
+                          void main() {
+                              vec4 worldPosition = modelViewMatrix * vec4( position, 1.0 );
+                              vec3 vWorldPosition = worldPosition.xyz;
+                              vUv = uv;
+                              gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+                          }`,
+
+    fragmentShader: `varying vec2 vUv;
+                     uniform sampler2D uMap;
+                     uniform float greenThreshold;
+
+                     void main() {
+                                  vec2 uv = vUv;
+                                  vec4 tex1 = texture2D(uMap, uv * 1.0);
+                                   if (tex1.g - tex1.r > greenThreshold)
+                                      gl_FragColor = vec4(0,0,0,0);
+                                   else
+                                      gl_FragColor = vec4(tex1.r,tex1.g,tex1.b,1.0);
+                              }`
+
+});
+
+
+