Merge pull request PolymerLabs#5 from alxrsngrtn/scotts-raven-with-ca…

…mera

Added Camera Image Capture to Scott's Raven

modalities/dom/components/elements/camera-input.js

@@ -0,0 +1,93 @@
+/*
+@license
+Copyright (c) 2018 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+import Xen from '../xen/xen.js';
+
+let template = Xen.html`
+<video id="player" width="640" height="480" autoplay ></video>
+<canvas id="canvas" style="display: none;" width="640" height="480"></canvas>
+<br/>
+<span>
+    <button id="recordbutton" on-click="record">Start Recording</button>
+    <button id="capturebutton" on-click="capture">Take Picture</button>
+</span>
+`;
+template = Xen.Template.createTemplate(template);
+
+//const log = Xen.logFactory('MicInput', 'blue');
+
+const constraints = {
+  video: true,
+  audio: false,
+};
+
+class CameraInput extends Xen.Base {
+
+  get template() {
+    return template;
+  }
+
+  _didMount() {
+    this.player = this.host.getElementById('player');
+    this.canvas = this.host.getElementById('canvas');
+    this.ctx = this.canvas.getContext('2d');
+    this.isRecording = false;
+  }
+
+  record() {
+    navigator.mediaDevices.getUserMedia(constraints)
+      .then((stream) => {
+        if (!this.isRecording) {
+          this.player.srcObject = stream;
+          this.player.play();
+          this.isRecording = true;
+        } else {
+          this._stop();
+        }
+      });
+  }
+
+  _stop() {
+    this.player.srcObject.getVideoTracks().forEach((track) => track.stop());
+    this.player.srcObject = null;
+    this.player.pause();
+    this.isRecording = false;
+  }
+
+  _update(props, state) {
+  }
+
+  _render(props, state) {
+    return state;
+  }
+
+  start() {
+
+  }
+
+  stop() {
+
+  }
+
+  capture() {
+    // Draw whatever is in the video element on to the canvas.
+    this.ctx.drawImage(this.player, 0, 0);
+    const imageData = this.ctx.getImageData(0, 0, 640, 480);
+    this.value = {
+      pixels: imageData.data, width: imageData.width, height: imageData.height,
+      url: this.canvas.toDataURL('image/png')
+    };
+    this._stop();
+    this._fire('capture', this.value);
+  }
+
+}
+
+customElements.define('camera-input', CameraInput);

particles/Processing/HighGranularity.recipes

@@ -1,4 +1,5 @@
 import 'particles/ImageCapture.particle'
+import 'particles/VideoCapture.particle'
 import 'particles/MlModelCapture.particle'
 import 'particles/ImageProcessSelector.particle'
 import 'particles/ImageProcessing.particle'
@@ -11,6 +12,11 @@ recipe ImageCapture
   ImageCapture
   description `load an image from a url`
 
+recipe VideoCapture
+  create #volatile as image
+  VideoCapture
+  description `capture an image from a webcam`
+
 store UdnieModel of MlModelUrl 'udnie-model' in 'assets/udnie.json'
 
 recipe UdnieStyler

particles/Processing/particles/VideoCapture.particle

@@ -0,0 +1,6 @@
+import '../schemas/Image.schema'
+
+particle VideoCapture in './source/VideoCapture.js'
+  out ImageUrl image
+  consume root
+    provide imageView

particles/Processing/particles/source/VideoCapture.js

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2019 Google Inc. All rights reserved.
+ * This code may only be used under the BSD style license found at
+ * http://polymer.github.io/LICENSE.txt
+ * Code distributed by Google as part of this project is also
+ * subject to an additional IP rights grant found at
+ * http://polymer.github.io/PATENTS.txt
+ */
+
+'use strict';
+
+/* global defineParticle */
+
+defineParticle(({DomParticle, html}) => {
+
+  const tmpl = html`
+    <div style="padding: 16px;">
+      <h2>Arcs Image Processing Demo</h2>
+      <h3>Capture an image with your webcamera</h3>
+      <camera-input on-capture="onCapture"></camera-input>
+      <br><br>
+      <img src="{{url}}">
+      <br><br>
+      <div slotid="imageView"></div>
+    </div>
+  `;
+
+  return class extends DomParticle {
+    get template() {
+      return tmpl; }
+    render(props, state) {
+      // if (!state.inputUrl) {
+      //   state.inputUrl = 'https://$particles/Processing/assets/kitten.jpg';
+      // }
+      return state;
+    }
+    onCapture(data) {
+      const {pixels, width, height, url} = data.data.value;
+      this.setState({url: url, blob: {
+          blob: new Uint8Array(pixels.buffer),
+          width: width,
+          height: height
+        }});
+      this.updateVariable('image', {url});
+    }
+  };
+
+});

shells/configuration/whitelisted.js

@@ -9,6 +9,7 @@ import '../../modalities/dom/components/elements/geo-location.js';
 import '../../modalities/dom/components/elements/model-input.js';
 import '../../modalities/dom/components/elements/model-img.js';
 import '../../modalities/dom/components/elements/dom-repeater.js';
+import '../../modalities/dom/components/elements/camera-input.js';
 import '../../modalities/dom/components/elements/processing/image-processor.js';
 import '../../modalities/dom/components/elements/processing/image-styler.js';
 import '../../modalities/dom/components/elements/processing/image-helper.js';