Hello.

I am Paul Kinlan.

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

Object Detection and Augmentation

Paul Kinlan

Ich habe viel mit dem Shape Detection API in Chrome Shape Detection API und ich mag das Potenzial, das es bietet, sehr. Zum Beispiel ein sehr einfaches QRCode detector ich vor langer Zeit geschrieben habe, verfügt über eine JS-Polyfill, verwendet jedoch die new BarcodeDetector() API, falls verfügbar.

Einige der anderen Demos, die ich hier aufgebaut habe, können Sie mit den anderen Funktionen der Face Detection API sehen: Face Detection , Barcode Detection und Text Detection .

Ich war angenehm überrascht, als ich am Wochenende über Jeeliz stolperte, und ich war unglaublich beeindruckt von der Leistung ihres Toolkits - vorausgesetzt, ich habe einen Pixel3 XL verwendet, aber die Erkennung von Gesichtern schien wesentlich schneller zu sein als mit der FaceDetector API.

Checkout some of their demos .

Ich habe viel darüber nachgedacht. Dieses Toolkit für die Objekterkennung (und ähnliche) verwendet APIs, die im Web allgemein verfügbar sind, insbesondere Camera access, WebGL und WASM. Diese Funktionen unterscheiden sich von der Shape-Erkennungs-API von Chrome (die nur in Chrome und nicht auf allen Plattformen, auf denen sich Chrome befindet, konsistent sind ) kann verwendet werden, um auf einfache Weise umfassende Erfahrungen zu erstellen und Milliarden von Benutzern mit einer konsistenten Erfahrung auf allen Plattformen zu erreichen.

Augmentation ist der Punkt, an dem es interessant wird (und wirklich das, was ich in diesem Beitrag vorzeigen wollte) und wo Sie Middleware-Bibliotheken benötigen, die jetzt auf die Plattform kommen. Wir können die lustigen, sneakers-ähnlichen Gesichtsfilter-Apps erstellen, ohne dass Benutzer MASSIVE-Apps installieren das Sammeln einer riesigen Datenmenge vom Benutzergerät (da dem System kein Zugriff zugrunde liegt).

Außerhalb der lustigen Demos können sehr fortgeschrittene Anwendungsfälle für den Benutzer schnell und einfach gelöst werden, z.

  • Textauswahl direkt von der Kamera oder Foto vom Benutzer
  • Live-Übersetzung von Sprachen aus der Kamera
  • Inline QRCode Erkennung, damit die Leute nicht ständig WeChat öffnen müssen :)
  • Extrahieren Sie Website-URLs oder Adressen automatisch aus einem Bild
  • Erkennung von Kreditkarten und Entnahme von Nummern (Benutzer können sich schneller auf Ihrer Website anmelden)
  • Visuelle Produktsuche in der Web-App Ihres Shops.
  • Barcode-Suche nach weiteren Produktdetails in der Web-App Ihres Stores.
  • Schnelles Zuschneiden von Profilfotos auf die Gesichter von Personen.
  • Einfache A11Y-Funktionen, damit der Benutzer den in Bildern gefundenen Text hören kann.

Ich habe gerade fünf Minuten damit verbracht, über diese Anwendungsfälle nachzudenken - ich weiß, dass es noch viel mehr gibt -, aber es hat mich aufgefallen, dass wir nicht viele Websites oder Web-Apps sehen, die die Kamera verwenden Benutzer müssen eine App herunterladen, und ich denke nicht, dass wir das noch tun müssen.

