Hello.

I am Paul Kinlan.

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

Object Detection and Augmentation

Paul Kinlan

Tôi đã chơi rất nhiều với Shape Detection API trong Chrome rất nhiều và tôi thực sự thích tiềm năng của nó, ví dụ như một QRCode detector rất đơn giản mà tôi đã viết cách đây rất lâu có một polyfill JS, nhưng sử dụng API new BarcodeDetector() nếu có.

Bạn có thể thấy một số bản demo khác mà tôi đã tạo ở đây bằng cách sử dụng các khả năng khác của API phát hiện hình dạng: Face Detection , Barcode DetectionText Detection .

Tôi đã rất ngạc nhiên khi tình cờ gặp Jeeliz vào cuối tuần và tôi vô cùng ấn tượng với hiệu suất của bộ công cụ của họ - với điều kiện tôi đang sử dụng Pixel3 XL, nhưng việc phát hiện khuôn mặt có vẻ nhanh hơn đáng kể so với API FaceDetector .

Checkout some of their demos .

Nó khiến tôi suy nghĩ rất nhiều. Bộ công cụ này để phát hiện đối tượng (và những công cụ tương tự) sử dụng API có sẵn rộng rãi trên Web cụ thể Truy cập máy ảnh, WebGL và WASM, không giống như API phát hiện hình dạng của Chrome (chỉ có trong Chrome và không nhất quán trên tất cả các nền tảng mà Chrome đang hoạt động ) có thể được sử dụng để xây dựng trải nghiệm phong phú dễ dàng và tiếp cận hàng tỷ người dùng với trải nghiệm nhất quán trên tất cả các nền tảng.

Mở rộng là nơi thú vị (và thực sự là những gì tôi muốn thể hiện trong bài đăng này) và là nơi bạn cần thư viện phần mềm trung gian hiện đang đến với nền tảng, chúng tôi có thể xây dựng các ứng dụng lọc khuôn mặt snapchat-esque thú vị mà không cần người dùng cài đặt ứng dụng MASSIVE thu hoạch lượng dữ liệu khổng lồ từ thiết bị người dùng (vì không có quyền truy cập cơ bản vào hệ thống).

Ngoài các bản demo vui nhộn, có thể giải quyết các trường hợp sử dụng rất tiên tiến một cách nhanh chóng và đơn giản cho người dùng, chẳng hạn như:

  • Lựa chọn văn bản trực tiếp từ máy ảnh hoặc ảnh từ người dùng
  • Dịch trực tiếp các ngôn ngữ từ máy ảnh
  • Phát hiện QRCode nội tuyến để mọi người không phải mở WeChat mọi lúc :)
  • Tự động trích xuất URL trang web hoặc địa chỉ từ một hình ảnh
  • Phát hiện thẻ tín dụng và trích xuất số (giúp người dùng đăng ký vào trang web của bạn nhanh hơn)
  • Tìm kiếm sản phẩm trực quan trong ứng dụng web của cửa hàng của bạn.
  • Tra cứu mã vạch để biết thêm chi tiết sản phẩm trong ứng dụng web của cửa hàng của bạn.
  • Cắt nhanh ảnh hồ sơ trên khuôn mặt của mọi người.
  • Các tính năng A11Y đơn giản để cho phép người dùng nghe văn bản tìm thấy trong hình ảnh.

Tôi mới dành 5 phút để suy nghĩ về các trường hợp sử dụng này - tôi biết còn nhiều điều nữa - nhưng tôi nhận ra rằng chúng ta không thấy nhiều trang web hoặc ứng dụng web sử dụng máy ảnh, thay vào đó chúng ta thấy rất nhiều trang web hỏi họ người dùng tải xuống một ứng dụng và tôi không nghĩ chúng ta cần phải làm điều đó nữa.

