Add Pan-Tilt-Zoom Camera sample

webrtc · Sep 30, 2020 · 5fd0f68 · 5fd0f68
1 parent c9e2171
commit 5fd0f68
Show file tree

Hide file tree

Showing 4 changed files with 183 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -98,6 +98,8 @@ <h2 id="getusermedia"><a href="https://developer.mozilla.org/en-US/docs/Web/API/
             <li><a href="src/content/getusermedia/record/">Record stream</a></li>
 
             <li><a href="src/content/getusermedia/getdisplaymedia/">Screensharing with getDisplayMedia</a></li>
+
+            <li><a href="src/content/getusermedia/pan-tilt-zoom/">Control camera pan, tilt, and zoom</a></li>
         </ul>
         <h2 id="devices">Devices:</h2>
         <p class="description">Query media devices</p>

diff --git a/src/content/getusermedia/pan-tilt-zoom/index.html b/src/content/getusermedia/pan-tilt-zoom/index.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!--
+ *  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.
+-->
+<html>
+<head>
+
+    <meta charset="utf-8">
+    <meta name="description" content="WebRTC code samples">
+    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
+    <meta itemprop="description" content="Client-side WebRTC code samples">
+    <meta itemprop="image" content="../../../images/webrtc-icon-192x192.png">
+    <meta itemprop="name" content="WebRTC code samples">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta id="theme-color" name="theme-color" content="#ffffff">
+
+    <base target="_blank">
+
+    <title>Control camera pan, tilt, and zoom</title>
+
+    <link rel="icon" sizes="192x192" href="../../../images/webrtc-icon-192x192.png">
+    <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="../../../css/main.css">
+
+    <style>
+        div.label {
+            display: inline-block;
+            font-weight: 400;
+            margin: 0 0.5em 0 0;
+            width: 3.5em;
+        }
+    </style>
+</head>
+
+<body>
+
+<div id="container">
+    <h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a>
+        <span>Control Pan-Tilt-Zoom Camera</span></h1>
+
+    <video id="gum-local" autoplay playsinline></video>
+    <button id="showVideo">Open camera</button>
+
+    <div>
+        <div class="label">Pan:</div>
+        <input name="pan" type="range" disabled>
+    </div>
+    <div>
+        <div class="label">Tilt:</div>
+        <input name="tilt" type="range" disabled>
+    </div>
+    <div>
+        <div class="label">Zoom:</div>
+        <input name="zoom" type="range" disabled>
+    </div>
+
+    <div id="errorMsg"></div>
+
+    <p>Display the video stream from <code>getUserMedia()</code> in a video
+    element and control pan, tilt, and zoom if camera supports Pan-Tilt-Zoom.</p>
+
+    <p>The <code>MediaStreamTrack</code> object <code>track</code> is in
+        global scope, so you can inspect it from the console.</p>
+
+    <a href="https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/pan-tilt-zoom"
+       title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
+</div>
+
+<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+<script src="js/main.js"></script>
+
+<script src="../../../js/lib/ga.js"></script>
+
+</body>
+</html>
diff --git a/src/content/getusermedia/pan-tilt-zoom/js/main.js b/src/content/getusermedia/pan-tilt-zoom/js/main.js
@@ -0,0 +1,82 @@
+/*
+ *  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;
+
+  const [track] = stream.getVideoTracks();
+  const capabilities = track.getCapabilities();
+  const settings = track.getSettings();
+
+  window.track = track; // make variable available to browser console
+
+  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 += `<p>${msg}</p>`;
+  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));
diff --git a/src/content/getusermedia/pan-tilt-zoom/test/test.js b/src/content/getusermedia/pan-tilt-zoom/test/test.js
@@ -0,0 +1,20 @@
+/*
+ *  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.
+ */
+export default {
+  'It should have a video element': (browser) => {
+    const path = '/src/content/getusermedia/pan-tilt-zoom/index.html';
+    const url = 'file://' + process.cwd() + path;
+
+    browser.url(url)
+        .waitForElementVisible('button#showVideo', 1000)
+        .click('button#showVideo')
+        .waitForElementVisible('video')
+        .waitForMediaPlaybackReady('video', 5000)
+        .end();
+  }
+};