** Update ** Thomas Steiner in unserem Team erwähnte in unserem Team-Chat, dass es klingt, als würde mir die aktuelle ShapeDetection API nicht gefallen. Ich liebe die Tatsache, dass diese API uns Zugriff auf die The Lumpy Web Versandimplementierungen der jeweiligen Systeme The Lumpy Web Wie ich jedoch in The Lumpy Web schrieb, The Lumpy Web Webentwickler nach Konsistenz in der Plattform und es gibt eine Reihe von Problemen mit der Shape-Erkennungs-API zusammengefasst werden als:

  1. Die API ist nur in Chrome verfügbar. 2. Die API in Chrome unterscheidet sich auf allen Plattformen erheblich, da die zugrunde liegenden Implementierungen unterschiedlich sind. Android hat nur Punkte für Orientierungspunkte wie Mund und Augen, wo macOS Konturen hat. Bei Android gibt TextDetector den erkannten Text zurück, wohingegen er wie bei macOS einen 'Text Presence'-Indikator zurückgibt. Dabei werden nicht alle Fehler erwähnt, die Surma gefunden hat.

Das Web als Vertriebsplattform ist für Erfahrungen wie diese so sinnvoll, dass ich denke, es wäre ein Verdammnis, es nicht zu tun, aber die obigen zwei Gruppierungen von Fragen lassen mich die langfristige Notwendigkeit der Implementierung jedes Features in Frage stellen Die Webplattform nativ, wenn wir gute Lösungen in einem Paket implementieren könnten, das mit den heutigen Funktionen der Plattform wie WebGL, WASM und der zukünftigen Web-GPU ausgeliefert wird.

Jedenfalls liebe ich die Tatsache, dass wir dies im Internet tun können, und ich freue mich darauf, Websites mit ihnen zu sehen.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Got web performance problems? Just wait...

Paul Kinlan

Ich habe einen Tweet von einem guten Kumpel und Kollegen Mariko , in dem es darum ging, mit einer Reihe von Low-End-Geräten zu testen, was Sie wirklich auf dem Mariko hält.

Der Kontext des Tweets ist, dass wir untersuchen, wie Web Development aussieht, wenn Benutzer für Benutzer erstellen, die täglich mit diesen Geräteklassen leben.

Das Team arbeitet derzeit sehr viel in diesem Bereich, aber ich habe einen Tag damit verbracht, eine Website zu bauen, und es war unglaublich schwer, alles auf einem nur halbwegs vernünftigen Leistungsniveau zum Laufen zu bringen - hier sind einige Probleme, auf die ich gestoßen bin:

  • Viewport-Kuriositäten und mysteriöse Wiedereinführung von 300ms Klickverzögerung (kann umgangen werden).
  • Große Neulackierung des gesamten Bildschirms, und es ist langsam.
  • Das Netzwerk ist langsam
  • Der Speicher ist eingeschränkt, und nachfolgende GCs sperren den Haupt-Thread für mehrere Sekunden
  • Unglaublich langsame JS-Ausführung
  • Die DOM-Manipulation ist langsam

Bei vielen Seiten, die ich erstellte, dauerte das Laden mehrerer Seiten, selbst bei einer schnellen WLAN-Verbindung, und die nachfolgenden Interaktionen waren einfach nur langsam. Es war schwer, den Versuch zu unternehmen, so viel wie möglich vom Hauptthread abzubringen, aber es war auch auf technischer Ebene unglaublich erfreulich, Änderungen in den Algorithmen und der Logik zu sehen, die ich bei meiner herkömmlichen Web-Entwicklung nicht gemacht hätte große leistungsverbesserungen.

Ich bin nicht sicher, was auf lange Sicht zu tun ist, ich vermute, dass eine große Bandbreite von Entwicklern, mit denen wir in den weiter entwickelten Märkten zusammenarbeiten, eine Reaktion haben wird Auf hoher Ebene ist es schwer, mit dieser Aussage zu streiten, aber ich kann nicht die Tatsache ignorieren, dass jedes Jahr zehn Millionen neuer Benutzer zum Computing kommen und sie diese Geräte verwenden werden Die rise of the meta platform Wahl für Inhalte und Apps, damit wir mit dem rise of the meta platform nicht rise of the meta platform .

Wir werden noch lange Zeit die Leistung steigern müssen. Wir werden weiterhin Tools und Anleitungen erstellen, mit denen Entwickler schneller laden und reibungslose Benutzeroberflächen haben können :)