** Cập nhật ** Thomas Steiner trong nhóm của chúng tôi đã đề cập trong nhóm của chúng tôi Trò chuyện rằng có vẻ như tôi không thích API ShapeDetection hiện tại. Tôi thích thực tế rằng API này cho phép chúng tôi truy cập vào các triển khai vận chuyển riêng của từng hệ thống tương ứng, tuy nhiên như tôi đã viết trong The Lumpy Web , Nhà phát triển web khao khát sự nhất quán trong nền tảng và có một số vấn đề với API phát hiện hình dạng có thể được tóm tắt là:

  1. API chỉ có trong Chrome 2. API trong Chrome rất khác nhau trên mọi nền tảng vì các triển khai cơ bản của chúng là khác nhau. Android chỉ có điểm cho các điểm mốc như miệng và mắt, nơi macOS có đường viền. Trên Android, TextDetector trả về văn bản được phát hiện, trong đó trên macOS, nó trả về chỉ báo 'Hiện diện văn bản' … Đây không phải là đề cập đến tất cả các lỗi mà Surma tìm thấy.

Web với tư cách là một nền tảng để phân phối có ý nghĩa rất lớn đối với những trải nghiệm như thế này đến nỗi tôi nghĩ rằng chúng ta sẽ không làm điều đó, nhưng hai nhóm vấn đề nêu trên khiến tôi đặt câu hỏi về nhu cầu lâu dài để thực hiện mọi tính năng trên nền tảng web thực sự, khi chúng ta có thể triển khai các giải pháp tốt trong gói được vận chuyển bằng các tính năng của nền tảng hiện nay như WebGL, WASM và trong GPU Web trong tương lai.

Dù sao, tôi thích thực tế là chúng ta có thể làm điều này trên web và tôi đang tìm kiếm để thấy các trang web giao hàng với họ.

Paul Kinlan

Trying to make the web and developers better.

RSS Github Medium

Got web performance problems? Just wait...

Paul Kinlan

Tôi đã thấy một tweet của một người bạn tốt và đồng nghiệp, Mariko , về việc thử nghiệm trên một loạt các thiết bị cấp thấp giữ cho bạn thực sự có căn cứ.

Bối cảnh của tweet là chúng tôi đang xem xét Phát triển Web là gì khi xây dựng cho người dùng sống hàng ngày trên các lớp thiết bị này.

Nhóm hiện đang làm rất nhiều việc trong không gian này, nhưng tôi đã dành một ngày để xây dựng một trang web và thật khó để làm bất cứ điều gì hoạt động ở mức độ hợp lý thậm chí hơi hợp lý - đây là một số vấn đề mà tôi gặp phải:

  • Chế độ xem kỳ lạ và giới thiệu lại bí ẩn về độ trễ nhấp chuột 300ms (có thể hoạt động xung quanh).
  • Việc sơn lại toàn bộ màn hình rất lớn và chậm.
  • Mạng chậm
  • Bộ nhớ bị hạn chế và các GC tiếp theo khóa luồng chính trong nhiều giây
  • Thực thi JS cực kỳ chậm
  • Thao tác DOM chậm

Đối với nhiều trang tôi đang xây dựng, ngay cả trên các trang kết nối wifi nhanh cũng mất nhiều giây để tải và các tương tác tiếp theo chỉ đơn giản là chậm. Thật khó khăn, nó liên quan đến việc cố gắng lấy càng nhiều càng tốt khỏi luồng chính, nhưng nó cũng rất hài lòng ở cấp độ kỹ thuật để thấy những thay đổi trong thuật toán và logic mà tôi đã không làm cho tất cả sự phát triển web truyền thống của mình cải thiện lớn về hiệu suất.

Tôi không chắc chắn sẽ làm gì lâu dài, tôi nghi ngờ một lượng lớn các nhà phát triển mà chúng tôi làm việc ở các thị trường phát triển hơn sẽ có phản ứng 'Tôi không xây dựng trang web cho người dùng ở [insert country x]' và tại ở cấp độ cao, thật khó để tranh luận với tuyên bố này, nhưng tôi không thể bỏ qua thực tế rằng 10 triệu người dùng mới sẽ đến máy tính mỗi năm và họ sẽ sử dụng các thiết bị này và chúng tôi muốn web trở thành * nền tảng * lựa chọn cho nội dung và ứng dụng vì chúng tôi hài lòng với rise of the meta platform .

Chúng ta sẽ cần tiếp tục thúc đẩy hiệu suất trong một thời gian dài sắp tới. Chúng tôi sẽ tiếp tục tạo các công cụ và hướng dẫn để giúp các nhà phát triển tải nhanh và có giao diện người dùng mượt mà :)

Browser Bug Searcher

