Chia sẻ thẻ hiệu quả hơn nhờ tính năng Chụp ảnh vùng

Nền tảng web đã cho phép ứng dụng web ghi lại đoạn video của thẻ hiện tại. Hiện công cụ này có sẵn tính năng Chụp ảnh theo vùng, một cơ chế cắt các bản video này. Ứng dụng web chỉ định một phần của thẻ hiện tại làm khu vực quan tâm và trình duyệt sẽ cắt tất cả các pixel bên ngoài khu vực đó.

Trước đây, các ứng dụng web có thể cắt các bản video "theo cách thủ công". Tức là các ứng dụng web có thể thao tác trực tiếp trên từng khung hình. Hiệu suất này không cao cũng không hiệu quả. Region Capture đã giải quyết được các thiếu sót này. Giờ đây, ứng dụng web có thể hướng dẫn trình duyệt thực hiện công việc thay cho trình duyệt.

Giới thiệu về tính năng Chụp ảnh khu vực

Vậy là bạn đã tạo được một trang web bằng Nội dung động. Đó là ứng dụng web tốt nhất từ trước đến nay và mọi người thường không thể ngừng sử dụng ứng dụng này, thường là theo cách cộng tác. Bạn có thể thực hiện bước tiếp theo là nhúng các tính năng của hội nghị truyền hình trực tuyến. Bạn quyết định chọn cách đó. Bạn hợp tác với một nhà cung cấp dịch vụ hội nghị truyền hình hiện có và nhúng ứng dụng web của họ dưới dạng iframe trên nhiều nguồn gốc. Ứng dụng hội nghị truyền hình trên web ghi lại thẻ hiện tại dưới dạng kênh video và truyền thẻ đó đến những người tham gia từ xa.

Không nhanh như vậy... Bạn thực sự không muốn truyền lại video của chính mọi người cho họ, phải không? Tốt hơn là bạn nên cắt bỏ phần đó. Nhưng bằng cách nào? iframe được nhúng không biết nội dung và vị trí mà bạn hiển thị, vì vậy, nó không thể cắt nếu không có sự trợ giúp. Theo lý thuyết, bạn có thể truyền các toạ độ dự định. Nhưng điều gì sẽ xảy ra nếu người dùng đổi kích thước cửa sổ? Cuộn khung nhìn? Phóng to hay thu nhỏ? Tương tác với trang theo cách tạo ra thay đổi bố cục? Ngay cả khi bạn gửi toạ độ mới đến iframe chụp, các vấn đề về thời gian vẫn có thể dẫn đến một số khung hình bị cắt nhầm.

Tiếp theo, hãy dùng tính năng Chụp ảnh khu vực. Trang của bạn có một Element, có thể là <div> chứa nội dung chính. Hãy đặt tên cho nó là mainContentArea. Bạn muốn ứng dụng web hội nghị truyền hình ghi lại và chia sẻ từ xa khu vực được xác định bằng hộp giới hạn của phần tử này. Do đó, bạn lấy được CropTarget từ mainContentArea. Bạn chuyển CropTarget này đến ứng dụng web hội nghị truyền hình. Sau khi cắt bản video bằng CropTarget này, khung hình trên bản nhạc đó giờ đây chỉ bao gồm các pixel nằm trong hộp giới hạn của mainContentArea. Nếu mainContentArea thay đổi kích thước, hình dạng hoặc vị trí, thì bản video sẽ tiếp tục phát mà không đòi hỏi bất kỳ thông tin đầu vào nào khác từ ứng dụng web.

Hãy cùng xem lại các bước sau:

Bạn xác định CropTarget trong ứng dụng web bằng cách gọi CropTarget.fromElement() với phần tử bạn chọn làm dữ liệu đầu vào.

// In the main web app, associate mainContentArea with a new CropTarget
const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Bạn chuyển CropTarget đến ứng dụng web hội nghị truyền hình.

// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);

