8

Nhấn vào đây để mở video trong một tab mới


Năm ngoái ngay trước Hội nghị thượng đỉnh Chrome Dev, Miguel Casas đã đến gặp tôi và cho tôi xem một thứ khiến tôi suy nghĩ: trong trình duyệt sử dụng API phát hiện hình dạng . Không lâu sau đó, điều đó cho phép tôi cập nhật trình quét Mã QR của mình để tôi không còn phải bao gồm một cổng khổng lồ (mặc dù tuyệt vời) của thư viện quét QR.

API phát hiện hình dạng vẫn đang được phát triển và cả API phát hiện mã vạch cũng như API phát hiện mã vạch đều có sẵn bên ngoài các thử nghiệm (bạn cần bật "Tính năng nền tảng web thử nghiệm" trong chrome: // flags) nhưng đó là không gian rất thú vị để xem và thấy khả năng nền tảng khác đang được mở ra cho các nhà phát triển và người dùng trên web.

Bổ sung mới nhất là API phát hiện văn bản sẽ chụp ảnh và quét nó để tìm văn bản có thể đọc được. Video ở đầu bài viết này là một ví dụ tuyệt vời (lưu ý, tôi đã đánh cắp một số mã từ Miguel nhưng đặt spin của riêng tôi vào đó, đáng chú ý là phần tổng hợp.)

Mô hình này hoàn toàn giống với API phát hiện khuôn mặt và mã vạch, bạn có được một hình ảnh (có thể là đối tượng img, canvas hoặc ImgData) và chuyển nó vào một thể hiện của loại trình phát hiện bạn muốn sử dụng. Bạn có thể xử lý kết quả và thực hiện một số hành động trên dữ liệu (ví dụ: vẽ trên hình ảnh nơi phát hiện mục). Trong trường hợp này, kết quả là một Mảng DetectedTextmà bạn có thể sử dụng để trích xuất văn bản được phát hiện.

Điều này hiện chỉ hoạt động trên Chrome Canary cho Android, nhưng nếu bạn muốn thử nghiệm hãy kiểm tra bản demo và quá trình này không quá đau đớn mặc dù mã của tôi rất khó tin. Tôi khá thích bản demo này, nó phát hiện văn bản trong hình ảnh, vẽ một hộp xung quanh văn bản và sau đó khi người dùng nhấp vào bên trong hộp giới hạn, nó sẽ đọc lại văn bản cho người dùng.

API không phức tạp một cách đáng kinh ngạc. Nếu bạn muốn tự thực hiện một cái gì đó, bạn có thể làm theo các bước sau:

1. Truy cập vào Camera

Truy vấn danh sách mediaDevices và chọn máy ảnh đầu tiên ở phía trước (lưu ý: có nhiều cách tốt hơn để làm điều này).

navigator.mediaDevices.enumerateDevices()
  .then((devices) => {
    let thedevice;
    for(let device of devices) {
      if (device.kind == 'videoinput') {
        thedevice = navigator.mediaDevices.getUserMedia({
          "video": {
            deviceId: {exact : device.deviceId},
            width: { max: 640 }
          }
        });
      }
    }
    return thedevice;
}) 

2. Chụp khung hình độ phân giải đầy đủ

capturer = new ImageCapture(theStream.getVideoTracks()[0]);
capturer.grabFrame().then(frame => {  /* */  })

3. Tạo TextDetectorvà bắt đầu phát hiện

var textDetector = new TextDetector(); 
return textDetector.detect(frame).then(boundingBoxes => { /* */ }) 

4. Xử lý kết quả

Đối với mỗi mục được phát hiện và phần tử sẽ xuất hiện trong mảng được truyền cho Lời hứa được trả về từ detecthàm. Sau đó, bạn có thể lặp lại mảng này, tìm vị trí của chúng trong hình ảnh và có quyền truy cập vào dữ liệu được phát hiện.

for(let box of boundingBoxes) {
  // box.boudingBox => DOMRect
  speechSynthesis.speak(new SpeechSynthesisUtterance(box.rawValue));
} 

Yup, tôi rất phấn khích!

API này mở ra rất nhiều khả năng thú vị cho người dùng như truy cập dễ dàng và rộng hơn vào các công nghệ hỗ trợ để phân tích nội dung trong hình ảnh; dịch văn bản thời gian thực bằng hình ảnh; trích xuất các url cho các slide tại các hội nghị (hoàn toàn sẽ thử và có một ứng dụng web sẵn sàng cho Google IO thực hiện điều này) ... đây chỉ là một vài ví dụ nhanh chóng xuất hiện trong tâm trí.

Bạn sẽ làm gì với API này?

|