您現在可透過網路控制攝影機的平移、傾斜和縮放功能。
會議室規模的視訊會議解決方案部署攝影機,支援平移、傾斜和縮放功能
(PTZ) 功能。如此一來,軟體就能在會議中將攝影機對準畫面
位參與者。自 Chrome 87 版起,平移、傾斜和縮放功能
只有使用以下媒體追蹤限制的網站才能使用攝影機:
《MediaDevices.getUserMedia()
》和《MediaStreamTrack.applyConstraints()
》。
使用 API
特徵偵測
硬體的功能偵測功能與您慣用的硬體功能不同。
其中含有 "pan"
、"tilt"
和 "zoom"
限制名稱:
navigator.mediaDevices.getSupportedConstraints()
會指出瀏覽器
這個 API 支援控制相機 PTZ,但無法控制相機硬體
但 AI 會支援該執行緒。自 Chrome 87 起,以下瀏覽器支援控制相機 PTZ
而 Android 裝置則仍只支援縮放功能。
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
要求相機 PTZ 存取權
網站只有在使用者明確指定時,才能控制攝影機 PTZ 已透過提示向相機授予 PTZ 權限。
如要要求相機 PTZ 存取權,請呼叫「navigator.mediaDevices.getUserMedia()
」:
PTZ 的限制條件,如下所示。這樣會提示使用者同時授予
一般相機和相機 (需具備 PTZ 權限)
傳回的承諾將以顯示 MediaStream
物件的方式解析,
即時為使用者提供攝影機影片串流如果攝影機不支援 PTZ,使用者
會收到一般的相機提示
try {
// User is prompted to grant both camera and PTZ access in a single call.
// If camera doesn't support PTZ, it falls back to a regular camera prompt.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to control camera PTZ as well without altering the
// current pan, tilt, and zoom settings.
video: { pan: true, tilt: true, zoom: true }
});
// Show camera video stream to user.
document.querySelector("video").srcObject = stream;
} catch (error) {
// User denies prompt or matching media is not available.
console.log(error);
}
一組先前授予的相機權限,特別是在沒有 PTZ 存取權的情況下 不會自動取得 PTZ 存取權。是 即使相機本身支援 PTZ 也能正常運作必須要求權限 可以選取「重新建立」,再次生成新的提示幸好,您可以使用 Permissions API 查詢和監控 PTZ 權限狀態
try {
const panTiltZoomPermissionStatus = await navigator.permissions.query({
name: "camera",
panTiltZoom: true
});
if (panTiltZoomPermissionStatus.state == "granted") {
// User has granted access to the website to control camera PTZ.
}
panTiltZoomPermissionStatus.addEventListener("change", () => {
// User has changed PTZ permission status.
});
} catch (error) {
console.log(error);
}
如要瞭解相機是否支援 PTZ,請參閱採用 Chromium 的瀏覽器
內部 about://media-internals
網頁,並查看「平移-傾斜縮放」功能欄
「影片擷取」分頁;「平移傾斜」和「zoom」分別代表相機支援
「PanTilt (絕對)」和「縮放 (絕對值)」UVC 控制項。「PanTilt (相對)」
和「縮放 (相對)」以 Chromium 為基礎的瀏覽器不支援 UVC 控制項。
控制相機 PTZ
使用預覽畫面操控相機 PTZ 功能和設定
MediaStreamTrack
,來自先前取得的 stream
物件。
MediaStreamTrack.getCapabilities()
會傳回包含支援的字典
並設定範圍或允許值。相對來說
MediaStreamTrack.getSettings()
會傳回目前的設定。
只有支援平移、傾斜和縮放等功能的 ,且使用者已授予相機 PTZ 權限。
使用適當的 PTZ 進階級呼叫 videoTrack.applyConstraints()
限制,可控制相機平移、傾斜和縮放功能,如下例所示。
如果成功,傳回的承諾就會解析。否則,
:
- 不會授予具有 PTZ 權限的相機。
- 相機硬體不支援 PTZ 限制
- 不會向使用者顯示的網頁內容使用 Page Visibility API 進行偵測 變更頁面的瀏覽權限。
// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();
// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
const input = document.querySelector("input[type=range]");
input.min = capabilities.pan.min;
input.max = capabilities.pan.max;
input.step = capabilities.pan.step;
input.value = settings.pan;
input.addEventListener("input", async () => {
await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
});
}
if ("tilt" in settings) {
// similar for tilt...
}
if ("zoom" in settings) {
// similar for zoom...
}
您也可透過呼叫
navigator.mediaDevices.getUserMedia()
搭配部分相機 PTZ 理想限制條件
輕鬆分配獎金假如相機功能是事先知道的 PTZ 功能,就很適合使用這項工具。注意事項
這裡不允許使用必要限制條件 (最小值、最大值、完全)。
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
遊樂場
如要試用這個 API,請在 Glitch 上執行示範操作。請務必結帳 原始碼
安全性考量
規格作者根據 包括使用者控制權、資訊公開以及人因工程學透過這項功能 API 主要受到與 媒體擷取和 Streams API:為了回應使用者提示,網站可以 。
瀏覽器相容性
MediaStream API
Permissions API
頁面瀏覽權限 API
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
實用連結
特別銘謝
本文由 Joe Medley 和 Thomas Steiner 審查。 感謝 Intel 員工 Rijubrata Bhaumik 和 Eero Häkkinen 進行研究 規格和實作方式 主頁橫幅來源:Christina @ wocintechchat.com,來源為 Unsplash。