Paul Kinlan

Tôi chỉ phản ánh về một số work our team has done và tôi đã tìm thấy một dự án từ năm 2017 mà Robert Nyman và Eric Bidelman tạo ra. Browser Bug Searcher! .

Thật đáng kinh ngạc khi chỉ với một vài lần nhấn phím, bạn đã có một cái nhìn tổng quan tuyệt vời về các tính năng yêu thích của mình trên tất cả các công cụ trình duyệt chính.

Source code available .

Điều này thực sự làm nổi bật một trong những vấn đề mà tôi gặp phải với trình theo dõi lỗi của bọ và webkit, chúng không có cách đơn giản để lấy nguồn cấp dữ liệu ở các định dạng như RSS. Tôi rất thích có thể sử dụng topicdeck tổng hợp topicdeck của mình với các danh mục lỗi, v.v. vì vậy tôi có bảng điều khiển về tất cả những điều tôi quan tâm dựa trên thông tin mới nhất từ mỗi trình theo dõi lỗi.

Brexit: History will judge us all

Paul Kinlan

Lịch sử sẽ phán xét tất cả chúng ta về mớ hỗn độn này, và tôi hy vọng nó sẽ là một trường hợp nghiên cứu cho tất cả các tác động của chủ nghĩa dân tộc, lợi ích cá nhân, sự kiêu ngạo thuộc địa, người nổi tiếng

Đồ ngu.

File Web Share Target

Paul Kinlan

Tôi thường nói rằng để các ứng dụng web cạnh tranh hiệu quả trong thế giới ứng dụng, chúng cần được tích hợp vào tất cả các địa điểm mà người dùng mong đợi ứng dụng. Giao tiếp giữa các ứng dụng là một trong những phần bị thiếu chính của nền tảng web và cụ thể một trong những tính năng bị thiếu chính cuối cùng là chia sẻ cấp độ bản địa: Các ứng dụng web cần có thể có được data out of their silo và vào các trang web và ứng dụng khác; họ cũng cần có khả năng nhận dữ liệu từ các ứng dụng và trang web gốc khác.

Read More

Testing-file-share-target-from-camera

Paul Kinlan

Đây là thử nghiệm chia sẻ trực tiếp từ ứng dụng camera. Có vẻ như nó đã làm việc :)

Read More

testing-file-share-target

Paul Kinlan

Đây là bản thử nghiệm API mục tiêu chia sẻ trên Android và đó là khả năng chia sẻ tệp. Nếu bạn thấy một cái gì đó ở đây, thì tất cả đều tốt :)

Read More

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

Paul Kinlan

Ricky Mondello trên nhóm Safari vừa mới chia sẻ một lưu ý về cách Twitter sử dụng thông số ./well- Unknown / exchange -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 .

Tính năng này hoàn toàn vượt qua tôi nhưng đó là một ý tưởng gọn gàng: được cung cấp một tệp ở một vị trí nổi tiếng, trình duyệt có thể cung cấp UI cho người dùng cho phép họ nhanh chóng đặt lại mật khẩu mà không phải điều hướng giao diện người dùng phức tạp ..

Thông số kỹ thuật rất đơn giản: tệp nổi tiếng chỉ chứa URL để hướng người dùng đến khi họ muốn thực hiện hành động. Điều này dẫn tôi đến suy nghĩ, chúng ta có thể cung cấp nhiều tính năng hơn không:

  • Vị trí nổi tiếng cho các mô hình chấp thuận dựa trên GDPR (đồng ý cookie) - chủ sở hữu trang web có thể cung cấp liên kết đến trang nơi người dùng có thể quản lý và có khả năng thu hồi tất cả cookie và các mục đồng ý dữ liệu khác.
  • Một vị trí nổi tiếng để quản lý cấp phép trình duyệt - chủ sở hữu trang web có thể cung cấp một nơi nhanh chóng để người dùng có thể thu hồi quyền đối với những thứ như vị trí địa lý, thông báo và các nguyên thủy khác.
  • Một đường dẫn nổi tiếng để xóa tài khoản và thay đổi
  • Một đường dẫn nổi tiếng để quản lý đăng ký danh sách gửi thư