Browser Bug Searcher

Paul Kinlan

Ich habe gerade über einige work our team has done und ein Projekt von 2017 gefunden, das Robert Nyman und Eric Bidelman gegründet haben. Browser Bug Searcher! .

Es ist unglaublich, dass Sie mit nur wenigen Tastendrücken einen großartigen Überblick über Ihre bevorzugten Funktionen in allen großen Browser-Engines haben.

Source code available .

Dies hebt tatsächlich eines der Probleme hervor, die ich mit den Bug-Trackern von crbug und webkit habe, sie haben keine einfache Möglichkeit, Daten-Feeds in Formaten wie RSS abzurufen. Ich würde gerne meinen topicdeck Aggregator mit topicdeck usw. verwenden können. topicdeck habe ich ein Dashboard mit allen Dingen, die mich interessieren, basierend auf den neuesten Informationen der einzelnen Bug-Tracker.

Brexit: History will judge us all

Paul Kinlan

Die Geschichte wird uns alle über dieses Durcheinander richten, und ich hoffe, es wird eine Fallstudie für alle über die Auswirkungen von Nationalismus, Eigeninteressen, Kolonialhassis und Promi-Affenfabrikation sein.

Fuckers

File Web Share Target

Paul Kinlan

Ich habe oft gesagt, dass Web-Apps, um effektiv in der Welt der Apps zu bestehen, in alle Orte integriert werden müssen, an denen Benutzer Apps erwarten. Inter-App-Kommunikation ist eines der wichtigsten fehlenden data out of their silo Webplattform. data out of their silo ist die gemeinsame Nutzung der nativen Ebenen eine der letzten fehlenden Funktionen. Sie müssen auch in der Lage sein, Daten von anderen nativen Apps und Websites zu erhalten.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Dies ist das Testen der Freigabe direkt von der Kamera-App. Es sieht so aus, als hätte es funktioniert :)

Read More

testing-file-share-target

Paul Kinlan

Dies ist ein Test der Share Target API auf Android und die Möglichkeit, Dateien gemeinsam zu nutzen. Wenn Sie hier etwas sehen, ist alles gut :)

Read More

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

Paul Kinlan

Ricky Mondello hatte kürzlich im Safari-Team eine Mitteilung darüber veröffentlicht, wie Twitter die Spezifikation ./well-known/change-password verwendet.

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 .

Das Feature ist mir völlig übergangen, aber es ist eine nette Idee: Wenn eine Datei an einem bekannten Speicherort vorhanden ist, kann der Browser dem Benutzer eine Benutzeroberfläche bieten, mit der er sein Kennwort schnell zurücksetzen kann, ohne durch die komplexe Benutzeroberfläche der Website navigieren zu müssen.

Die Spezifikation ist täuschend einfach: Die bekannte Datei enthält lediglich die URL, über die der Benutzer zu dem Zeitpunkt gelangt, zu dem er die Aktion ausführen möchte. Dies führt mich zum Nachdenken, können wir weitere dieser Funktionen anbieten:

  • Bekannter Ort für DSPVO-basierte Einwilligungsmodelle (Cookie-Einwilligung) - Websitebesitzer können einen Link zu der Seite anbieten, auf der ein Benutzer alle Cookies und andere Dateneinwilligungselemente verwalten und möglicherweise widerrufen kann.
  • Bekannter Ort für die Verwaltung von Browser-Berechtigungen - Websitebesitzer können Benutzern einen schnellen Ort bieten, um Berechtigungen für Dinge wie Geo-Standort, Benachrichtigungen und andere Grundelemente zu widerrufen.
  • Ein bekannter Pfad zum Löschen und Ändern von Accounts
  • Ein bekannter Pfad für die Verwaltung von Mailinglisten-Abonnements

Die Liste geht weiter … Ich mag die Idee, einfache Umleitungsdateien zu erstellen, um Benutzern zu helfen, häufige Benutzeraktionen zu erkennen, und dem Browser eine Möglichkeit zu bieten, sie aufzurufen.

