Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

Object Detection and Augmentation

Paul Kinlan

J'ai beaucoup joué avec Shape Detection API dans Chrome et j'aime beaucoup son potentiel. Par exemple, un QRCode detector très simple QRCode detector j'ai écrit il y a longtemps possède un polyfill JS, mais utilise l'API new BarcodeDetector() si elle est disponible.

Vous pouvez voir certaines des autres démos que j'ai construites ici en utilisant les autres fonctionnalités de l'API de détection de forme: Face Detection , Barcode Detection et Text Detection .

J'ai été agréablement surpris lorsque je suis tombé sur Jeeliz le week-end et j'ai été extrêmement impressionné par les performances de leur boîte à outils - sachant que j'utilisais un Pixel3 XL, mais la détection des visages semblait nettement plus rapide que ce qui est possible avec l'API FaceDetector .

Checkout some of their demos .

Cela m'a beaucoup fait réfléchir. Cette boîte à outils pour la détection d'objets (et d'autres outils similaires) utilise des API largement disponibles sur le Web, notamment l'accès aux caméras, WebGL et WASM, contrairement à l'API de détection des formes de Chrome (disponible uniquement dans Chrome et non cohérente sur toutes les plateformes sur lesquelles Chrome est installé). ) peuvent être utilisés pour créer facilement des expériences riches et atteindre des milliards d'utilisateurs avec une expérience cohérente sur toutes les plateformes.

L'augmentation est l'endroit où cela devient intéressant (et vraiment ce que je voulais montrer dans cet article) et où vous avez besoin de bibliothèques de middlewares qui arrivent maintenant sur la plate-forme, nous pouvons créer des applications amusantes de filtrage des visages de Snapchat sans que les utilisateurs installent des applications MASSIVE. qui recueille une énorme quantité de données sur le périphérique de l'utilisateur (car il n'y a pas d'accès sous-jacent au système).

En dehors des démonstrations amusantes, il est possible de résoudre des cas d'utilisation très avancés rapidement et simplement pour l'utilisateur, tels que:

  • Sélection de texte directement à partir de l'appareil photo ou photo de l'utilisateur
  • Traduction en direct des langues de la caméra
  • Détection de QRCode en ligne pour que les gens n'aient pas à ouvrir WeChat tout le temps :)
  • Extraire automatiquement les URL du site Web ou l'adresse d'une image
  • Détection de carte de crédit et extraction de numéro (permet aux utilisateurs de s'inscrire rapidement sur votre site)
  • Recherche de produit visuelle dans l'application Web de votre magasin.
  • Recherche de code à barres pour plus de détails sur les produits dans l'application Web de votre magasin.
  • Recadrage rapide des photos de profil sur les visages des personnes.
  • Fonctions A11Y simples permettant à l’utilisateur d’entendre le texte contenu dans les images.

Je viens de passer 5 minutes à réfléchir à ces cas d'utilisation - je sais qu'il y en a beaucoup plus - mais je me suis rendu compte que nous ne voyons pas beaucoup de sites ou d'applications Web utiliser la caméra, mais que beaucoup de sites demandent à leur les utilisateurs à télécharger une application, et je ne pense pas que nous devions le faire plus.

** Mise à jour ** Thomas Steiner de notre équipe a mentionné dans notre équipe Chat qu'il ShapeDetection que je ShapeDetection API ShapeDetection actuelle. J'aime le fait que cette API nous donne accès aux implémentations d'expédition natives de chacun des systèmes respectifs. Cependant, comme je l'ai écrit dans The Lumpy Web , les développeurs Web recherchent la cohérence dans la plate-forme et de nombreux problèmes liés à l'API de détection de forme peuvent se résumer comme suit:

  1. L'API est uniquement dans Chrome 2. L'API dans Chrome est très différente sur chaque plate-forme, car ses implémentations sous-jacentes sont différentes. Android n'a que des points pour des repères tels que la bouche et les yeux, où macOS a des contours. Sur Android, TextDetector renvoie le texte détecté, tandis que sur macOS, il renvoie un indicateur de «présence de texte» … Sans parler de tous les bogues trouvés par Surma.

Le Web, en tant que plate-forme de distribution, a tellement de sens pour des expériences de ce type que je pense que ce serait une négligence de notre part de ne pas le faire, mais les deux groupes de problèmes ci-dessus me poussent à remettre en question le besoin à long terme de la plate-forme Web en mode natif, lorsque nous pouvions implémenter de bonnes solutions dans un package livré avec les fonctionnalités de la plate-forme telles que WebGL, WASM et, à l'avenir, le processeur graphique Web.

Quoi qu'il en soit, j'aime le fait que nous puissions le faire sur le Web et je suis impatient de voir les sites expédiés avec eux.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Got web performance problems? Just wait...

Paul Kinlan

J'ai vu un tweet d'un bon Mariko et de Mariko collègue, Mariko , parler de tests sur une gamme de périphériques bas de gamme vous permettant de rester à la terre.

Le contexte du tweet est que nous examinons à quoi ressemble le développement Web lors de la création pour les utilisateurs qui vivent quotidiennement sur ces classes d’appareils.

L’équipe travaille actuellement beaucoup dans cet espace, mais j’ai passé une journée à construire un site et c’était incroyablement difficile de faire fonctionner quelque chose à un niveau de performances même légèrement raisonnable - voici certains des problèmes que j’ai rencontrés:

  • Bizarreries dans la fenêtre et réintroduction mystérieuse de 300 ms de délai de clic (possibilité de contourner le problème).
  • Reposes énormes de tout l'écran, et c'est lent.
  • Le réseau est lent
  • La mémoire est contrainte et les GC suivants verrouillent le thread principal pendant plusieurs secondes.
  • Exécution JS incroyablement lente
  • La manipulation du DOM est lente

Pour la plupart des pages que je construisais, même sur une connexion Wi-Fi rapide, le chargement des pages prenait plusieurs secondes et les interactions suivantes étaient tout simplement lentes. C’était difficile, cela impliquait d’essayer d’obtenir le plus possible le fil conducteur, mais c’était aussi incroyablement gratifiant, au niveau technique, de voir des changements dans les algorithmes et la logique que je n’aurais pas faits pour tout mon développement Web traditionnel. améliorations importantes des performances.

Je ne sais pas trop quoi faire à long terme, je soupçonne qu'un grand nombre de développeurs avec lesquels nous travaillons sur des marchés plus développés vont réagir: «Je ne construis pas de sites pour les utilisateurs dans [insérer le pays x]». haut niveau, il est difficile de discuter de cette affirmation, mais je ne peux pas ignorer le fait que 10 millions de nouveaux utilisateurs arrivent chaque année en informatique, qu'ils utiliseront ces appareils et que nous voulons que le Web soit * la * plate-forme de choix pour le contenu et les applications de peur que nous sommes heureux avec le rise of the meta platform .

Nous allons devoir continuer à améliorer la performance pendant encore longtemps. Nous allons continuer à créer des outils et des conseils pour aider les développeurs à charger rapidement et à avoir des interfaces utilisateur fluides :)

Browser Bug Searcher

Paul Kinlan

Je réfléchissais à quelques-uns des work our team has done et j'ai trouvé un projet de 2017 créé par Robert Nyman et Eric Bidelman. Browser Bug Searcher! .

Il est incroyable qu’avec quelques touches seulement vous ayez un bon aperçu de vos fonctionnalités préférées dans tous les principaux moteurs de navigateur.

Source code available .

Cela met en évidence l'un des problèmes que j'ai avec les outils de suivi des bogues de crbug et webkit: ils ne disposent pas d'un moyen simple d'obtenir des flux de données dans des formats tels que RSS. J'aimerais pouvoir utiliser mon agrégateur topicdeck avec des catégories de bogues, etc., de sorte que je dispose d'un tableau de bord de toutes les choses qui m'intéressent et qui est basé sur les dernières informations de chacun des suiveurs de bogues.

Brexit: History will judge us all

Paul Kinlan

L’histoire nous jugera tous sur ce gâchis et j’espère que ce sera une étude de cas pour tous sur les effets du nationalisme, des intérêts personnels, de l’orgueil colonial, de la célébrité-bouffonnerie.

Fuckers

File Web Share Target

Paul Kinlan

J'ai souvent dit que pour que les applications Web soient concurrentielles dans le monde des applications, elles doivent être intégrées à tous les endroits que les utilisateurs attendent des applications. La communication inter-applications est l'un des principaux éléments manquants de la plate-forme Web, et l'une des dernières fonctionnalités manquantes est le partage au niveau natif: les applications Web doivent pouvoir accéder à data out of their silo et à d'autres sites Web et applications; ils doivent également pouvoir recevoir les données d'autres applications et sites natifs.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Ceci teste le partage directement à partir de l'application appareil photo. On dirait que ça a marché :)