Danh sách này tiếp tục …. Tôi thực sự thích ý tưởng cho các tệp chuyển hướng đơn giản để giúp người dùng khám phá các hành động phổ biến của người dùng và để một cách để trình duyệt hiển thị nó.

pinch-zoom-element

Paul Kinlan

Jake và nhóm đã xây dựng yếu tố tùy chỉnh khá tuyệt vời này để quản lý thu phóng pinch trên bất kỳ bộ HTML nào bên ngoài động lực học pinch-zoom của trình duyệt (nghĩ rằng phóng to khung nhìn di động). Yếu tố này là một trong những thành phần trung tâm mà chúng tôi cần cho ứng dụng squoosh mà chúng tôi đã xây dựng và phát hành tại Chrome Dev Summit (… Tôi nói rằng 'được phát hành tại Chrome Dev Summit' - Jake đã hiển thị cho mọi người tại Ngày nhà phát triển Google Trung Quốc mặc dù phần còn lại của đội bị cấm vận;) …)

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

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

Read full post .

Tôi vừa thêm nó vào blog của mình (chỉ mất vài phút), bạn có thể kiểm tra nó trên phần ' life ' của tôi nơi tôi chia sẻ ảnh mà tôi đã chụp. Nếu bạn đang sử dụng thiết bị hỗ trợ cảm ứng, bạn có thể nhanh chóng thu nhỏ phần tử, nếu bạn đang sử dụng bàn phím có thể xử lý nhiều đầu vào ngón tay cũng hoạt động.

Yếu tố này là một ví dụ tuyệt vời về lý do tại sao tôi yêu các thành phần web như một mô hình để tạo các thành phần giao diện người dùng. Phần tử pinch-zoom chỉ dưới 3kb trên dây (không nén) và phụ thuộc tối thiểu để xây dựng và nó chỉ thực hiện một công việc đặc biệt tốt, mà không cần sử dụng logic cấp độ ứng dụng tùy chỉnh nào khiến nó khó sử dụng (Tôi có một số suy nghĩ về logic UI vs các thành phần logic ứng dụng mà tôi sẽ chia sẻ dựa trên việc học của tôi từ ứng dụng Squoosh).

Tôi rất thích thấy các yếu tố như thế này nhận được nhiều nhận thức và sử dụng hơn, ví dụ tôi có thể tưởng tượng rằng yếu tố này có thể thay thế hoặc tiêu chuẩn hóa chức năng thu phóng hình ảnh mà bạn thấy trên nhiều trang web thương mại và mãi mãi lấy đi nỗi đau đó từ các nhà phát triển.

Registering as a Share Target with the Web Share Target API

Paul Kinlan

Pete LePage giới thiệu API mục tiêu chia sẻ web và tính khả dụng trong Chrome thông qua bản dùng thử gốc

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 .

API này là một công cụ thay đổi trò chơi trên web, nó mở web lên một thứ chỉ có sẵn cho các ứng dụng gốc: Chia sẻ gốc. Các ứng dụng là silo, chúng hút tất cả dữ liệu và làm cho nó khó truy cập trên các nền tảng. Chia sẻ mục tiêu bắt đầu san bằng sân chơi để web có thể chơi trong cùng một trò chơi.

Trải nghiệm Twitter Mobile có Chia sẻ mục tiêu already enabled . Bài đăng này được tạo bằng cách sử dụng Mục tiêu chia sẻ mà tôi đã xác định trong bảng điều khiển quản trị trang ' manifest.json - nó hoạt động khá tốt và ngay khi họ hỗ trợ tệp, tôi sẽ có thể đăng bất kỳ hình ảnh hoặc blob nào trên thiết bị của mình lên blog.

Thời gian rất thú vị.

Đọc bài đăng được liên kết để tìm hiểu thêm về dòng thời gian khi API này được phát hành và cách sử dụng API.

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

Paul Kinlan

Một bài viết và video và mẫu tuyệt vời của Thomas Steiner về các thông báo đẩy tốt trên 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 là một API mạnh mẽ đáng kinh ngạc, nhưng nó dễ lạm dụng và gây khó chịu cho người dùng của bạn. Điều tồi tệ cho trang web của bạn là nếu người dùng chặn thông báo vì bạn nhắc mà không cảnh báo, thì bạn không có cơ hội để hỏi lại.

