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.
Merge branch 'gh-pages' into too-verbose-logging
- Loading branch information
Showing
4 changed files
with
223 additions
and
21 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,95 @@ | ||
<!DOCTYPE html> | ||
<!-- | ||
* Copyright (c) 2022 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 Exposure</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: 10em; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
|
||
<div id="container"> | ||
<h1><a href="//webrtc.github.io/samples/" title="WebRTC samples homepage">WebRTC samples</a> | ||
<span>Control Exposure</span></h1> | ||
|
||
<video id="gum-local" autoplay playsinline></video> | ||
<button id="showVideo">Open camera</button> | ||
|
||
<div> | ||
<div class="label">Exposure Mode:</div> | ||
<select name="exposureMode" id="exposureMode" disabled> | ||
</select> | ||
</div> | ||
|
||
<div> | ||
<div class="label">Exposure Time:</div> | ||
<input name="exposureTime" type="range" disabled> | ||
</div> | ||
|
||
<div> | ||
<div class="label">Exposure Compensation:</div> | ||
<input name="exposureCompensation" type="range" disabled> | ||
</div> | ||
|
||
<div> | ||
<div class="label">Brightness:</div> | ||
<input name="brightness" type="range" disabled> | ||
</div> | ||
|
||
<div> | ||
<div class="label">White Balance Mode:</div> | ||
<select name="whiteBalanceMode" id="whiteBalanceMode" disabled> | ||
</select> | ||
</div> | ||
|
||
<button id="refreshControls" onClick="loadProperties(true)" disabled>Refresh Controls</button> | ||
|
||
<div id="errorMsg"></div> | ||
|
||
<p>Display the video stream from <code>getUserMedia()</code> in a video | ||
element and control exposureMode, exposureTime and exposureCompensation if camera supports it.</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/exposure" | ||
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,109 @@ | ||
/* | ||
* Copyright (c) 2022 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 = { | ||
audio: false, | ||
video: 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. | ||
[window.track] = stream.getVideoTracks(); | ||
|
||
loadProperties(); | ||
|
||
document.querySelector(`button[id=refreshControls]`).disabled = false; | ||
} | ||
|
||
function loadProperties(refreshValuesOnly) { | ||
const track = window.track; | ||
const capabilities = track.getCapabilities(); | ||
const settings = track.getSettings(); | ||
console.log('Capabilities: ', capabilities); | ||
console.log('Settings: ', settings); | ||
|
||
for (const property of ['exposureMode', 'exposureTime', 'exposureCompensation', 'brightness', 'whiteBalanceMode']) { | ||
// Check whether camera supports exposure. | ||
if (!(property in settings)) { | ||
errorMsg(`Camera does not support ${property}.`); | ||
continue; | ||
} | ||
|
||
let element; | ||
|
||
if (Array.isArray(capabilities[property])) { | ||
// Map it to a select element. | ||
const select = document.querySelector(`select[name=${property}]`); | ||
element = select; | ||
if (capabilities[property] && !refreshValuesOnly) { | ||
for (const mode of capabilities[property]) { | ||
select.insertAdjacentHTML('afterbegin', `<option value="${mode}">${mode}</option>`); | ||
} | ||
} | ||
} else { | ||
// Map it to a slider element. | ||
const input = document.querySelector(`input[name=${property}]`); | ||
element = input; | ||
input.min = capabilities[property].min; | ||
input.max = capabilities[property].max; | ||
input.step = capabilities[property].step; | ||
} | ||
|
||
element.value = settings[property]; | ||
element.disabled = false; | ||
if (!refreshValuesOnly) { | ||
element.oninput = async event => { | ||
try { | ||
const constraints = {advanced: [{[property]: element.value}]}; | ||
await track.applyConstraints(constraints); | ||
console.log('Did successfully apply new constraints: ', constraints); | ||
console.log('New camera settings: ', track.getSettings()); | ||
} 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)); |
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