Read More

testing-file-share-target

Paul Kinlan

Il s'agit d'un test de l'API Partager la cible sur Android et de sa capacité à partager des fichiers. Si vous voyez quelque chose ici, alors tout va bien :)

Read More

Ricky Mondello: Adoption of Well-Known URL for Changing Passwords

Paul Kinlan

Ricky Mondello, de l’équipe Safari, vient de partager une note sur la façon dont Twitter utilise les spécifications ./well-known/change-password.

I just noticed that Twitter has adopted the Well-Known URL for Changing Passwords! Is anyone aware of other sites that have adopted it?

Twitter’s implementation: https://twitter.com/.well-known/change-password; Github’s: https://github.com/.well-known/change-password; Specification :https://github.com/WICG/change-password-url

Read full post .

La fonctionnalité m’a complètement dépassée, mais c’est une idée géniale: à partir d’un fichier situé dans un emplacement bien connu, le navigateur peut-il offrir une interface utilisateur à l’utilisateur lui permettant de réinitialiser rapidement son mot de passe sans avoir à naviguer dans l’interface complexe des sites ..

La spécification est d'une simplicité trompeuse: le fichier bien connu contient simplement l'URL vers laquelle l'utilisateur doit être dirigé lorsqu'il souhaite exécuter l'action. Cela me conduit à penser que nous pouvons offrir plus de ces fonctionnalités:

  • Emplacement bien connu pour les modèles de consentement basés sur le GDPR (consentement des cookies) - les propriétaires de sites pourraient proposer un lien vers la page permettant à un utilisateur de gérer et éventuellement de révoquer tous les cookies et autres éléments de consentement des données.
  • Un emplacement bien connu pour la gestion des autorisations du navigateur - les propriétaires de sites pourraient offrir un emplacement rapide pour permettre aux utilisateurs de révoquer les autorisations d'accès à des éléments tels que la géolocalisation, les notifications et autres primitives.
  • Un chemin bien connu pour la suppression et les modifications de compte
  • Un chemin bien connu pour la gestion des abonnements aux listes de diffusion

