Nền tảng web đã cho phép một ứng dụng web quay đoạn video của thẻ hiện tại. Tính năng này hiện được cung cấp tính năng Region Capture (Ghi lại khu vực), một cơ chế để cắt những 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 cắt tất cả các pixel bên ngoài khu vực đó.
Trước đây, ứng dụng web có thể cắt các đoạn video "theo cách thủ công". Tức là, ứng dụng web có thể chỉnh sửa trực tiếp từng khung hình. Chiến lược này không hiệu quả cũng như không hiệu quả. Khu vực Chụp ảnh đã khắc phục những 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 khu vực
Bạn đã tạo xong một trang web bằng Dynamic ContentTM. Đây 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à mang tính cộng tác. Bước tiếp theo có thể thực hiện là nhúng các tính năng hội nghị truyền hình ảo. Bạn quyết định đi với điều đó. 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 tại và nhúng ứng dụng web của họ dưới dạng iframe 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 làm kênh video và truyền thẻ đó đến người tham gia từ xa.
Không nhanh đến vậy... Giờ bạn không thực sự muốn truyền video của mọi người về họ phải không? Cắt phần đó đi. 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à ở đâu, do đó không thể cắt nếu không có trợ giúp. Về lý thuyết, bạn có thể truyền các 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ổ? 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 các toạ độ mới tới iframe chụp, vấn đề về thời gian vẫn có thể dẫn đến một số khung hình bị cắt sai.
Sau đó, hãy sử dụng tính năng Chụp khu vực. Có một Element trên trang của bạn, có thể là <div>, chứa nội dung chính. Hãy đặt tên tệp là mainContentArea. Bạn muốn ứng dụng hội nghị truyền hình trên web 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. Vì vậy, bạn sẽ nhận được CropTarget từ mainContentArea. Bạn chuyển CropTarget này đến ứng dụng hội nghị truyền hình trên web. Sau khi cắt bản nhạc bằng CropTarget này, các khung hình trên bản nhạc đó 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 hoạt động mà không yêu cầu dữ liệu đầu vào bổ sung 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() trong đó 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 hội nghị truyền hình trên web.
// Send the CropTarget to the video conferencing web app.
const iframe = document.querySelector("#videoConferenceIframe");
iframe.contentWindow.postMessage(cropTarget);
Ứng dụng hội nghị truyền hình trên web sẽ yêu cầu trình duyệt cắt kênh vào khu vực do CropTarget xác định bằng cách gọi cropTo() trên kênh video tự quay bằng 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.
Như thế là được! 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 dùng:
if ("CropTarget" in self && "fromElement" in CropTarget) {
// Deriving a target is supported.
}
Suy ra CropTarget
Hãy tập trung vào Phần tử có tên là mainContentArea. Để lấy giá trị 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, yêu cầu này sẽ bị từ chối nếu bạn đã đúc 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ự. Ví dụ: bạn có thể truyền tệp đến tài liệu khác bằng cách sử dụng Window.postMessage().
Cắt
Khi chụp ảnh bằng thẻ, bản sao của video sẽ được tạo bản sao dưới dạng BrowserCaptureMediaStreamTrack, là 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ử tạo ra cropTarget).
Nếu thành công thì Lời hứa sẽ được giải quyết khi có thể đảm bảo rằng tất 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 đúc trong một thẻ khác. (Tạm thời – hãy tiếp tục theo dõi.)CropTargetbắt nguồn 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.)
- Đoạn đường hiện tại không phải là đoạn video tự chụp; vui lòng xem bên dưới.
Phương thức cropTo() được hiển thị trên mọi đoạn video chụp bằng thẻ, chứ không chỉ để 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 thử cắt bớt kênh. Bạn có thể thực hiện việc này bằng cách sử dụng Capture Xử lý. 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);
Để 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à bị 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 đối tượng mục tiêu mới là vấn đề 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. 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 tính năng Chụp ảnh theo vùng về cơ bản là bị cắt. Một phương án thay thế (cũng sẽ là API riêng trong tương lai) là Chụp ảnh ở 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ể có trường hợp che khuất nào. API như vậy có bộ yêu cầu về bảo mật và quyền riêng tư khác với tính năng cắt đơn giản.
Mức độ 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ẻ có thể tự nguyện xoá một số pixel trong số đó. Công nghệ này được bảo mật rõ ràng vì không thể thu thập thông tin mới.
Bạn có thể dùng tính năng Chụp khu vực để giới hạn loại thông tin được gửi cho 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 thuyết trình.
Bạn không nên chia sẻ ghi chú từ xa. Chụp ảnh vùng tín hiệu.
Xin lưu ý rằng tại địa phương, tính năng Chụp khu vực không bổ sung bất kỳ đảm bảo bảo mật nào. Khi chuyển giao một tuyến đường cho một tài liệu khác, tài liệu nhận vẫn có thể bỏ cắt tuyến đường và 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 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 khu vực bằng cách chạy bản minh hoạ trên Glitch. Hãy xem qua mã nguồn.
Hỗ trợ trình duyệt
Hỗ trợ trình duyệt
- 104
- 104
- x
- x
Tính năng Chụp khu vực chỉ dùng được trong Chrome 104 trên máy tính.
Các bước tiếp theo
Sau đây là phần bật mí về những điều sẽ cải thiện tính năng chia sẻ màn hình trên web trong tương lai gần:
- Tính năng Chụp ảnh khu vực 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 ảnh hướng dẫn trình duyệt chuyển tiêu điểm sang giao diện màn hình đã chụp hoặc để tránh sự thay đổi tiêu điểm như vậy.
- Bạn có thể cung cấp API thu thập ở cấp phần tử.
Ý kiến phản hồi
Nhóm Chrome và cộng đồng tiêu chuẩn web muốn biết về trải nghiệm của bạn với tính năng Region Capture.
Cho chúng tôi biết về thiết kế
Có điều gì đó về tính năng Chụp ảnh vùng không hoạt động như bạn mong đợi 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 không? Bạn có câu hỏi hoặc nhận xét về mô hình bảo mật?
- Gửi một vấn đề về thông số kỹ thuật lên kho lưu trữ GitHub hoặc thêm ý kiến vào một vấn đề hiện có.
Bạn gặp vấn đề khi triển khai?
Bạn có tìm thấy lỗi khi triển khai Chrome không? Hay cách triển khai có khác với quy cách không?
- Gửi 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. Hiệu ứng nhiễu rất phù hợp để chia sẻ bản sao chép nhanh chóng và dễ dàng.
Hiển thị hỗ trợ
Bạn có định dùng tính năng Chụp ảnh vùng không? Hoạt động 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 các nhà cung cấp trình duyệt khác biết tầm quan trọng của việc hỗ trợ họ.
Gửi một bài đăng trên Twitter đến @ChromiumDev để cho chúng tôi biết vị trí và cách bạn sử dụng công cụ này.
Các đường liên kết hữu ích
Xác nhận
Cảm ơn Joe Medley đã xem lại bài viết này.