forked from webrtc/samples
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Pan-Tilt-Zoom Camera sample (webrtc#1361)
* Add Pan-Tilt-Zoom Camera sample * Remove test
- Loading branch information
1 parent
c9e2171
commit f90d712
Showing
3 changed files
with
162 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 += `<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)); |