BrowserCaptureMediaStreamTrack: phương thức cropTo()
Limited availability
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 cropTo() của giao diện BrowserCaptureMediaStreamTrack cắt một luồng tự quay thành vùng mà một phần tử DOM được chỉ định được hiển thị.
Syntax
cropTo(cropTarget)
Parameters
cropTarget-
Một thực thể
CropTargetbiểu diễn vùng hiển thị của phần tử mà luồng cần được cắt theo, hoặcnull/undefined, trong trường hợp đó mọi thao tác cắt đã đặt trước đó sẽ được gỡ khỏi track.
Return value
Một Promise hoàn tất với undefined.
Promise sẽ bị từ chối nếu:
- Track
kindkhông phải là"video", hoặcreadyStatecủa nó không phải là"live". - Phần tử crop target không còn tồn tại.
- Track đang bị cắt không phải là track được ghi lại từ màn hình của người dùng.
cropTargetkhông phải là một thực thểCropTarget,null, hoặcundefined.cropTargetđược tạo trong một tab khác với tab đang được ghi lại.
Note:
Trong Chromium, nếu một track có các bản sao, cropTo() sẽ bị từ chối (xem Chrome issue 41482026).
Examples
Ví dụ cắt cơ bản
// Options for getDisplayMedia()
const displayMediaOptions = {
preferCurrentTab: true,
};
// Create crop target from DOM element
const demoElem = document.querySelector("#demo");
const cropTarget = await CropTarget.fromElement(demoElem);
// Capture video stream from user's webcam and isolate video track
const stream =
await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
const [track] = stream.getVideoTracks();
// Crop video track
await track.cropTo(cropTarget);
// Broadcast cropped stream in <video> element
videoElem.srcObject = stream;
Xem Using the Element Capture and Region Capture APIs để biết mã ví dụ trong ngữ cảnh thực tế.
Dừng cắt
Bạn có thể dừng thao tác cắt bằng cách gọi cropTo() trên một track đã bị cắt trước đó và truyền đối số null:
// Stop cropping
await track.cropTo(null);
Specifications
| Specification |
|---|
| Region Capture # dom-browsercapturemediastreamtrack-cropto |