feat(mediapipe): update camera sdk to use web worker timer instead setTimeout when page inactive

Author: JingyuanZhang

packages/paddlejs-mediapipe/camera/README.md

@@ -21,6 +21,8 @@ const option = {
     height?: number,
     // mirror or not
     mirror?: boolean,
+    // if enable capture stream when page hidden, default is false
+    enableOnInactiveState?: boolean,
     // canvas DOM
     targetCanvas?: HTMLCanvasElement,
     // video rendered successfully

packages/paddlejs-mediapipe/camera/README_cn.md

@@ -21,6 +21,8 @@ const option = {
     height?: number,
     // 是否镜像
     mirror?: boolean,
+    // 当页面处于非激活态时，是否继续捕获 video frame，默认为 false
+    enableOnInactiveState?: boolean,
     // 目标canvas DOM对象
     targetCanvas?: HTMLCanvasElement,
     // 视频流渲染成功

packages/paddlejs-mediapipe/camera/src/index.ts

@@ -3,10 +3,13 @@
  * @author xxx
  */
 
+import 'hacktimer';
+
 interface cameraOption {
     width?: number;
     height?: number;
     mirror?: boolean;
+    enableOnInactiveState?: boolean;
     targetCanvas?: HTMLCanvasElement;
     onSuccess?: () => void;
     onError?: () => void;
@@ -15,7 +18,6 @@ interface cameraOption {
     switchError?: () => void;
     videoLoaded?: () => void;
 }
-
 export default class Camera {
     constructor(videoElement: HTMLVideoElement, opt: Partial<cameraOption> = {}) {
         this.video = videoElement;
@@ -24,13 +26,14 @@ export default class Camera {
         this.visible = true;
         this.isCameraRunning = true;
         this.initVideoStream();
-        this.registerVisiblityEvent();
+        this.options.enableOnInactiveState && this.registerVisiblityEvent();
     }
 
     private noop = () => {};
     /** 默认配置对象 */
     private defaultOption: cameraOption = {
         mirror: false,
+        enableOnInactiveState: false,
         targetCanvas: null,
         onSuccess: this.noop,
         onError: this.noop,
@@ -170,43 +173,57 @@ export default class Camera {
     }
 
     private videoRequestAnimationFrame() {
-        const drawImage = () => {
-            if (!this.isCameraRunning) {
-                return;
-            }
-            if (this.context) {
-                this.context.drawImage(this.video, 0, 0, this.video.width, this.video.height);
-            }
-            this.options.onFrame(this.video);
-            if (this.visible) {
-                this.requestAnimationId = requestAnimationFrame(drawImage);
-                return;
-            }
-            this.setTimeoutHandler = setTimeout(() => {
-                drawImage();
-            }, 50);
-        };
-        drawImage();
+        if (this.visible) {
+            this.drawImageRAF();
+            return;
+        }
+        this.drawImageST();
+    }
+
+    private async drawImageRAF() {
+        if (!this.isCameraRunning) {
+            cancelAnimationFrame(this.requestAnimationId);
+            this.requestAnimationId = null;
+            return;
+        }
+        if (this.context) {
+            this.context.drawImage(this.video, 0, 0, this.video.width, this.video.height);
+        }
+        await this.options.onFrame(this.video);
+        this.requestAnimationId = requestAnimationFrame(() => {
+            this.drawImageRAF();
+        });
     }
 
+    private drawImageST() {
+        if (!this.isCameraRunning) {
+            clearTimeout(this.setTimeoutHandler);
+            this.setTimeoutHandler = null;
+            return;
+        }
+        if (this.context) {
+            this.context.drawImage(this.video, 0, 0, this.video.width, this.video.height);
+        }
+        this.options.onFrame(this.video);
+        this.setTimeoutHandler = setTimeout(() => {
+            this.drawImageST();
+        }, 50);
+    };
+
     public start() {
         this.video && this.video.play();
         if (this.requestAnimationId || this.setTimeoutHandler) {
             return;
         }
         this.isCameraRunning = true;
+        this.visible = true;
         this.videoRequestAnimationFrame();
     }
 
     public pause() {
         this.video && this.video.pause();
         this.isCameraRunning = false;
-        if (this.requestAnimationId) {
-            cancelAnimationFrame(this.requestAnimationId);
-            clearTimeout(this.setTimeoutHandler);
-            this.requestAnimationId = null;
-            this.setTimeoutHandler = null;
-        }
+        this.cancelDrawImage();
     }
 
     public switchCameras() {
@@ -226,20 +243,25 @@ export default class Camera {
         this.handleStream();
     }
 
+    private cancelDrawImage() {
+        clearTimeout(this.setTimeoutHandler);
+        this.setTimeoutHandler = null;
+        cancelAnimationFrame(this.requestAnimationId);
+        this.requestAnimationId = null;
+    }
+
     private registerVisiblityEvent() {
         document.addEventListener('visibilitychange', () => {
             if (!this.isCameraRunning) {
                 return;
             }
-            if (document.visibilityState === 'visible') {
-                this.visible = true;
-                clearTimeout(this.setTimeoutHandler);
-                this.setTimeoutHandler = null;
-            }
-            else if (document.visibilityState === 'hidden') {
-                this.visible = false;
-                this.videoRequestAnimationFrame();
+            this.visible = document.visibilityState === 'visible';
+            this.cancelDrawImage();
+            if (this.visible) {
+                this.drawImageRAF();
+                return;
             }
+            this.drawImageST();
         });
     }
 }