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

François Beaufort

Elad Alon

Nền tảng web đã cho phép ứng dụng web quay video của thẻ hiện tại. Hiện tại, tính năng này đi kèm với tính năng Chụp vùng, một cơ chế để cắt các kênh 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 nằm ngoài khu vực đó.

Trước đây, các ứng dụng web có thể cắt các kênh video "theo cách thủ công". Tức là các ứng dụng web có thể trực tiếp thao tác với từng khung hình. Cách này không mạnh mẽ và hiệu quả. Tính năng Chụp vùng giải quyết những điểm yếu 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 vùng

Vậy là bạn đã tạo một trang web bằng Dynamic Content™. Đây là ứng dụng web tốt nhất từ trước đến nay và mọi người không thể ngừng sử dụng ứng dụng này, thường là cùng nhau. Bước tiếp theo có thể là nhúng các tính năng hội nghị ảo. Bạn quyết định làm như vậy. 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ó, nhúng ứng dụng web của họ dưới dạng iframe đa 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.

Chậm lại một chút… Bạn không muốn gửi lại video của chính họ cho họ chứ? Tốt hơn là bạn nên cắt bỏ phần đó. Nhưng làm 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. Về lý thuyết, bạn có thể truyền 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 về 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 sai.

Hãy sử dụng tính năng Chụp vùng. Trang của bạn có một Element, có thể là <div> chứa nội dung chính. Hãy gọi lớp này là mainContentArea. Bạn muốn ứng dụng web hội nghị truyền hình chụp 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. Vì vậy, bạn sẽ lấy CropTarget từ mainContentArea. Bạn truyền CropTarget này đến ứng dụng web hội nghị truyền hình. Sau khi cắt bớt kênh video bằng CropTarget này, các khung trên kênh đó hiện 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 truyề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 video theo khu vực do CropTarget xác định bằng cách gọi cropTo() trên kênh video tự quay có mục tiêu cắt được nhận 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.

Et voilà! 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 phân giải bằng đối tượng CropTarget mới nếu thành công. Nếu không, yêu cầu này sẽ bị từ chối nếu bạn đã tạo một 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ự. Bạn có thể chuyển giá trị này đến một tài liệu khác bằng cách sử dụng Window.postMessage().

Cắt

Khi chụp thẻ, kênh video được tạo bản sao 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 viền của mainContentArea (Phần tử mà cropTarget được lấy từ đó).

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. (Hãy chú ý theo dõi trong thời gian tớ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; hãy xem bên dưới.

Phương thức cropTo() được hiển thị trên mọi kênh video quay lại thẻ, chứ không chỉ dành cho tính năng 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 chụp. Bạn cũng có thể yêu cầu trình duyệt nhắc người dùng tự chụp bằng preferCurrentTab.

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

Để quay lại trạng thái chưa cắt, hãy gọi cropTo() bằng null.

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

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

Đối với tính năng Chụp vùng, chỉ vị trí và kích thước của mục tiêu mới quan trọng, chứ không phải chỉ mục z. Các pixel che khuất mục tiêu sẽ được chụp. Các 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 phương án thay thế, sẽ là API riêng trong tương lai, là tính năng Chụ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. API như vậy có một bộ yêu cầu bảo mật và quyền riêng tư khác với việc cắt đơn giản.

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

Tính năng Chụp vùng cho phép một ứng dụng web đang quan sát tất cả các pixel trong thẻ tự nguyện xoá một số pixel đó. Công cụ này có tính bảo mật rõ ràng vì không thể thu thập thông tin mới.

Bạn có thể sử dụng tính năng Chụp vùng để giới hạn thông tin được gửi đến 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 muốn chia sẻ ghi chú của người nói.

Xin lưu ý rằng tính năng Chụp vùng trên thiết bị không đảm bảo bất kỳ yếu tố bảo mật nào. Khi chuyển một bản nhạc sang một tài liệu khác, tài liệu nhận vẫn có thể huỷ cắt bản nhạc và truy cập vào tất cả các pixel của thẻ đã chụp.

Chrome vẽ đường viền màu xanh dương xung quanh các cạnh của thẻ đã chụp. Khi cắt, Chrome thường vẽ đường viền màu xanh dương xung quanh mục tiêu đã 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 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.

Bước tiếp theo

Sau đây là thông tin xem trước về những tính năng sắp ra mắt 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 vùng sẽ hỗ trợ tính năng chụp các thẻ khác.
• Tính năng 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 sự thay đổi tiêu điểm như vậy.
• 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ế

Tính năng Chụp vùng không hoạt động như mong đợi? 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?

• Gửi 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ào một vấn đề hiện có.

Bạn gặp vấn đề khi 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?

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

Thể hiện sự ủng hộ

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

Hãy gửi một tweet đến @ChromiumDev và cho chúng tôi biết bạn đang sử dụng công cụ này ở đâu và như thế nào.

Đường liên kết hữu ích

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

Lời cảm ơn

Cảm ơn Joe Medley đã xem xét bài viết này.