pinch-zoom-element

Paul Kinlan

Jake und das Team erstellten dieses ziemlich beeindruckende benutzerdefinierte Element zum Verwalten des Pinch-Zooms in einem beliebigen HTML-Satz außerhalb der eigenen Pinch-Zoom-Dynamik des Browsers (z. B. Mobile Viewport-Zooming). Das Element war eine der zentralen Komponenten, die wir für die von Chrome Dev Summit entwickelte und veröffentlichte squoosh App benötigten (… ich sage 'Chrome Dev Summit') - Jake zeigte es allen beim China Google Developer Day obwohl der Rest des Teams unter Embargo stand;) …)

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

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

Read full post .

Ich habe es gerade zu meinem Blog hinzugefügt (es dauerte nur ein paar Minuten). Sie können es in meinem life -Abschnitt life , wo ich Fotos weitergebe, die ich gemacht habe. Wenn Sie sich auf einem berührungsfähigen Gerät befinden, können Sie das Element schnell zusammenzoomen, wenn Sie ein Trackpad verwenden, das mit mehreren Fingereingaben umgehen kann, was ebenfalls funktioniert.

Dieses Element ist ein hervorragendes Beispiel dafür, warum ich Webkomponenten als Modell für die Erstellung von Komponenten der Benutzeroberfläche liebe. Das pinch-zoom Element ist knapp unter 3kb auf dem Draht (unkomprimiert) und minimiert die Abhängigkeiten für das Erstellen. Es macht nur eine Aufgabe außergewöhnlich gut, ohne dabei eine benutzerdefinierte Anwendungsebene zu binden, die die Verwendung erschwert (ich habe einige Gedanken zur UI-Logik vs App-Logikkomponenten, die ich basierend auf meinen Lernergebnissen aus der Squoosh-App freigeben werde).

Ich würde mir sehr freuen, wenn solche Elemente mehr Aufmerksamkeit und Bekanntheit erlangen würden. Ich könnte mir zum Beispiel vorstellen, dass dieses Element die Bildzoomfunktion ersetzen oder standardisieren könnte, die Sie auf vielen Commerce-Sites sehen, und den Entwicklern den Schmerz für immer nehmen wird.

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePage führt die Web Share Target-API und die Verfügbarkeit in Chrome über einen Origin-Test ein

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 .

Diese API ist ein Game-Changer im Web. Sie öffnet das Web für etwas, das für native Apps nur einmal verfügbar war: Native Sharing. Apps sind Silos, sie saugen alle Daten ein und machen es schwierig, plattformübergreifend zugänglich zu sein. Share Target fängt an, das Spielfeld zu nivellieren, damit das Web in demselben Spiel spielen kann.

Die already enabled Twitter Mobile hat Share Target already enabled . Dieser Beitrag wurde mit dem Share-Ziel erstellt, das ich im Administrationsbereich meiner Websites ' manifest.json ' manifest.json Es funktioniert ziemlich gut und manifest.json die Unterstützung für Dateien manifest.json , kann ich jedes Bild oder Blob auf meinem Gerät in meinem Blog veröffentlichen.

Sehr aufregende Zeiten.

Lesen Sie den verlinkten Beitrag, um mehr über die Zeitvorgaben für die Veröffentlichung dieser API und die Verwendung der API zu erfahren.

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

Paul Kinlan

Ein großartiger Artikel sowie ein Video und ein Beispiel von Thomas Steiner zu guten Push-Benachrichtigungen im 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 ist eine erstaunlich leistungsfähige API, aber es ist einfach, Ihre Benutzer zu missbrauchen und zu ärgern. Das Schlechte an Ihrer Website ist, dass wenn ein Benutzer Benachrichtigungen aufgrund einer Eingabeaufforderung ohne Warnung blockiert, die Möglichkeit besteht, erneut zu fragen.

Behandeln Sie Ihre Benutzer mit Respekt. Context ist ein Muss für Web Push-Benachrichtigungen.

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

