feat: update humanseg v2 demo

Author: JingyuanZhang

packages/paddlejs-examples/humanStream/index.html

@@ -63,6 +63,7 @@
             </div>
         </div>
         <canvas id="demo"></canvas>
+        <canvas id="back"></canvas>
         <div id="background">
         </div>
         <div id="isLoading">

packages/paddlejs-examples/humanStream/index.ts

@@ -1,5 +1,5 @@
 import Camera from '@paddlejs-mediapipe/camera';
-import * as humanseg from '@paddlejs-models/humanseg';
+import * as humanseg from '@paddlejs-models/humanseg/lib/index_gpu';
 
 let camera = null;
 const loadingDom = document.getElementById('isLoading');
@@ -9,6 +9,18 @@ const videoToolDom = document.getElementById('video-tool');
 const bgElement = document.createElement('div') as HTMLDivElement;
 const container = document.querySelector('body');
 
+
+const back_canvas = document.getElementById('back') as HTMLCanvasElement;
+const background_canvas = document.createElement('canvas');
+background_canvas.width = back_canvas.width;
+background_canvas.height = back_canvas.height;
+
+const img = new Image();
+img.src = './bgImgs/bg.jpg';
+img.onload = () => {
+    background_canvas.getContext('2d').drawImage(img, 0, 0, background_canvas.width, background_canvas.height);
+};
+
 container.appendChild(bgElement);
 
 load();
@@ -35,18 +47,15 @@ const canvas1 = document.getElementById('demo') as HTMLCanvasElement;
 const videoCanvas = document.createElement('canvas') as HTMLCanvasElement;
 const videoCanvasCtx = videoCanvas.getContext('2d');
 async function load() {
-    await humanseg.load(true, true);
+    await humanseg.load();
     camera = new Camera(video, {
         mirror: true,
         enableOnInactiveState: true,
         onFrame: async () => {
             videoCanvas.width = video.width;
             videoCanvas.height = video.height;
             videoCanvasCtx.drawImage(video, 0, 0, video.width, video.height);
-            const {
-                data
-            } = await humanseg.getGrayValue(videoCanvas);
-            humanseg.blurBackground(data, canvas1);
+            humanseg.drawHumanSeg(videoCanvas, canvas1, background_canvas);
         }
     });
 }