Remarque :
Cet article est également disponible ici. (Japonais)
https://cloud.flect.co.jp/entry/2022/06/23/140205
Introduction
Cela fait un moment depuis la sortie du SDK Amazon Chime pour Javascript version 3.x , mais j'ai enfin pu rendre ma démo OSS compatible avec la v3.x. La procédure de la v2.x à la v3.x est décrite dans la documentation officielle . Si vous envisagez de migrer de la v2.x vers la v3.x, veuillez vous référer à la documentation officielle .
J'ai ajouté une version simplifiée de Center Stage à la démo ainsi que la migration de la v.2.x vers la v.3.x. Dans cet article, je présente comment le mettre en œuvre.
Comme ça.
Version simplifiée du Center Stage
Center Stage est une fonctionnalité de la récente caméra iPad Pro qui reconnaît et suit automatiquement le visage de l’utilisateur. Zoom et FaceTime offrent la fonctionnalité avec scène centrale (Zoom, Facetime).
Je n'ai pas d'informations détaillées sur la scène centrale, mais je suppose que cette scène centrale utilise les fonctions de l'appareil photo de l'iPad, telles que le zoom et la mise au point pour obtenir les données vidéo. L'exemple de film capturé avec Center Stage est affiché cette page sur gizmodo (japonais).
Dans cet article, nous allons essayer de créer une version simplifiée d'une fonctionnalité centrale à l'aide d'une webcam ordinaire et d'un modèle d'apprentissage automatique. Plus précisément, cette fonction détectera les visages de la vidéo de la webcam et recadrera la zone qui les entoure dans l'application Amazon Chime SDK pour Javascript. Contrairement à la scène centrale d'origine, cette fonctionnalité n'utilise pas les fonctions de l'appareil photo telles que le zoom et la mise au point, donc sa vitesse et sa qualité d'image ne sont pas aussi bonnes que l'original, mais l'avantage est qu'elle ne nécessite aucun matériel spécial dans le navigateur.
BlazeVisage
La détection des visages utilise des modèles d'apprentissage automatique et Mediapipe propose un modèle léger et très précis appelé BlazeFace. Ce modèle peut détecter la position d'un visage en temps réel dans une image de caméra, comme le montre la figure ci-dessous. Dans la figure ci-dessous, le visage détecté est marqué d'un cadre rouge, mais une scène centrale simplifiée recadrera sur une zone légèrement plus grande que le cadre rouge.
Ce modèle est très léger et est connu pour être plus rapide sur CPU (WASM+SIMD) que sur WebGL.(ref)
Quelqu'un compare le temps de traitement de BlazeFace à d'autres modèles similaires. Ces données montrent que BlazeFace est assez rapide.
Intégration avec le SDK Amazon Chime pour Javascript
Amazon Chime SDK pour Javascript fournit une API permettant d'éditer la vidéo capturée par une webcam avant de la transférer vers le serveur (API de traitement vidéo). Pour plus d'informations sur l'API Video Processing, veuillez vous référer à la documentation officielle ou mon article précédent .
Comme mentionné ci-dessus, BlazeFace semble fonctionner plus rapidement sur le processeur (WASM+SIMD) que sur WebGL. De manière générale, il est préférable de ne pas effectuer une grande quantité de traitement dans le thread principal (CPU) pour les applications qui s'exécutent dans un navigateur. Nous aimerions donc exécuter BlazeFace sur un Webworker.
La figure ci-dessous montre un schéma de configuration approximatif et un flux de processus.
(1) Capturez une vidéo avec une webcam.
(2) Appelez le processus API du processeur vidéo dans la démo Amazon Chime SDK pour Javascript. Le processus interne de l'API du processeur vidéo (VideoFrameProcessor) demande le traitement du fil principal au WebWorker, qui localise le visage de l'utilisateur à l'aide de BalzeFace et répond au fil principal. Thread.
(3) Le fil principal coupe le visage.
(4) La vidéo découpée est envoyée au serveur d'Amazon Chime.
Module WebWorker pour BlazeFace
Afin de faire fonctionner BlazeFace avec WebWorker, il est nécessaire d'implémenter des codes un peu gênants. J'ai publié le module npm pour exécuter BlazeFace sur WebWorker, utilisons-le donc cette fois pour éviter d'écrire des codes gênants. Le code source et une démo de ce module sont également disponibles, donc si vous êtes intéressé, merci de consulter le dépôt .
La démo fournie ici peut être amenée à se comporter de la même manière que la scène centrale. Sélectionnez « suivi » dans le menu déroulant « mode application » sur le côté droit de la page de démonstration. Vous verrez une vidéo comme celle ci-dessous. Le côté gauche est l’image originale et le côté droit est l’image avec le visage découpé avec le cadre central simplifié. Ça a l'air plutôt bien.
De plus, essayez de basculer entre WebGL et Wasm dans le menu déroulant « backend-selector ». Le temps de traitement par image est affiché dans le coin supérieur gauche et vous pouvez voir que Wasm traite plus rapidement.
Mise en œuvre
Pour implémenter cette fonctionnalité dans votre application, vous devrez implémenter le VideoFrameProcessor de l'API Video Processor. Le module npm ci-dessus fournit des méthodes pour détecter les visages et calculer la position de découpage, il est donc très facile à mettre en œuvre à l'aide de ces méthodes.
VideoFrameProcessor nécessite la mise en œuvre d'une méthode de traitement pour traiter la vidéo. Initialisez les différents membres à utiliser dans cette méthode.
Le gestionnaire est le module npm ci-dessus (1). config et params configurent le comportement du gestionnaire (2). Dans ce cas, nous voulons exécuter le programme en asm sur le webworker, nous définissons donc backendType sur asm et processOnLocal sur false (3).
private targetCanvas: HTMLCanvasElement = document.createElement('canvas');
private targetCanvasCtx: CanvasRenderingContext2D = this.targetCanvas.getContext('2d')!;
private canvasVideoFrameBuffer = new CanvasVideoFrameBuffer(this.targetCanvas);
private manager = new BlazefaceWorkerManager() // <--- (1)
private config = generateBlazefaceDefaultConfig(); // <---(2)
private params = generateDefaultBlazefaceParams(); // <---(2)
constructor() {
this.config.backendType = BackendTypes.wasm // <---(3)
this.config.processOnLocal = false // <---(3)
this.manager.init(this.config)
}
La méthode de processus elle-même est la suivante. Identifier la position du visage à l'aide de la méthode de prédiction du module npm (1). Calculez le rectangle à recadrer à partir de la position du visage identifiée (2). Le rectangle à recadrer est écrit dans le tampon d'image pour la sortie (3) et renvoyé à l'appelant.
process = async (buffers: VideoFrameBuffer[]): Promise<VideoFrameBuffer[]> => {
if (!buffers[0]) {
return buffers;
}
const canvas = buffers[0].asCanvasElement!()
if (!canvas) {
return buffers;
}
const prediction = await this.manager.predict(this.params, canvas as HTMLCanvasElement) // <--- (1)
const trackingArea = this.manager.fitCroppedArea(prediction, canvas.width, canvas.height, this.params.processWidth, this.params.processHeight, canvas.width, canvas.height, 1, 0.4, 0, 0); // <--- (2)
this.targetCanvasCtx.clearRect(0, 0, this.targetCanvas.width, this.targetCanvas.height)
this.targetCanvasCtx.drawImage(canvas, trackingArea.xmin, trackingArea.ymin, trackingArea.width, trackingArea.height, 0, 0, this.targetCanvas.width, this.targetCanvas.height); // <--- (3)
buffers[0] = this.canvasVideoFrameBuffer;
return buffers;
}
Pour plus de détails sur la façon d'enregistrer VideoFrameProcessor avec l'API Video Processor, veuillez vous référer à la documentation officielle. L'implémentation est également disponible dans le référentiel de démonstration décrit ci-dessous, veuillez donc vous y référer pour des détails plus concrets.
Démo
Une démo implémentant la version simplifiée de la scène centrale présentée ici est disponible dans le référentiel suivant.
Veuillez cloner avec les balises suivantes si vous souhaitez l'essayer, car il y a une possibilité de modification dans le futur. Veuillez consulter le référentiel pour les instructions de configuration.
git clone https://github.com/w-okada/flect-chime-sdk-demo.git -b center_stage --depth 1
Pour utiliser le cadre central, ouvrez les paramètres de l'appareil avec l'icône d'engrenage dans l'en-tête et activez Center Stage dans les paramètres de l'appareil photo. Cela fonctionnera alors comme le montre la vidéo suivante. La vidéo est transmise du navigateur de gauche au navigateur de droite via le backend d'Amazon Chime. Je pense que ce n'est pas mal.
Résumé
Dans cet article, j'ai montré comment intégrer une version simplifiée de la fonctionnalité centrale dans une application Amazon Chime SDK pour Javascript. Bien qu'il ne soit pas aussi bon que l'original, nous espérons que cela aidera à réaliser une nouvelle UX sur le navigateur sans utiliser d'appareil spécial. Par exemple, il serait possible de carreler les visages de tous les participants avec leurs tailles alignées en zoomant.
Remerciements
La vidéo et les images dans le texte proviennent de ces sites.
https://pixabay.com/ja/videos/
Clause de non-responsabilité
En aucun cas, nous ne serons responsables des dommages directs, indirects, consécutifs ou spéciaux résultant de l'utilisation ou de l'impossibilité d'utiliser le logiciel sur ce blog.