Paul Kinlan

Kayce Basques, ein großartiger Tech-Autor aus unserem Team, schrieb einen ziemlich erstaunlichen Artikel über seine Erfahrungen, in dem er misst, wie gut die bewährten Best Practices für die Dokumentation von technischem Material funktionieren. Bewährte Verfahren in diesem Sinne können bekannte Industriestandards für das technische Schreiben sein, oder es kann ein Leitfaden für Ihr eigenes Schreibstil sein. Hör zu!

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 .

Obwohl ich kein Tech-Autor bin, beinhaltet meine Rolle eine enorme Menge an Engagement in unserem Tech-Writing-Team sowie die Veröffentlichung zahlreicher „Best Practices“ für Entwickler. Ich war erstaunt darüber, wie viel und tiefgründig Kayce mit der Kunst des Schreibens moderner Dokumente aus dem Blickwinkel der Inhalte unseres Teams beigetragen hat. Ich empfehle Ihnen dringend, Kayces Artikel ausführlich zu lesen - ich habe viel gelernt. Danke, 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

Ich war vor ein paar Wochen für den Google Developer Day in China und habe allen meinen QRCode-Scanner gezeigt, es funktionierte großartig, bis ich offline ging. Wenn der Benutzer offline war (oder teilweise verbunden war), konnte die Kamera nicht starten, was dazu führte, dass QR-Codes nicht ausgelöst werden konnten. Ich brauchte ein ganzes Alter, um herauszufinden, was passierte, und es stellte sich heraus, dass ich irrtümlich die Kamera bei meinem Onload-Ereignis gestartet hatte und die Google Analytics-Anfrage hängen blieb und nicht rechtzeitig gelöst werden konnte. Es war dieses Festschreiben, das es reparierte.

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.

Ganzen Beitrag lesen.

Ich ermutige Sie, den Beitrag zu lesen, weil es viele großartige Einblicke gibt.

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

Paul Kinlan

Am Wochenende habe ich mit einem Boomerang-Effekt-Video-Encoder herumgespielt, man kann es quasi in Echtzeit arbeiten lassen (ich werde es später erklären). Ich habe es auf Chrome auf dem Desktop funktioniert, aber es würde nie richtig in Chrome unter Android funktionieren. Siehe der Code hier.

Es sieht so aus, als wenn Sie captureStream () auf einem verwenden <canvas>das hat eine relativ große Auflösung (1280x720 in meinem Fall) ist die MediaRecorder API nicht in der Lage, die Videos zu codieren und es wird kein Fehler und Sie können nicht feststellen, dass es das Video nicht vor der Zeit codieren kann.

(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.

Ganzen Beitrag lesen.

Wenn du mit der Demo spielen willst, die auf beiden funktioniert, dann klick hier

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

Ein schöner Post über PWA von Mike Elgan. Ich bin mir über Microsofts Ziel bei PWA nicht sicher, aber meiner Meinung nach ist es ziemlich einfach: Wir möchten, dass Benutzer sofort und auf eine Art und Weise Zugriff auf Inhalte und Funktionen haben, von denen sie erwarten, dass sie auf ihren Geräten mit ihnen interagieren können. Das Web sollte jeden über jedes angeschlossene Gerät erreichen und ein Benutzer sollte in der Lage sein, auf seine bevorzugte Modalität zuzugreifen, als eine App, wenn sie es so erwarten (Handy, vielleicht), oder Stimme auf einem Assistenten usw.

Wir sind immer noch ein langer Weg vom kopflosen Web, aber eine Sache hat mich in dem Artikel wirklich beeindruckt:

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

Ganzen Beitrag lesen.

Websites und Apps im Internet sollen nicht isoliert sein, das Web ist linkbar, indexierbar, ephemeral, aber wir werden mit jeder Site, die wir erstellen, mehr isoliert. Wir erstellen unbeabsichtigte Silos, weil die Plattform es Benutzern nicht leicht macht, * ihre * Daten einfach von Websites zu bekommen. Ich spreche nicht über RDF oder ähnliches, grundlegende Operationen wie Kopieren und Einfügen, Ziehen und Ablegen, Freigabe zur Site und Freigabe von der Site sind im heutigen Web gebrochen, und das ist bevor wir zur IPC zwischen Frames, Workern gelangen und Fenster.

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

Paul Kinlan

Sie sollten Videos nur über das Web im Browser erstellen und bearbeiten können. Es sollte möglich sein, eine Benutzeroberfläche ähnlich wie bei Screenflow bereitzustellen, mit der Sie ein Ausgabevideo erstellen können, das mehrere Videos, Bilder und Audio zu einem Video kombiniert, das zu Diensten wie YouTube hochgeladen werden kann. Im Anschluss an den meinem vorheriger Beitrag, der kurz die Anforderungen des Videoeditors beschreibt, wollte ich in diesem Beitrag nur schnell in einem Screencast zeigen, wie ich den Web Cam Recorder gebaut habe, und wie man einen Screencast erstellt Recorder :)