La liste s'allonge … J'aime beaucoup l'idée de simples fichiers de redirection pour aider les utilisateurs à découvrir les actions courantes des utilisateurs et pour permettre au navigateur de les mettre en évidence.

pinch-zoom-element

Paul Kinlan

Jake et l'équipe ont créé cet élément personnalisé plutôt impressionnant pour la gestion du zoom pincement sur tout jeu de code HTML en dehors de la dynamique de pincement-zoom du navigateur (pensez au zoom de la fenêtre d'affichage mobile). L'élément était l'un des composants centraux dont nous avions besoin pour l'application squoosh que nous avions conçue et publiée lors du Sommet des développeurs Chrome (… je dis "publiée au Sommet des développeurs Chrome" - Jake l'a montré à tout le monde lors de la Journée des développeurs Google Google. même si le reste de l'équipe était sous embargo;) …)

install: npm install --save-dev pinch-zoom-element

<pinch-zoom>
  <h1>Hello!</h1>
</pinch-zoom>

Read full post .

Je viens de l'ajouter à mon blog (cela ne m'a pris que quelques minutes), vous pouvez le vérifier dans la section " life " où je partage les photos que j'ai prises. Si vous utilisez un appareil tactile, vous pouvez rapidement effectuer un zoom-pincement sur l'élément si vous utilisez un pavé tactile pouvant gérer plusieurs entrées au doigt qui fonctionnent également.

