RestrictionTarget: phương thức tĩnh fromElement()
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Phương thức tĩnh fromElement() của giao diện RestrictionTarget trả về phiên bản RestrictionTarget có thể được sử dụng để giới hạn track video bị capture vào một phần tử DOM cụ thể (cùng với các phần tử con của nó).
Cú pháp
RestrictionTarget.fromElement(element)
Tham số
element-
Tham chiếu đến
Elementbạn muốn sử dụng làm restriction target. Để một phần tử có thể được dùng làm restriction target, nó phải:- Tạo thành stacking context.
- Được làm phẳng trong không gian 3D (ví dụ: không được áp dụng bất kỳ biến đổi 3D nào).
- Được hiển thị (ví dụ: không nằm ngoài màn hình hoặc ẩn qua
display: none). - Chứa chỉ một hộp fragment (ví dụ: không bị phân tách trên nhiều dòng).
Nếu không đáp ứng các tiêu chí trên, nó được coi là không đủ điều kiện cho restriction.
Ngoài ra, phần tử sẽ không được capture nếu track đang bị giới hạn có các bản sao (tức là được tạo bởi
BrowserCaptureMediaStreamTrack.clone()) hoặc được capture từ tab khác so với tab hiện tại của người dùng.
Note: Khi phần tử được capture, bất kỳ giá trị alpha-channel nào được đặt trên nó đều không được bao gồm. Nếu phần tử restriction target bán trong suốt, nó sẽ xuất hiện hoàn toàn không trong suốt trong capture.
Giá trị trả về
Một Promise được phân giải thành đối tượng RestrictionTarget, sau đó có thể được truyền vào BrowserCaptureMediaStreamTrack.restrictTo() để giới hạn video được capture trong track vào phần tử DOM cụ thể mà RestrictionTarget được tạo cùng.
Các đối tượng RestrictionTarget có thể được tuần tự hóa. Chúng có thể được truyền đến tài liệu khác bằng các cơ chế như Window.postMessage().
Promise sẽ bị từ chối nếu phần tử restriction target không đủ điều kiện.
Ví dụ
// Tùy chọn cho getDisplayMedia()
const displayMediaOptions = {
preferCurrentTab: true,
};
// Tạo restriction target từ phần tử DOM
const demoElem = document.querySelector("#demo");
const restrictionTarget = await RestrictionTarget.fromElement(demoElem);
// Capture luồng video từ webcam của người dùng và tách track video
const stream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
const [track] = stream.getVideoTracks();
// Giới hạn track video
await track.restrictTo(restrictionTarget);
// Phát luồng bị giới hạn trong phần tử <video>
videoElem.srcObject = stream;
Xem Using the Element Capture and Region Capture APIs để biết ví dụ mã trong ngữ cảnh.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Element Capture # dom-restrictiontarget-fromelement |