Read More

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

Paul Kinlan

Das erste Problem, das ich gefunden habe, versucht einen Videoeditor im Internet zu erstellen.

Ich habe mehrere Videostreams (Desktop und Web Cam) und wollte zwischen den Videoströmen eines Videoelements wechseln können, um schnell zwischen der Webcam und dem Desktop wechseln zu können und den MediaRecorder nicht zu zerbrechen.

Es sieht so aus, als ob Sie dies tun können, indem Sie die Eigenschaft selected auf demvideoTracks Objekt auf dem <video>Element, aber Sie können nicht, das Array von Tracks enthält nur 1 Element (die erste Videospur auf dem MediaStream).

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.

Ganzen Beitrag lesen.

Repro-Fall.

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

Sie sollten Videos nur über das Web im Browser erstellen und bearbeiten können. Es sollte möglich sein, eine Benutzeroberfläche ähnlich wie bei Screenflow bereitzustellen, mit der Sie ein Ausgabevideo erstellen können, das mehrere Videos, Bilder und Audio zu einem Video kombiniert, das zu Diensten wie YouTube hochgeladen werden kann. Dieser Beitrag ist wirklich nur eine Absichtserklärung. Ich werde mit dem langen Prozess beginnen, herauszufinden, was auf der Plattform verfügbar ist und was nicht, und sehen, wie weit wir heute kommen können.

Read More

Barcode detection in a Web Worker using Comlink

Paul Kinlan

Ich bin ein großer Fan von QRCodes, sie sind eine sehr einfache und nette Möglichkeit, Daten zwischen der realen Welt und der digitalen Welt auszutauschen. Seit ein paar Jahren habe ich ein kleines Nebenprojekt namens QRSnapper & mdash; Nun, es hatte ein paar Namen, aber das ist die, auf die ich mich festgelegt habe & mdash; Diese nutzt die API “getUserMedia”, um Live-Daten von der Kamera des Benutzers zu empfangen, so dass sie fast in Echtzeit nach QR-Codes scannen kann.

Das Ziel der App war es, 60 fps in der Benutzeroberfläche zu halten und fast sofort den QR-Code zu erkennen. Das bedeutete, dass ich den Erkennungscode in einen Web-Worker stecken musste (ziemlich normales Zeug). In diesem Post wollte ich nur schnell mitteilen, wie ich comlink benutzt habe, um die Logik im Worker massiv zu vereinfachen.

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 (Web-Arbeiter)

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);

Ich liebe wirklich Comlink, ich denke, es ist ein Game Changer einer Bibliothek, besonders wenn es darum geht, idiomatisches JavaScript zu erstellen, das über Threads hinweg funktioniert. Schließlich ist es eine nette Sache, dass die native Barcode-Erkennungs-API in einem Worker ausgeführt werden kann, sodass die gesamte Logik außerhalb der Benutzeroberfläche gekapselt ist.

Ganzen Beitrag lesen.