Cet élément est un excellent exemple de la raison pour laquelle j'aime les composants Web en tant que modèle de création de composants d'interface utilisateur. L’élément pinch-zoom représente un peu moins de 3 Ko sur le réseau (non compressé) et des dépendances minimales pour la construction. Il effectue un travail exceptionnellement bien, sans lier une logique personnalisée au niveau de l’application qui le rendrait difficile à utiliser vs composants logiques App que je vais partager en fonction de mon apprentissage de l'application Squoosh).

J'adorerais voir des éléments comme ceux-ci avoir plus de notoriété et d'utilisation, par exemple, je pourrais imaginer que cet élément pourrait remplacer ou normaliser la fonctionnalité de zoom d'image que vous voyez sur de nombreux sites de commerce et dissiper à jamais la douleur des développeurs.

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePage présente l'API cible de partage Web et la disponibilité dans Chrome via un essai de l'origine

Until now, only native apps could register as a share target. The Web Share Target API allows installed web apps to register with the underlying OS as a share target to receive shared content from either the Web Share API or system events, like the OS-level share button.

Read full post .

Cette API est un changeur de jeu sur le Web, elle ouvre le Web à quelque chose qui n'était auparavant disponible que pour les applications natives: le partage natif. Les applications sont des silos, elles aspirent toutes les données et rendent difficile l'accès aux différentes plateformes. Partager cible commence à niveler le terrain pour que le Web puisse jouer dans le même jeu.

L'expérience Twitter Mobile a Partager cible already enabled . Ce message a été créé à l'aide de la cible de partage que j'ai définie dans le panneau d'administration de mes sites " manifest.json ". Elle fonctionne assez bien et dès qu'elle manifest.json la manifest.json charge des fichiers, je suis en mesure de publier sur mon blog une image ou une goutte sur mon appareil.

Temps très excitant.

Lisez l'article lié pour en savoir plus sur les échéances à respecter pour le lancement de cette API et sur son utilisation.

Why Build Progressive Web Apps: Push, but Don't be Pushy! Video Write-Up

Paul Kinlan

Un excellent article, une vidéo et un exemple de Thomas Steiner sur les bonnes notifications push sur le Web.

A particularly bad practice is to pop up the permission dialog on page load, without any context at all. Several high traffic sites have been caught doing this. To subscribe people to push notifications, you use the the PushManager interface. Now to be fair, this does not allow the developer to specify the context or the to-be-expected frequency of notifications. So where does this leave us?

Read full post .

Web Push est une API incroyablement puissante, mais il est facile d’abuser et d’ennuyer vos utilisateurs. La mauvaise chose pour votre site, c'est que si un utilisateur bloque les notifications parce que vous le lui demandez sans avertissement, vous n'aurez plus l'occasion de le demander.

Traitez vos utilisateurs avec respect, le contexte est roi pour les notifications Web Push.

Maybe Our Documentation "Best Practices" Aren''t Really Best Practices

Paul Kinlan

Kayce Basques, un formidable rédacteur technique de notre équipe, a écrit un article plutôt étonnant sur ses expériences, mesurant la mesure dans laquelle les meilleures pratiques de la documentation existante permettent d'expliquer du matériel technique. Les meilleures pratiques dans ce sens peuvent être des normes bien connues de l’industrie en matière de rédaction technique, ou bien il peut s’agir du guide de rédaction de votre propre entreprise. Vérifiez-le!

Recently I discovered that a supposed documentation “best practice” may not actually stand up to scrutiny when measured in the wild. I’m now on a mission to get a “was this page helpful?” feedback widget on every documentation page on the web. It’s not the end-all be-all solution, but it’s a start towards a more rigorous understanding of what actually makes our docs more helpful.

