Hello.

私はChromeでShape Detection APIてきましたが、その可能性を本当に気に入っています。たとえば、非常に単純なQRCode detectorにはJSポリフィルがありますが、 new BarcodeDetector() APIが使用可能な場合 形状検出APIの他の機能、 Face Detection 、 Barcode Detection 、およびText Detectionを使用してここで作成した他のデモをいくつか見ることができます。 私が偶然見つけたとき、私は驚きましたJeeliz週末に、私は彼らのツールキットのパフォーマンスに非常に感銘を受けました-付与された私はPixel3 XLを使用していたが、顔の検出がで可能であるものよりも大幅に速く見えたFaceDetector API。 Checkout some of their demos 。 私はたくさん考えました。このオブジェクト検出用のツールキット（およびそれに類するもの）は、Web上で広く利用可能なAPI、特にカメラアクセス、WebGL、およびWASMを使用します。 ）豊富なエクスペリエンスを簡単に構築し、すべてのプラットフォームにわたって一貫したエクスペリエンスを持つ何十億ものユーザーに到達するために使用できます。 増強はそれが面白くなるところ（そして実際に私がこの記事で紹介したいもの）であり、そしてあなたが今プラットフォームに来ているミドルウェアライブラリを必要とするところで、私達はMASSIVEアプリをインストールせずに楽しいsnapchat-esqueフェイスフィルターアプリを構築できますこれは、ユーザーのデバイスから大量のデータを収集します（システムへの根本的なアクセスがないため）。 楽しいデモ以外では、次のように非常に高度なユースケースをすばやく簡単に解決できます。 *カメラから直接テキスト選択、またはユーザーからの写真 *カメラからの言語のライブ翻訳 *インラインQRコード検出機能なので、WeChatを常時開く必要はありません:) *画像からWebサイトのURLまたはアドレスを自動抽出する *クレジットカードの検出と番号抽出（より早くあなたのサイトにサインアップするユーザーを取得する） あなたの店のウェブアプリで*ビジュアル商品検索。 あなたの店のWebアプリでより多くの製品の詳細については*バーコードルックアップ *プロフィール写真を人の顔にすばやくトリミング。 *シンプルなA11Yは、ユーザーが画像にあるテキストを聞くことができるようにします。 私はたった5分でこれらのユースケースについて考えました - もっとたくさんあることを私は知っています - しかし私達はカメラを利用している多くのサイトやウェブアプリを見ていないことを襲ったユーザーがアプリをダウンロードする必要があります。これ以上行う必要はないと思います。 最新情報私たちのチームのThomas Steinerが私たちのチームチャットで、私は現在のShapeDetection APIが好きではないようにShapeDetection 。このAPIがそれぞれのシステムそれぞれのネイティブ出荷実装へのアクセスを提供するという事実を私は気に入っていますが、 The Lumpy Webで書いたThe Lumpy Web 、Web開発者はプラットフォームの一貫性を切望し、要約すると: APIはChromeにのみあります ChromeのAPIは、基盤となる実装が異なるため、プラットフォームごとに大きく異なります。 Androidには、口や目など、macOSにアウトラインがあるランドマーク用のポイントしかありません。 Androidでは、 TextDetectorは検出されたテキストを返し、MacOSの場合は「テキストの存在」インジケータを返します。これは、Surmaが見つけたすべてのバグについて言及していないことです。 配布のためのプラットフォームとしてのウェブはこれらの経験にとってとても意味があるのでやりたくないと思いますが、上記の2つの問題のグループはすべての機能を長期にわたって実装する必要があることに疑問を投げかけます。 WebGL、WASM、そして将来のWeb GPUなど、今日のプラットフォームの機能を使用して出荷されるパッケージに優れたソリューションを実装することができれば、ネイティブなWebプラットフォーム。 とにかく、私たちがウェブ上でこれを行うことができるという事実が大好きです。

私は数週間前にGoogle Developer Dayで中国にいましたが、皆さんに私のQRCode scannerを公開していました。オフラインになるまではうまくいっていました。ユーザーがオフライン（または部分的に接続されている）の場合、カメラは起動せず、QRコードをスナップできませんでした。私は何が起こっているのか分かりませんでした。私は誤って onloadイベントでカメラを起動していました.Googleアナリティクスのリクエストはハングアップし、適時に解決されませんでした。それはそれを修正したこのコミットでした。 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.

私はQRコードの大ファンです。実世界とデジタル世界の間でデータを交換するための非常にシンプルできれいな方法です。数年前から、私はQRSnapperと呼ばれる小さなプロジェクトを持っていました。まあそれはいくつかの名前を持っていますが、これは私が解決したものです＆mdash;これは getUserMedia APIを使用してユーザのカメラからライブデータを取得し、ほぼリアルタイムでQRコードをスキャンすることができます。 このアプリの目標は、UIで60fpsを維持し、QRコードをすぐに検出できるようにすることでした。これは、検出コードをWebワーカー（かなり標準的なもの）に入れなければならないことを意味しました。この記事では、comlinkを使ってワーカーのロジックを大幅に単純化する方法を簡単に共有したいと思っていました。 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（ウェブワーカー） 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.

もう1週間、ChromeのCanaryチャンネルにあるShape API経由の顔検出についてお話しました。現在、バーコードの検出はChrome Canaryでも行われています（Miguelは私のヒーローです）; バーコードは巨大です！彼らは我々が購入するほとんどすべての製品にあります。多くの悪意を持ったQRコードは、米国とヨーロッパ以外の国でも巨大である。バーコードとQRコードは、メディアとあなたとの間で少量のデータを転送することによって、物理世界とデジタル世界をつなぐ簡単な方法を提供します。これはデスクトップの時代には莫大な量の使用ではないかもしれませんが、モバイルの時代にはそれは重要です。このデータにアクセスするためだけにアプリをインストールする必要はありません。 シェイプ検出APIは、ユーザーのデバイスの下にあるハードウェア機能の上に標準インタフェースを作成し、主に顔検出とバーコード検出という新しい機能セットをWebプラットフォームに開くため、面白いです。 バーコード検出APIは、現在WICGにあるShape Detection APIに基づいています。 wicg /）は、インキュベーションおよび実験段階にあることを意味する。 Androidではさまざまな1Dおよび2Dのバーコードを検出できますバーコード： 1D barcodes: EAN-13, EAN-8, UPC-A, UPC-E, Code-39, Code-93, Code-128, ITF, Codabar 2D barcodes: QR Code, Data Matrix, PDF-417, AZTEC さらに： It automatically parses QR Codes, Data Matrix, PDF-417, and Aztec values, for the following supported formats: URL Contact information (VCARD, etc.) Calendar event Email Phone SMS ISBN WiFi Geo-location (latitude and longitude) AAMVA driver license/ID Shape Detection APIは現在Chrome Canary（M57）にあり、 chrome：// flags /＃enable-experimental-web-platform-featuresで有効にする必要があります