您現在可透過網路控制攝影機的平移、傾斜和縮放功能。
會議室規模的視訊會議解決方案部署攝影機,支援平移、傾斜和縮放功能
(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 權限)
![在 macOS 版 Chrome 中,相機 PTZ 使用者提示的螢幕截圖。](https://web.developers.google.cn/static/articles/camera-pan-tilt-zoom/image/screenshot-a-camera-ptz-d14912362e22f.jpg?authuser=2&hl=zh-tw)
傳回的承諾將以顯示 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 控制項。
![ChromeOS 內部頁面螢幕截圖,用於對 PTZ 相機支援功能進行偵錯。](https://web.developers.google.cn/static/articles/camera-pan-tilt-zoom/image/screenshot-the-internal-91bcb22280a07.png?authuser=2&hl=zh-tw)
控制相機 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。