Read full post .

Bien que je ne sois pas un rédacteur technique, mon rôle implique une très grande implication de notre équipe de rédacteurs techniques ainsi que la publication de nombreuses «meilleures pratiques» pour les développeurs. J’ai été émerveillé par toute la profondeur et les recherches que Kayce a effectuées sur l’art d’écrire des documents modernes à travers le prisme du contenu de nos équipes. Je vous encourage fortement à lire l'article de Kayce en profondeur - j'ai beaucoup appris. Merci Kayce!

Grep your git commit log

Paul Kinlan

Finding code that was changed in a commit

Read More

Performance and Resilience: Stress-Testing Third Parties by CSS Wizardry

Paul Kinlan

J’étais en Chine il y a quelques semaines pour la journée des développeurs Google et je montrais à tout le monde mon scanner QRCode, cela fonctionnait très bien jusqu’à ce que je passe au mode hors connexion. Lorsque l’utilisateur était hors ligne (ou partiellement connecté), la caméra ne démarrait pas, ce qui signifiait que vous ne pouviez pas prendre de code QR. Il m’a fallu un certain temps pour comprendre ce qui se passait, et il s’avère que j’ai démarré la caméra par erreur lors de mon événement onload et que la demande de Google Analytics était bloquée et non résolue rapidement. C’est ce commit qui l’a corrigé.

Because these types of assets block rendering, the browser will not paint anything to the screen until they have been downloaded (and executed/parsed). If the service that provides the file is offline, then that’s a lot of time that the browser has to spend trying to access the file, and during that period the user is left potentially looking at a blank screen. After a certain period has elapsed, the browser will eventually timeout and display the page without the asset(s) in question. How long is that certain period of time?

It’s 1 minute and 20 seconds.

If you have any render-blocking, critical, third party assets hosted on an external domain, you run the risk of showing users a blank page for 1.3 minutes.

Below, you’ll see the DOMContentLoaded and Load events on a site that has a render-blocking script hosted elsewhere. The browser was completely held up for 78 seconds, showing nothing at all until it ended up timing out.

Lire l’article complet.

Je vous encourage à lire le post car il y a beaucoup de perspicacité.

Chrome Bug 897727 - MediaRecorder using Canvas.captureStream() fails for large canvas elements on Android

Paul Kinlan

Le week-end, je jouais avec un encodeur vidéo à effet Boomerang, vous pouvez le faire fonctionner presque en temps réel (je l’expliquerai plus tard). Je l’ai obtenu sur Chrome sur le Bureau, mais cela ne fonctionnerait jamais correctement sur Chrome sur Android. Voir le code ici.

Cela ressemble à lorsque vous utilisez captureStream () sur un <canvas>Avec une résolution relativement importante (1280x720 dans mon cas), l’API MediaRecorder ne pourra pas encoder les vidéos, elle ne provoquera pas d’erreur et vous ne pourrez pas détecter qu’elle ne peut pas encoder la vidéo à l’avance.

(1) Capture a large res video (from getUM 1280x720) to a buffer for later processing. (2) Create a MediaRecorder with a stream from a canvas element (via captureStream) sized to 1280x720 (3) For each frame captured putImageData on the canvas (4) For each frame call canvasTrack.requestFrame() at 60fps

context.putImageData(frame, 0, 0); canvasStreamTrack.requestFrame();

Demo: https://boomerang-video-chrome-on-android-bug.glitch.me/ Code: https://glitch.com/edit/#!/boomerang-video-chrome-on-android-bug?path=script.js:21:42

What is the expected result?

For the exact demo, I buffer the frames and then reverse them so you would see the video play forwards and backwards (it works on desktop). In generall I would expect all frames sent to the canvas to be processed by the MediaRecorder API - yet they are not.

What happens instead?

It only captures the stream from the canvas for a partial part of the video and then stops. It’s not predicatable where it will stop.

