switchcamera

appinventor/components/src/edu/mit/appinventor/ai/posenet/PosenetExtension.java

@@ -28,6 +28,7 @@
 import com.google.appinventor.components.common.ComponentCategory;
 import com.google.appinventor.components.common.PropertyTypeConstants;
 import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
+import com.google.appinventor.components.runtime.Canvas;
 import com.google.appinventor.components.runtime.Deleteable;
 import com.google.appinventor.components.runtime.EventDispatcher;
 import com.google.appinventor.components.runtime.Form;
@@ -52,7 +53,7 @@
 import org.json.JSONException;
 import org.json.JSONObject;
 
-@DesignerComponent(version = 20200304,
+@DesignerComponent(version = 20200309,
     category = ComponentCategory.EXTENSION,
     description = "An extension that embeds a Posenet model.",
     iconName = "aiwebres/icon.png",
@@ -73,6 +74,7 @@ public class PosenetExtension extends AndroidNonvisibleComponent
   private static final String FRONT_CAMERA = "Front";
 
   private WebView webview = null;
+  private Canvas canvas = null;
   private final Map<String, YailList> keyPoints = new ConcurrentHashMap<>();
   private double minPoseConfidence = 0.1;
   private double minPartConfidence = 0.5;
@@ -190,6 +192,16 @@ public void WebViewer(WebViewer webviewer) {
     }
   }
 
+  @SuppressWarnings("squid:S00100")
+  @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_COMPONENT
+          + ":com.google.appinventor.components.runtime.Canvas")
+  @SimpleProperty(userVisible = false)
+  public void Canvas(Canvas canvas) {
+    if (canvas != null) {
+      this.canvas = canvas;
+    }
+  }
+
   public void Initialize() {
     if (webview != null) {
       initialized = true;
@@ -400,6 +412,10 @@ public boolean Enabled() {
   @SuppressWarnings("squid:S00100")
   @SimpleEvent(description = "Event indicating that the classifier is ready.")
   public void ModelReady() {
+    if (canvas != null) {
+      SetVideoHeight(canvas.Height());
+      SetVideoWidth(canvas.Width());
+    }
     EventDispatcher.dispatchEvent(this, "ModelReady");
   }
 
@@ -419,6 +435,7 @@ public void PoseUpdated() {
   @SuppressWarnings("squid:S00100")
   @SimpleEvent(description = "Event indicating that a new video frame is ready. ")
   public void VideoUpdated() {
+    canvas.BackgroundImageinBase64(BackgroundImage);
     EventDispatcher.dispatchEvent(this, "VideoUpdated");
   }
 
@@ -444,6 +461,16 @@ public String UseCamera() {
     return cameraMode;
   }
 
+  @SimpleProperty (description = "Configure video width.")
+  public void SetVideoWidth(int width) {
+    webview.evaluateJavascript("setVideoWidth(" + width + ");", null);
+  }
+
+  @SimpleProperty (description = "Configure video height.")
+  public void SetVideoHeight(int height) {
+    webview.evaluateJavascript("setVideoHeight(" + height + ");", null);
+  }
+
   private static void requestHardwareAcceleration(Activity activity) {
     activity.getWindow().setFlags(LayoutParams.FLAG_HARDWARE_ACCELERATED,
         LayoutParams.FLAG_HARDWARE_ACCELERATED);

appinventor/components/src/edu/mit/appinventor/ai/posenet/assets/app.js

@@ -8,16 +8,16 @@ console.log("Posenet Extension using tfjs-converter version " + tf.version_conve
 
 const ERROR_WEBVIEW_NO_MEDIA = 400;
 const ERROR_MODEL_LOAD = 401;
-const videoWidth = 300;
-const videoHeight = 250;
-
 const ERRORS = {
   ERROR_WEBVIEW_NO_MEDIA: "WebView does not support navigator.mediaDevices",
   ERROR_MODEL_LOAD: "Unable to load model"
 };
 
+let videoWidth = 300;
+let videoHeight = 250;
 let forwardCamera = true;
 let running = false;
+let stream = null;
 
 async function setupCamera() {
   if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
@@ -29,13 +29,18 @@ async function setupCamera() {
   const video = document.getElementById('video');
   video.width = videoWidth;
   video.height = videoHeight;
-
-  video.srcObject = await navigator.mediaDevices.getUserMedia({
-    'audio': false,
-    'video': {
-      facingMode: forwardCamera ? 'user' : 'environment'
-    }
+  if (stream != null) {
+    stream.getTracks().forEach(t => {
+      t.stop();
+    });
+  }
+  stream =  await navigator.mediaDevices.getUserMedia({
+     'audio': false,
+     'video': {
+       facingMode: forwardCamera ? 'user' : 'environment'
+     }
   });
+  video.srcObject = stream;
 
   return new Promise((resolve) => {
     video.onloadedmetadata = () => {
@@ -106,7 +111,7 @@ async function loadModel() {
     });
   } catch (e) {
     PosenetExtension.error(ERROR_MODEL_LOAD,
-      ERRORS[ERROR_MODEL_LOAD]);
+      ERRORS.ERROR_MODEL_LOAD);
     throw e;
   }
 }
@@ -152,6 +157,14 @@ function setCameraFacingMode(useForward) {
   })
 }
 
+function setVideoWidth(width) {
+  videoWidth = width;
+}
+
+function setVideoHeight(height) {
+  videoHeight = height;
+}
+
 // noinspection JSUnresolvedVariable
 navigator.getUserMedia = navigator.getUserMedia ||
   navigator.webkitGetUserMedia || navigator.mozGetUserMedia;