CropTarget

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性: 這是一項實驗性技術
在生產中使用此技術之前,請仔細檢查瀏覽器相容性表格

CropTarget 介面是 螢幕捕獲 API 的一部分,提供了一個靜態方法 fromElement(),該方法返回一個 CropTarget 例項,可用於將捕獲的影片軌道裁剪到指定元素渲染的區域。

靜態方法

fromElement() 實驗性

返回一個 CropTarget 例項,可用於將捕獲的影片軌道裁剪到指定元素渲染的區域。

示例

js
// 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;

有關上下文中的示例程式碼,請參閱 使用元素捕獲和區域捕獲 API

規範

規範
區域捕獲
# crop-target

瀏覽器相容性

另見