Đối xử với người dùng của bạn với sự tôn trọng, Bối cảnh là vua cho các thông báo Đẩy Web.

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

Paul Kinlan

Kayce Basques, một nhà văn công nghệ tuyệt vời trong nhóm của chúng tôi đã viết một bài báo khá tuyệt vời về kinh nghiệm của anh ta đo lường cách thức tài liệu tốt nhất hiện hành hoạt động tốt để giải thích tài liệu kỹ thuật. Thực tiễn tốt nhất theo nghĩa này có thể là các tiêu chuẩn công nghiệp nổi tiếng về văn bản kỹ thuật, hoặc nó có thể là hướng dẫn phong cách viết của công ty bạn. Kiểm tra nó ra!

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 .

Mặc dù tôi không phải là một nhà văn công nghệ, vai trò của tôi liên quan đến một lượng lớn sự tham gia với nhóm viết công nghệ của chúng tôi cũng như xuất bản rất nhiều 'thực tiễn tốt nhất' cho chính các nhà phát triển. Tôi đã rất ngạc nhiên bởi bao nhiêu chiều sâu và nghiên cứu mà Kayce đã thực hiện về nghệ thuật viết các tài liệu hiện đại thông qua lăng kính của nội dung nhóm chúng tôi. Tôi hoàn toàn khuyến khích bạn đọc sâu bài viết của Kayce - tôi đã học được rất nhiều. Cảm ơn bạn 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

Tôi đã ở Trung Quốc vài tuần trước cho Ngày nhà phát triển của Google và tôi đã hiển thị cho mọi người [Trình quét QRCode] của tôi (0), nó hoạt động tốt cho đến khi tôi ngoại tuyến. Khi người dùng ngoại tuyến (hoặc được kết nối một phần) máy ảnh sẽ không khởi động, điều đó có nghĩa là bạn không thể chụp mã QR. Nó đã cho tôi một tuổi để làm việc ra những gì đang xảy ra, và nó chỉ ra tôi đã nhầm lẫn bắt đầu máy ảnh trong sự kiện onload của tôi và yêu cầu Google Analytics sẽ treo và không giải quyết một cách kịp thời. Đó là cam kết cố định nó.

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.

Đọc toàn bộ bài đăng.

Tôi khuyến khích bạn đọc bài đăng vì có rất nhiều thông tin chi tiết tuyệt vời.

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

Paul Kinlan

Vào cuối tuần, tôi đã chơi với bộ mã hóa video hiệu ứng Boomerang, bạn có thể làm cho nó hoạt động gần thời gian thực (tôi sẽ giải thích sau). Tôi đã làm việc trên Chrome trên máy tính để bàn, nhưng nó sẽ không bao giờ hoạt động bình thường trên Chrome trên Android. Xem mã ở đây.

Có vẻ như khi bạn sử dụng captureStream () trên một <canvas>có độ phân giải tương đối lớn (1280x720 trong trường hợp của tôi) API MediaRecorder sẽ không thể mã hóa video và nó sẽ không lỗi và bạn không thể phát hiện ra rằng nó không thể mã hóa video trước thời hạn.

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

Đọc toàn bộ bài đăng.

Nếu bạn muốn chơi xung quanh với bản demo hoạt động trên cả hai thì nhấp vào đây

Why Microsoft and Google love progressive web apps | Computerworld

Paul Kinlan

Một bài đăng hay về PWA từ Mike Elgan. Tôi không chắc chắn về mục tiêu của Microsoft với PWA, nhưng tôi nghĩ rằng chúng tôi khá đơn giản: chúng tôi muốn người dùng có quyền truy cập vào nội dung và chức năng ngay lập tức và theo cách họ mong đợi để có thể tương tác với nó trên thiết bị của họ. Web sẽ tiếp cận mọi người trên mọi thiết bị được kết nối và người dùng có thể truy cập vào phương thức ưa thích của họ, dưới dạng ứng dụng nếu đó là cách họ mong đợi (di động, có thể) hoặc giọng nói trên trợ lý, v.v.

Chúng tôi vẫn còn là một cách xa web không đầu, tuy nhiên, có một điều thực sự khiến tôi trong bài viết:

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

Đọc toàn bộ bài đăng.

