카메라 이동, 기울이기, 확대/축소를 제어합니다.

카메라의 화면 이동, 기울이기, 확대/축소 기능을 웹에서 마지막으로 제어할 수 있습니다.

François Beaufort
François Beaufort
GitHub

팬, 틸트, 확대/축소 기능을 갖춘 카메라를 배포하는 회의실 규모의 화상 회의 솔루션 (PTZ) 기능을 사용하여 회의에서 소프트웨어가 카메라를 가리킬 수 있도록 합니다. 있습니다. Chrome 87부터 화면 이동, 기울이기, 확대/축소 기능이 사용 설정됩니다. 카메라는 미디어 트랙 제약 조건을 사용하여 MediaDevices.getUserMedia() 및 MediaStreamTrack.applyConstraints()

API 사용

특성 감지

하드웨어의 기능 감지는 익숙한 방식과 다릅니다. "pan", "tilt", "zoom" 제약조건 이름이 navigator.mediaDevices.getSupportedConstraints()는 브라우저가 카메라 PTZ를 제어하는 API를 지원하지만 카메라 하드웨어가 지원합니다 Chrome 87부터 카메라 PTZ 제어가 지원됩니다. 데스크톱에서 확대/축소만 지원합니다.

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

카메라 PTZ 액세스 요청

사용자가 명시적으로 카메라 PTZ를 제어하는 경우에만 웹사이트에서 카메라 PTZ를 제어할 수 있습니다. 메시지를 통해 카메라에 PTZ 권한을 부여했습니다.

카메라 PTZ 액세스를 요청하려면 navigator.mediaDevices.getUserMedia()를 호출하세요. PTZ 제약 조건을 적용할 수 있습니다. 그러면 사용자에게 두 가지 권한을 모두 부여하라는 메시지가 표시됩니다. 일반 카메라 및 PTZ 권한이 있는 카메라를 사용할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> macOS용 Chrome의 카메라 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);
}

Chromium 기반 브라우저가 카메라의 PTZ를 지원하는지 확인하려면 다음으로 이동하세요. 내부 about://media-internals 페이지를 확인하고 '이동-기울이기-확대/축소'를 확인하세요. 열 '동영상 캡처' Tab; "팬 틸트" 및 '확대/축소' 각 카메라는 'PanTilt (절대)' '확대/축소 (절대)'를 선택합니다. UVC 컨트롤. 'PanTilt (relative)' 및 '확대/축소 (상대)'를 선택합니다. UVC 제어는 Chromium 기반 브라우저에서 지원되지 않습니다.

<ph type="x-smartling-placeholder">
</ph> PTZ 카메라 지원을 디버그할 수 있는 ChromeOS의 내부 페이지 스크린샷
PTZ 카메라 지원을 디버그하는 내부 페이지

카메라 PTZ 제어

미리보기를 사용하여 카메라 PTZ 기능 및 설정 조작 MediaStreamTrack는 이전에 가져온 stream 객체에서 가져옵니다. MediaStreamTrack.getCapabilities()는 지원되는 범위 또는 허용되는 값을 지정할 수 있습니다. 이에 따라 MediaStreamTrack.getSettings()는 현재 설정을 반환합니다.

화면 이동, 기울이기, 확대/축소 기능 및 설정은 카메라에 PTZ 권한을 부여했습니다.

<ph type="x-smartling-placeholder">
</ph>
카메라 PTZ를 제어합니다.

적절한 PTZ Advanced로 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...
}

또한 일부 카메라 PTZ 이상적인 제약 조건이 있는 navigator.mediaDevices.getUserMedia() 값으로 사용됩니다. 이 기능은 카메라 PTZ 기능을 미리 알고 있을 때 편리합니다. 참고 필수 제약 조건 (최소, 최대, 정확한)은 여기에서 허용되지 않습니다.

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});

놀이터

Glitch에서 데모를 실행하여 API를 사용해 볼 수 있습니다. 자세한 내용은 소스 코드에 있습니다.

보안 고려사항

사양 작성자는 핵심 API 및 API를 사용하여 이 API를 사용자 제어, 투명성, 인체공학을 포함합니다. 이 기능을 사용해 API는 주로 미디어 캡처 및 Streams API에 포함될 수 있습니다. 사용자 프롬프트에 따라 웹사이트에서 카메라 PTZ는 페이지가 사용자에게 표시될 때만 가능합니다.

브라우저 호환성

MediaStream API

브라우저 지원

  • 55
  • 12
  • 15
  • 11

소스

Permissions API

브라우저 지원

  • 43
  • 79
  • 46
  • 16

소스

페이지 가시성 API

브라우저 지원

  • 33
  • 12
  • 18
  • 7

소스

MediaDevices.getUserMedia()

브라우저 지원

  • 53
  • 12
  • 36
  • 11

소스

MediaDevices.getSupportedConstraints()

브라우저 지원

  • 53
  • 12
  • 44
  • 11

소스

MediaStreamTrack.applyConstraints()

브라우저 지원

  • 59
  • 12
  • 43
  • 11

소스

MediaStreamTrack.getCapabilities()

브라우저 지원

  • 59
  • 12
  • x
  • 11

소스

MediaStreamTrack.getSettings()

브라우저 지원

  • 59
  • 12
  • 50
  • 11

소스

유용한 링크

감사의 말씀

이 도움말은 Joe Medley와 Thomas Steiner가 검토했습니다. Intel의 Rijubrata Bhaumik과 Eero Häkkinen에게 감사드립니다. 사양 및 구현입니다. 히어로 이미지: Unsplash에 Christina @ wocintechchat.com 제공