Ứng dụng web hội nghị truyền hình yêu cầu trình duyệt cắt kênh theo vùng xác định bằng CropTarget bằng cách gọi cropTo() trên kênh video tự chụp với mục tiêu cắt nhận được từ ứng dụng web chính.

// In the embedded video conferencing web app, ask the user for permission
// to start capturing the current tab.
const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

// Start cropping the self-capture video track using the CropTarget
// received over window.onmessage.
await track.cropTo(cropTarget);

// Enjoy! Transmit remotely the cropped video track with RTCPeerConnection.

Thế là xong! Bạn đã hoàn tất.

Tìm hiểu chuyên sâu

Phát hiện tính năng

Để kiểm tra xem CropTarget.fromElement() có được hỗ trợ hay không, hãy sử dụng:

if ("CropTarget" in self && "fromElement" in CropTarget) {
  // Deriving a target is supported.
}

Lấy một CutTarget

Hãy tập trung vào Phần tử có tên là mainContentArea. Để lấy CropTarget từ đó, hãy gọi CropTarget.fromElement(mainContentArea). Lời hứa được trả về sẽ được giải quyết bằng đối tượng CropTarget mới nếu thành công. Nếu không, thuộc tính này sẽ bị từ chối nếu bạn tạo số lượng đối tượng CropTarget không hợp lý.

const mainContentArea = document.querySelector("#mainContentArea");
const cropTarget = await CropTarget.fromElement(mainContentArea);

Không giống như Element, đối tượng CropTarget có thể chuyển đổi tuần tự. Ví dụ: có thể truyền dữ liệu này đến một tài liệu khác bằng cách sử dụng Window.postMessage().

Cắt

Khi ghi hình thẻ, bản nhạc video được tạo thực thể dưới dạng BrowserCaptureMediaStreamTrack, là một lớp con của MediaStreamTrack. Lớp con đó hiển thị cropTo(). Gọi track.cropTo(cropTarget) để bắt đầu cắt theo đường bao của mainContentArea (Phần tử đã tạo ra cropTarget).

Nếu thành công, Promise sẽ được giải quyết khi có thể đảm bảo rằng tất cả các khung hình video tiếp theo sẽ chứa các pixel nằm trong hộp giới hạn của mainContentArea.

Nếu không thành công, Lời hứa sẽ bị từ chối. Điều này sẽ xảy ra nếu:

• CropTarget đã được tạo trong một thẻ khác. (Bây giờ, hãy chú ý theo dõi.)
• CropTarget được lấy từ một Phần tử không còn tồn tại.
• Bản nhạc có bản sao. (Xem vấn đề 1509418.)
• Bản nhạc hiện tại không phải là bản nhạc video tự quay; xem bên dưới.

Phương thức cropTo() hiển thị trên mọi bản video được chụp bằng thẻ, chứ không chỉ để tự quay. Do đó, nên kiểm tra xem người dùng có chọn thẻ hiện tại hay không trước khi cố gắng cắt kênh. Bạn có thể thực hiện việc này bằng cách sử dụng Tên người dùng để ghi lại. Bạn cũng có thể yêu cầu trình duyệt nhắc người dùng tự chụp ảnh bằng preferCurrentTab.

// Start cropping the self-capture video track using the CropTarget.
await track.cropTo(cropTarget);

Để chuyển về trạng thái chưa bị cắt, hãy gọi cropTo() bằng null.

// Stop cropping.
await track.cropTo(null);

Nội dung bị che khuất và che khuất

Đối với tính năng Chụp ảnh khu vực, chỉ vị trí và kích thước của vấn đề mục tiêu chứ không phải chỉ mục z. Điểm ảnh che khuất mục tiêu sẽ được chụp. Những phần bị che khuất của mục tiêu sẽ không được chụp.

Đây là hệ quả của việc Chụp ảnh khu vực về cơ bản là cắt ảnh. Một giải pháp thay thế, sẽ là API của chính mình trong tương lai, là Thu thập ở cấp phần tử; tức là chỉ chụp các pixel liên kết với mục tiêu, bất kể bị che khuất. Một API như vậy có các yêu cầu về bảo mật và quyền riêng tư khác với việc cắt xén đơn giản.

