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 một ứng dụng web ghi lại một bản video của thẻ hiện tại. Giờ đây, ứng dụng này đi kèm với tính năng Chụp một vùng màn hình, 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 vùng quan tâm và trình duyệt sẽ cắt tất cả các pixel bên ngoài vùng đó.

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 với từng khung hình. Cách này không hiệu quả và cũng không mạnh mẽ. Tính năng Chụp ảnh màn hình theo vùng khắc phục những điểm 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 ứng dụng.

Giới thiệu về tính năng Chụp ảnh màn hình theo vùng

Vậy là bạn đã tạo một trang web có Nội dung động™. Đây là ứng dụng web tuyệt vời 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. Một bước tiếp theo có thể là nhúng các tính năng hội nghị truyền hình. 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ó, nhúng ứng dụng web của họ dưới dạng iframe nhiều nguồn gốc. Ứng dụng web hội nghị truyền hình sẽ ghi lại thẻ hiện tại dưới dạng một bản video và truyền đến những người tham gia từ xa.

Không nhanh như vậy… Bạn không thực sự muốn truyền video của người dùng trở lại cho họ, phải không? 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 bạn hiển thị và vị trí hiển thị, vì vậy, iframe này không thể cắt nội dung nếu không có sự trợ giúp. Về lý thuyết, bạn có thể truyền toạ độ dự kiến. Nhưng điều gì sẽ xảy ra nếu người dùng đổi kích thước cửa sổ? Di chuyển khung hiển thị? Phóng to hay thu nhỏ? Tương tác với trang theo cách tạo ra sự thay đổi về bố cục? Ngay cả khi bạn gửi toạ độ mới đến iframe ghi hình, 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.

Vậy thì hãy sử dụng tính năng Chụp một vùng màn hình. Có một Element trên trang của bạn, có thể là một <div>, chứa nội dung chính. Hãy gọi tệp đó 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 vùng được xác định bằng khung giới hạn của phần tử này. Vì vậy, bạn sẽ lấy được 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 khung hình video bằng CropTarget này, các khung hình trên bản ghi đó giờ đây chỉ bao gồm những 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 phụ đề sẽ đi theo mà không cần thêm thông tin đầu vào nào từ ứng dụng web.

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

Bạn xác định một 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 bản ghi theo vùng do CropTarget xác định bằng cách gọi cropTo() trên bản ghi 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.

Et voilà! Vậy là xong.

Tìm hiểu sâu

Phát hiện đối tượ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 CropTarget

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). Promise được trả về sẽ được phân giải bằng một đối tượng CropTarget mới nếu thành công. Nếu không, yêu cầu 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ể truyền đối tượng này sang một tài liệu khác bằng cách sử dụng Window.postMessage(), chẳng hạn.

Cắt

Khi ghi lại thẻ, bản nhạc video sẽ được khởi tạo 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à từ đó cropTarget được lấy).

Nếu thành công, Lời hứa 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ẽ bao gồm các pixel nằm trong khung hình chữ nhật 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 đúc trong một thẻ khác. (Hiện tại thì chưa có, 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 phụ đề hiện tại không phải là bản phụ đề do người dùng tự tạo; hãy xem phần bên dưới.

Phương thức cropTo() được hiển thị trên mọi bản ghi video chụp màn hình thẻ chứ không chỉ dành cho tính năng tự chụp. Do đó, bạn nên kiểm tra xem người dùng có chọn thẻ hiện tại hay không trước khi tìm cách cắt bản nhạc. Bạn có thể thực hiện việc này bằng cách sử dụng Capture Handle (Xử lý 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 cách sử dụ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 theo vùng, chỉ có vị trí và kích thước của mục tiêu là quan trọng, chứ không phải z-index. Các pixel che khuất mục tiêu sẽ được ghi lại. Các phần bị che khuất của mục tiêu sẽ không được ghi lại.

Đây là hệ quả của việc Chụp một vùng màn hình về cơ bản là cắt. Một lựa chọ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 những pixel được liên kết với mục tiêu, bất kể có bị che khuất hay không. API như vậy có một bộ yêu cầu khác về bảo mật và quyền riêng tư so 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 ảnh theo 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 trong số đó. Phương pháp này hoàn toàn an toàn vì không thể thu thập thêm thông tin mới.

Bạn có thể dùng tính năng Ghi lại theo 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 ở cấp cục bộ, tính năng Chụp ảnh màn hình theo vùng không tăng cường bất kỳ biện pháp đảm bảo an ninh nào. Khi chuyển một đoạn video sang một tài liệu khác, tài liệu nhận được vẫn có thể cắt đoạn video đó và truy cập vào tất cả các pixel của thẻ được chụp.

Chrome vẽ một đường viền màu xanh dương xung quanh các cạnh của 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 được cắt.

Bản minh hoạ

Bạn có thể dùng thử tính năng Chụp theo vùng bằng cách chạy bản minh hoạ.

Hỗ trợ trình duyệt

Tính năng Chụp một phần màn hình chỉ có trên Chrome 104 dành cho máy tính.

Bước tiếp theo

Sau đây là thông tin sơ lược về những điểm cải tiến sắp tới đối với tính năng chia sẻ màn hình trên web:

• Công cụ Chụp vùng sẽ hỗ trợ chụp các thẻ khác.
• Tiêu điểm có điều kiện sẽ cho phép ứng dụng web chụp hướng dẫn trình duyệt chuyển tiêu điểm sang bề mặt hiển thị được chụp hoặc tránh thay đổi tiêu điểm như vậy.
• Có thể cung cấp một 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 trải nghiệm của bạn với tính năng Ghi lại theo vùng.

Cho chúng tôi biết về thiết kế

Có vấn đề nào về tính năng Chụp ảnh màn hình theo vùng mà bạn không hài lòng không? Hoặc có phương thức hoặc thuộc tính nào bị thiếu mà bạn cần triển khai ý tưởng của mình không? Bạn có câu hỏi hoặc bình luận về mô hình bảo mật?

• Gửi vấn đề về quy cách 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 thấy lỗi trong quá trình triển khai của Chrome không? Hoặc việc triển khai có khác với quy cách không?

• Báo cáo 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.

Thể hiện sự ủng hộ

Bạn có dự định sử dụng tính năng Chụp một vùng màn hình 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 này.

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

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

• Quy cách kỹ thuật
• Thông tin giải thích
• Bài đánh giá về 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.