I suspect there is a limit with the MediaRecorder API and what resolution it can encode depending on the device, and there is no way to know about these limits ahead of time.

As far as I can tell this has never worked on Android. If you use https://boomerang-video-chrome-on-android-bug.glitch.me which has a 640x480 video frame it records just fine. The demo works at higher-resolution just fine on desktop.

Lire l’article complet.

Si vous voulez jouer avec la démo qui marche sur les deux, alors cliquez ici

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

Un bel article sur PWA de Mike Elgan. Je ne suis pas sûr de l’objectif de Microsoft avec PWA, mais je pense que le nôtre est assez simple: nous voulons que les utilisateurs aient accès au contenu et aux fonctionnalités instantanément et d’une manière qu’ils espèrent pouvoir interagir avec ce contenu sur leurs appareils. Le Web doit atteindre tout le monde sur chaque appareil connecté et un utilisateur doit pouvoir accéder à sa modalité préférée, en tant qu’application si c’est ce à quoi il s’attend (mobile, peut-être), ou de la voix sur un assistant, etc.

Nous sommes encore loin du réseau sans tête, cependant, une chose m’a vraiment frappé dans l’article:

Another downside is that PWAs are highly isolated. So it’s hard and unlikely for different PWAs to share resources or data directly.

Lire l’article complet.

Les sites et les applications sur le Web ne sont pas censés être isolés, le Web est linkable, indexable, éphemeral, mais chaque site que nous construisons devient plus silencieux. Nous créons des silos inattendus car la plate-forme ne permet pas facilement aux * utilisateurs * d’importer * facilement * leurs données hors site. Je ne parle pas de RDF ou de quelque chose du genre, les opérations de base telles que copier / coller, glisser-déposer, partager sur site et partager à partir d’un site sont interrompues sur le Web d’aujourd’hui, et c’est avant que nous ne passions à IPC entre les images, travailleurs et des fenêtres.

Building a video editor on the web. Part 0.1 - Screencast

Paul Kinlan

Vous devriez pouvoir créer et éditer des vidéos en utilisant uniquement le Web dans le navigateur. Il devrait être possible de fournir une interface utilisateur semblable à Screenflow qui vous permet de créer une sortie vidéo combinant plusieurs vidéos, images et son en une seule vidéo pouvant être téléchargée vers des services tels que YouTube. Après mon précédent post qui décrit brièvement les exigences de l’éditeur de vidéo, je voulais simplement montrer rapidement, dans un screencast, comment j’ai construit l’enregistreur de webcam, et comment créer un screencast.

Read More

894556 - Multiple video tracks in a MediaStream are not reflected on the videoTracks object on the video element

Paul Kinlan

Le premier numéro que j’ai trouvé en essayant de créer un éditeur de vidéo sur le Web.

J’ai plusieurs flux vidéo (ordinateur de bureau et webcam) et je voulais pouvoir basculer entre les flux vidéo sur un élément vidéo afin de pouvoir basculer rapidement entre la webcam et le bureau et ne pas casser le MediaRecorder.

Il semble que vous devriez pouvoir le faire en basculant la propriété selected sur l'objetvideoTracks du <video>élément, mais vous ne pouvez pas, le tableau de pistes ne contient qu'un seul élément (la première piste vidéo sur le flux multimédia).

What steps will reproduce the problem? (1) Get two MediaStreams with video tracks (2) Add them to a new MediaStream and attach as srcObject on a videoElement (3) Check the videoElement.videoTracks object and see there is only one track

Demo at https://multiple-tracks-bug.glitch.me/

What is the expected result? I would expect videoElement.videoTracks to have two elements.

What happens instead? It only has the first videoTrack that was added to the MediaStream.

Lire l’article complet.

Cas de repro.

