From f90d712c05d417d8ae8a93c424270b108bf9f020 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Beaufort?= Date: Thu, 1 Oct 2020 11:32:53 +0200 Subject: [PATCH] Add Pan-Tilt-Zoom Camera sample (#1361) * Add Pan-Tilt-Zoom Camera sample * Remove test --- index.html | 2 + .../getusermedia/pan-tilt-zoom/index.html | 79 ++++++++++++++++++ .../getusermedia/pan-tilt-zoom/js/main.js | 81 +++++++++++++++++++ 3 files changed, 162 insertions(+) create mode 100644 src/content/getusermedia/pan-tilt-zoom/index.html create mode 100644 src/content/getusermedia/pan-tilt-zoom/js/main.js diff --git a/index.html b/index.html index 0c59b3dd8..2b8ab58db 100644 --- a/index.html +++ b/index.html @@ -98,6 +98,8 @@

Record stream
  • Screensharing with getDisplayMedia
    • + +
  • Control camera pan, tilt, and zoom

    • Devices:

    Query media devices

    diff --git a/src/content/getusermedia/pan-tilt-zoom/index.html b/src/content/getusermedia/pan-tilt-zoom/index.html new file mode 100644 index 000000000..d6d4625c5 --- /dev/null +++ b/src/content/getusermedia/pan-tilt-zoom/index.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + Control camera pan, tilt, and zoom + + + + + + + + + + +
    +

    WebRTC samples + Control Pan-Tilt-Zoom Camera

    + + + + +
    +
    Pan:
    + +
    +
    +
    Tilt:
    + +
    +
    +
    Zoom:
    + +
    + +
    + +

    Display the video stream from getUserMedia() in a video + element and control pan, tilt, and zoom if camera supports Pan-Tilt-Zoom.

    + +

    The MediaStreamTrack object track is in + global scope, so you can inspect it from the console.

    + + View source on GitHub +
    + + + + + + + + diff --git a/src/content/getusermedia/pan-tilt-zoom/js/main.js b/src/content/getusermedia/pan-tilt-zoom/js/main.js new file mode 100644 index 000000000..b4631e1d7 --- /dev/null +++ b/src/content/getusermedia/pan-tilt-zoom/js/main.js @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2020 The WebRTC project authors. All Rights Reserved. + * + * Use of this source code is governed by a BSD-style license + * that can be found in the LICENSE file in the root of the source + * tree. + */ +'use strict'; + +// Put variables in global scope to make them available to the browser console. +const constraints = window.constraints = { + video: { + pan: true, tilt: true, zoom: true + } +}; + +function handleSuccess(stream) { + const video = document.querySelector('video'); + const videoTracks = stream.getVideoTracks(); + console.log('Got stream with constraints:', constraints); + console.log(`Using video device: ${videoTracks[0].label}`); + video.srcObject = stream; + + // make track variable available to browser console. + const [track] = [window.track] = stream.getVideoTracks(); + const capabilities = track.getCapabilities(); + const settings = track.getSettings(); + + for (const ptz of ['pan', 'tilt', 'zoom']) { + // Check whether camera supports pan/tilt/zoom. + if (!(ptz in settings)) { + errorMsg(`Camera does not support ${ptz}.`); + continue; + } + + // Map it to a slider element. + const input = document.querySelector(`input[name=${ptz}]`); + input.min = capabilities[ptz].min; + input.max = capabilities[ptz].max; + input.step = capabilities[ptz].step; + input.value = settings[ptz]; + input.disabled = false; + input.oninput = async event => { + try { + const constraints = {advanced: [{[ptz]: input.value}]}; + await track.applyConstraints(constraints); + } catch (err) { + console.error('applyConstraints() failed: ', err); + } + }; + } +} + +function handleError(error) { + if (error.name === 'NotAllowedError') { + errorMsg('Permissions have not been granted to use your camera, ' + + 'you need to allow the page access to your devices in ' + + 'order for the demo to work.'); + } + errorMsg(`getUserMedia error: ${error.name}`, error); +} + +function errorMsg(msg, error) { + const errorElement = document.querySelector('#errorMsg'); + errorElement.innerHTML += `

    ${msg}

    `; + if (typeof error !== 'undefined') { + console.error(error); + } +} + +async function init(e) { + try { + const stream = await navigator.mediaDevices.getUserMedia(constraints); + handleSuccess(stream); + e.target.disabled = true; + } catch (e) { + handleError(e); + } +} + +document.querySelector('#showVideo').addEventListener('click', e => init(e));