WeChat MiniProgram WebAR
1.0.0
README chinois
Analyse du code source chinois
| Date | Mise à jour |
|---|---|
| 2022-07-23 | Nouveau : utilisez un travailleur expérimental sur iOS. Veuillez consulter « Image AR et masque 3D ». Problème résolu : "Image AR" ne peut pas fonctionner sur iOS pendant un certain temps. |
| 2021-12-11 | Nouveau : ajout d'un outil de suivi d'images utilisant OpenCV WebAssembly. Veuillez consulter "Image AR utilisant OpenCV". |
| 2021-09-07 | Nouveau : ajout d'un mode Color Tracker. Veuillez consulter la « Couleur AR ». |
| 2021-08-15 | Nouveau : Ajout d'un mode masque vidéo pour l'image AR. Il s'agit d'une transformation CSS 3D, qui ne nécessite pas three.js. Veuillez consulter « Image AR et masque vidéo ». Mise à jour : remplacez la géométrie spirituelle par une géométrie plane. |
| 2021-04-03 | Mise à jour : Le mode "accéder à une caméra" d'Image AR est récupéré. |
| 2021-03-15 | Nouveau : L'affichage du masque AR passe de 2D à 3D par three.js. Mise à jour : le mode « accéder à une caméra » étant lent, il est supprimé. |
| 2019-08-16 | Mise à jour : La structure du projet a été modifiée. Le suivi des couleurs et le suivi des objets sont supprimés. Correction du mode « accéder à une caméra » qui ne fonctionne pas correctement sur Android. |
| 2019-08-06 | Problème résolu : lorsque la fonction "wx.canvasToTempFilePath" est fréquemment appelée sur Android Wechat, WeChat plante. |
| 2019-08-01 | Mise à jour : la transformation de perspective est réalisée. |
| 2019-07-15 | Mise à jour : Le NFT (Natural Feature Tracking) est atteint. |
| 2019-07-08 | Nouveau : La transformée affine est réalisée. |
Il s'agit d'un WeChat WebAR. Le 5 juillet 2019, le miniprogramme WeChat prenait en charge la RA. Une nouvelle API nommée "CameraFrameListener" a été ajoutée.
API CameraFrameListener
Nous pouvons créer des effets AR avec la nouvelle API. Cette démo montre un effet de suivi AR utilisant les bibliothèques "tracking.js" et "jsfeat".
Le "tracking.js" apporte des algorithmes et des techniques de vision par ordinateur dans l'environnement du navigateur. Le "jsfeat" est également une bibliothèque JavaScript de vision par ordinateur. Nous pouvons effectuer une détection d’images et de visages en temps réel.
tracking.js et JSFeat
Page d'index du mini-programme WeChat
Numéro de version iOS Wechat 8.0.24 ou supérieur : il utilisera un travailleur expérimental.
Android et autres : il n'utilisera pas de travailleur expérimental.
Utilisez la démo pour numériser une image de motif ci-dessous.
Une barbe de chat est sur l'image du motif.
Un effet de traduction et de mise à l’échelle.
Un effet de rotation.
C'est la même chose que ci-dessus. Prend en charge la rotation des images.
L'image est pivotée de 30 degrés.
L'image est pivotée de 90 degrés.
Utilisez la démo pour numériser une image rotative ci-dessous.
Un lecteur vidéo est allumé et aligné avec l'image.
Utilisez la démo pour numériser une couleur jaune. Attendez-vous à un effet ci-dessous.
Un effet de masquage.
Personnalisez la couleur de la zone en surbrillance.
Utilisez la démo pour numériser un visage. Attendez-vous à un effet ci-dessous.
Un effet de traduction et de mise à l’échelle.
Parce que les repères de la démo sont simples et basiques, seul un effet de traduction et de mise à l'échelle s'applique à une image en rotation.
Vous pouvez remplacer l'URL par défaut d'une image par un masque 2D.
Fichier : /package_image_tracker/pages/photo/photo.js et package_face_tracker/pages/photo/photo.js
// a url of sprite image
const modelUrl = '../../utils/cat_beard.png' ;La largeur et la hauteur de l'image "modelurl" doivent être de 256 x 256, 512 x 512 et 1024 x 1024, etc.
Fichier : /package_face_tracker/utils/imageBusiness.js
const patternImageUrl = '../../../face_pattern.jpg' ;une image de modèle
Sélectionnez un point de trace sur une image de motif, le point est utilisé pour définir l'image "barbe de chat".
Fichier : /package_image_tracker/utils/modelBusiness.js
// a index of a track point on a pattern image
const trackPoint = {
x : 185 , // the width of the pattern image is 375
y : 224 , // the height of the pattern image is 375
} ; Il s'agit d'une carte des 31 points clés d'un visage.
points de repère
Par exemple, le chiffre 27 et le chiffre 29 sont les côtés de la bouche.
Fichier : /package_face_tracker/utils/modelBusiness.js
// index of the track points of the face
const trackPointA = {
// index of a landmark
id : 27 ,
// X coordinate
x : 155.69898111309 , // the width of the face image is 375
} ;
const trackPointB = {
// index of a landmark
id : 29 ,
// X coordinate
x : 216.53075265284997 , // the width of the face image is 375
} ; La démo AR est très lente sur iOS WeChat.