window.onload = () => {
  if('getDisplayMedia' in navigator) warning.style.display = 'none';

  let blobs;
  let blob;
  let rec;
  let stream;
  let webcamStream;
  let desktopStream;

  captureBtn.onclick = async () => {

       
    desktopStream = await navigator.getDisplayMedia({video:true});
    webcamStream = await navigator.mediaDevices.getUserMedia({video: { height: 1080, width: 1920 }, audio: true});
    
    // Always 
    let tracks = [...desktopStream.getTracks(), ... webcamStream.getTracks()]
    console.log('Tracks to add to stream', tracks);
    stream = new MediaStream(tracks);
    
    console.log('Tracks on stream', stream.getTracks());
    
    videoElement.srcObject = stream;
    
    console.log('Tracks on video element that has stream', videoElement.videoTracks)
    
    // I would expect the length to be 2 and not 1
  };

};

Building a video editor on the web. Part 0.

Paul Kinlan

Vous devriez pouvoir créer et éditer des vidéos en utilisant uniquement le Web dans le navigateur. Il devrait être possible de fournir une interface utilisateur semblable à Screenflow qui vous permet de créer une sortie vidéo combinant plusieurs vidéos, images et son en une seule vidéo pouvant être téléchargée vers des services tels que YouTube. Ce message est vraiment juste une déclaration d’intention. Je vais commencer le long processus consistant à déterminer ce qui est disponible ou non sur la plate-forme et à voir jusqu’où nous pouvons aller aujourd’hui.

Read More

Barcode detection in a Web Worker using Comlink

Paul Kinlan

Je suis un grand fan des QRCodes, ils sont un moyen très simple et pratique d’échanger des données entre le monde réel et le monde numérique. Depuis quelques années, j’ai un petit projet parallèle appelé QRSnapper & mdash; Eh bien, il porte quelques noms, mais c’est celui sur lequel j’ai opté pour & mdash; qui utilise l’API getUserMedia pour extraire des données en direct de la caméra de l’utilisateur afin de lui permettre de rechercher les codes QR en temps quasi réel.

Le but de l’application était de maintenir 60 images par seconde dans l’interface utilisateur et de détecter le code QR de manière quasi instantanée. Cela signifiait que je devais mettre le code de détection dans un Web Worker (élément plutôt standard). Dans cet article, je voulais simplement partager rapidement la façon dont j’ai utilisé comlink pour simplifier massivement la logique du travailleur.

qrclient.js

import * as Comlink from './comlink.js';

const proxy = Comlink.proxy(new Worker('/scripts/qrworker.js')); 

export const decode = async function (context) {
  try {
    let canvas = context.canvas;
    let width = canvas.width;
    let height = canvas.height;
    let imageData = context.getImageData(0, 0, width, height);
    return await proxy.detectUrl(width, height, imageData);
  } catch (err) {
    console.log(err);
  }
};

qrworker.js (travailleur Web)

import * as Comlink from './comlink.js';
import {qrcode} from './qrcode.js';

// Use the native API's
let nativeDetector = async (width, height, imageData) => {
  try {
    let barcodeDetector = new BarcodeDetector();
    let barcodes = await barcodeDetector.detect(imageData);
    // return the first barcode.
    if (barcodes.length > 0) {
      return barcodes[0].rawValue;
    }
  } catch(err) {
    detector = workerDetector;
  }
};

// Use the polyfil
let workerDetector = async (width, height, imageData) => {
  try {
    return qrcode.decode(width, height, imageData);
  } catch (err) {
    // the library throws an excpetion when there are no qrcodes.
    return;
  }
}

let detectUrl = async (width, height, imageData) => {
  return detector(width, height, imageData);
};

let detector = ('BarcodeDetector' in self) ? nativeDetector : workerDetector;
// Expose the API to the client pages.
Comlink.expose({detectUrl}, self);

J’aime vraiment Comlink, je pense que c’est un changeur de jeu d’une bibliothèque, en particulier lorsqu’il s’agit de créer du code JavaScript idiomatique qui fonctionne sur plusieurs threads. Enfin, il est intéressant de noter que l’API de détection de code à barres native peut être exécutée à l’intérieur d’un serveur, de sorte que toute la logique soit encapsulée à l’écart de l’UI.

Lire l’article complet.