Các trang web và ứng dụng trên web không được phân tách, web là liên kết, có thể lập chỉ mục, tạm thời, nhưng chúng tôi đang nhận được nhiều thông tin hơn với từng trang web mà chúng tôi xây dựng. Chúng tôi đang tạo ra các silo không mong muốn vì nền tảng không dễ dàng cho phép người dùng nhận * dữ liệu của họ trong và ngoài các trang web dễ dàng. Tôi không nói về RDF hay bất cứ thứ gì như vậy, các thao tác cơ bản như sao chép và dán, kéo và thả, chia sẻ lên trang web và chia sẻ từ trang web bị hỏng trên web ngày hôm nay, và đó là trước khi chúng tôi truy cập IPC giữa các khung, công nhân và cửa sổ.

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

Paul Kinlan

Bạn sẽ có thể tạo và chỉnh sửa video chỉ bằng cách sử dụng web trong trình duyệt. Bạn có thể cung cấp giao diện người dùng giống như Luồng màn hình cho phép bạn tạo video đầu ra kết hợp nhiều video, hình ảnh và âm thanh thành một video có thể tải lên các dịch vụ như YouTube. Tiếp theo từ [bài viết trước] của tôi (0) mô tả ngắn gọn các yêu cầu của trình chỉnh sửa video, trong bài viết này tôi chỉ muốn nhanh chóng hiển thị trên màn hình cách tôi đã xây dựng máy ghi web cam và cách xây dựng một màn hình máy ghi âm :)

Read More

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

Paul Kinlan

Vấn đề đầu tiên tôi tìm thấy là cố gắng xây dựng trình chỉnh sửa video trên web.

Tôi có nhiều luồng video (máy tính để bàn và web cam) và tôi muốn có thể chuyển đổi giữa các luồng video trên một phần tử video để tôi có thể nhanh chóng chuyển đổi giữa web cam và màn hình nền và không phá vỡ MediaRecorder.

Có vẻ như bạn có thể làm điều đó thông qua việc chuyển đổi thuộc tính selected trên đối tượngvideoTracks trên <video>phần tử, nhưng bạn không thể, mảng các bản nhạc chỉ chứa 1 phần tử (đoạn video đầu tiên trên 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.

Đọc toàn bộ bài đăng.

Repro case.

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

Bạn sẽ có thể tạo và chỉnh sửa video chỉ bằng cách sử dụng web trong trình duyệt. Bạn có thể cung cấp giao diện người dùng giống như Luồng màn hình cho phép bạn tạo video đầu ra kết hợp nhiều video, hình ảnh và âm thanh thành một video có thể tải lên các dịch vụ như YouTube. Bài đăng này thực sự chỉ là một tuyên bố về ý định.

Read More

Barcode detection in a Web Worker using Comlink

Paul Kinlan

Tôi là một fan hâm mộ lớn của QRCodes, họ rất đơn giản và gọn gàng để trao đổi dữ liệu giữa thế giới thực và thế giới kỹ thuật số. Trong một vài năm nay tôi đã có một dự án nhỏ bên gọi là QRSnapper & mdash; nó cũng có một vài cái tên, nhưng đây là cái tôi đã giải quyết trên & mdash; sử dụng API getUserMedia để lấy dữ liệu trực tiếp từ máy ảnh của người dùng để nó có thể quét mã QR trong thời gian thực gần.

Mục tiêu của ứng dụng là duy trì 60 khung hình / giây trong giao diện người dùng và gần ngay lập tức phát hiện Mã QR, điều này có nghĩa là tôi phải đặt mã phát hiện vào một Công nhân Web (những thứ khá chuẩn). Trong bài viết này, tôi chỉ muốn chia sẻ nhanh cách tôi sử dụng comlink để đơn giản hóa logic trong Worker.

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 (nhân viên 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);

Tôi thực sự yêu Comlink, tôi nghĩ rằng đó là một sự thay đổi trò chơi của một thư viện đặc biệt là khi nói đến việc tạo JavaScript thành ngữ hoạt động trên các chủ đề. Cuối cùng là một điều gọn gàng ở đây, đó là API phát hiện mã vạch gốc có thể được chạy bên trong một nhân viên để tất cả logic được gói gọn khỏi giao diện người dùng.

Đọc toàn bộ bài đăng.