Bảo mật và quyền riêng tư

Tính năng Chụp ảnh khu vực cho phép một ứng dụng web đang quan sát tất cả các pixel trong thẻ tự nguyện xóa một số pixel đó. Đảm bảo an toàn tuyệt đối vì không thể thu thập thông tin mới.

Bạn có thể dùng tính năng Chụp ảnh khu vực để giới hạn thông tin nào được gửi đến những người tham gia từ xa. Ví dụ: có thể bạn muốn chia sẻ một số trang trình bày nhưng không chia sẻ ghi chú của người thuyết trình.

Xin lưu ý rằng trên thiết bị, tính năng Chụp ảnh khu vực không bổ sung thêm bất kỳ đảm bảo bảo mật nào. Khi chuyển giao một bản nhạc cho một tài liệu khác, tài liệu nhận vẫn có thể bỏ cắt bản nhạc đó và có được quyền truy cập vào tất cả các pixel của thẻ đã chụp.

Chrome vẽ một đường viền màu xanh dương xung quanh cạnh của các thẻ được chụp. Khi cắt, Chrome thường vẽ đường viền màu xanh dương xung quanh mục tiêu bị cắt.

Bản minh hoạ

Bạn có thể chơi với tính năng Chụp ảnh khu vực bằng cách chạy bản minh hoạ trên Glitch. Hãy hãy nhớ xem mã nguồn.

Hỗ trợ trình duyệt

Tính năng Chụp ảnh khu vực chỉ có trong Chrome 104 trên máy tính.

Các bước tiếp theo

Sau đây là thông tin sơ lược về những điều sẽ xảy ra trong tương lai gần giúp cải thiện tính năng chia sẻ màn hình trên web:

• Tính năng Chụp ảnh khu vực sẽ hỗ trợ chụp các thẻ khác.
• Chế độ Lấy nét có điều kiện sẽ cho phép ứng dụng web chụp ảnh hướng dẫn trình duyệt chuyển tiêu điểm sang giao diện hiển thị đã chụp hoặc tránh thay đổi tiêu điểm như vậy.
• Bạn có thể cung cấp API chụp ở cấp phần tử.

Phản hồi

Nhóm Chrome và cộng đồng tiêu chuẩn web muốn biết ý kiến của bạn về trải nghiệm của bạn với tính năng Chụp ảnh theo khu vực.

Hãy cho chúng tôi biết về thiết kế

Có điều gì đó về tính năng Chụp ảnh khu vực không hoạt động như bạn mong đợi không? Hay có phương thức hay thuộc tính nào bị thiếu để triển khai ý tưởng của bạn không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật này?

• Báo cáo vấn đề về thông số kỹ thuật trên kho lưu trữ GitHub hoặc thêm ý kiến của bạn về vấn đề hiện có.

Bạn gặp vấn đề trong quá trình triển khai?

Bạn có phát hiện lỗi trong quá trình triển khai Chrome không? Hay cách triển khai có khác với thông số kỹ thuật không?

• Báo cáo lỗi tại https://new.crbug.com. Hãy nhớ cung cấp nhiều thông tin chi tiết nhất có thể và hướng dẫn đơn giản để tái tạo. Glitch rất hữu ích khi chia sẻ các bản dựng lại nhanh chóng và dễ dàng.

Thể hiện sự ủng hộ

Bạn có định dùng tính năng Chụp ảnh khu vực không? Sự hỗ trợ công khai của bạn giúp nhóm Chrome ưu tiên các tính năng và cho thấy các nhà cung cấp trình duyệt khác quan trọng như thế nào trong việc hỗ trợ các tính năng đó.

Gửi một bài đăng đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và bằng cách nào.

Các đường liên kết hữu ích

• Thông số kỹ thuật
• Người giải thích
• Bài đánh giá TAG
• Lỗi Chromium
• Mục ChromeStatus.com

Xác nhận

Cảm ơn Joe Medley đã đánh giá bài viết này.