@theopenweb/js-sensor
Version:
JavaScript sensor library for native input sensors.
268 lines (242 loc) • 11.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../../">
<title data-ice="title">class/browser-sensor-watcher.js | js-sensor</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
<meta name="description" content="JavaScript sensor library for native input sensors."><meta property="twitter:card" content="summary"><meta property="twitter:title" content="js-sensor"><meta property="twitter:description" content="JavaScript sensor library for native input sensors."></head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a href="test.html" data-ice="testLink">Test</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/class/browser-sensor-watcher.js~BrowserSensorWatcher.html">BrowserSensorWatcher</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/class/js-sensor.js~JsSensor.html">JsSensor</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/class/sensor-handler.js~SensorHandler.html">SensorHandler</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-SensorHandler">SensorHandler</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-variable">V</span><span data-ice="name"><span><a href="variable/index.html#static-variable-BrowserSensorWatcher">BrowserSensorWatcher</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><h1 data-ice="title">class/browser-sensor-watcher.js</h1>
<pre class="source-code line-number raw-source-code"><code class="prettyprint linenums" data-ice="content">/**
* Collection of browser based sensor events.
* Sensors should be continuous events.
* Therefor each should be setup in similar way using an event listener.
* Objects of events, arguments and implementations may differ.
*/
class BrowserSensorWatcher {
constructor(){
/**
* All sensor handles must return promise and take no arguments.
* start: required. args: (optional options object) should resolve an array with arguments to be passed to stop.
* stop: required. args: (returnedData from start)
* check: optional.
*/
this.sensorHandles = {
/**
* Watch GPS position
* data: https://developer.mozilla.org/en-US/docs/Web/API/Position
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/watchPosition
* @return {SensorListener}
*/
watchPosition: {
start: (options)=>{
let eventListener = options.events.data;
return new Promise((resolve, reject)=>{
let id = navigator.geolocation.watchPosition(
eventListener,
(err)=>{
return reject(console.error('Failed watchPosition', err));
}
);
resolve([id]);
});
},
stop: (id)=>{navigator.geolocation.clearWatch(id); return Promise.resolve();}
},
/**
* Gets camera and audio and records
* data: image dataURL
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
* @return {SensorListener}
*/
getUserMedia: {
start: (options)=>{
let eventListener = options.events.data;
return navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then((stream)=>{
/*
//MediaRecorder API. Preferred but ondataavailable seems unreliable.
let recorder = new MediaRecorder(stream);
let onDataAvailable = function(ev){console.log("WORKED");
eventListener(ev.data);
};
//recorder.addEventListener('dataavailable', onDataAvailable);
recorder.ondataavailable = onDataAvailable;
recorder.start();
*/
//Basic interval
let url = window.URL.createObjectURL(stream);
let video = document.createElement('video');
video.autoplay = true;
video.src = url;
let recorder = {};
recorder.interval = null;
recorder.ondataavailable = function(ev){
eventListener(ev.data);
};
recorder.start = function(){
recorder.interval = window.setInterval(recorder.handleData, 500);
};
recorder.handleData = function(){
let canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
recorder.ondataavailable({
data: canvas.toDataURL()
});
};
recorder.stop = function(){
window.URL.revokeObjectURL(url);
window.clearTimeout(recorder.interval);
recorder.interval = null;
};
recorder.start();
return Promise.resolve([stream, recorder]);
});
},
stop: (stream, recorder)=>{recorder.stop(); let tracks = stream.getTracks(); tracks.map((track)=>{track.stop();}); return Promise.resolve();}
},
/**
* Device orientation(3d coordinates)
* @see https://developer.mozilla.org/en-US/docs/Web/Events/deviceorientation
* @return {SensorListener}
*/
deviceOrientation: this._getWindowEventListenerObject('deviceorientation'),
/**
* Device light(lux)
* @see https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent
* @return {SensorListener}
*/
deviceLight: this._getWindowEventListenerObject('devicelight'),
/**
* Device proximity(cm)
* @see https://developer.mozilla.org/en-US/docs/Web/Events/deviceproximity
* @return {SensorListener}
*/
deviceProximity: this._getWindowEventListenerObject('deviceproximity'),
/**
* Device motion(acceleration + rotation. Can use for measuring path taken.)
* @see https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion
* @return {SensorListener}
*/
deviceMotion: this._getWindowEventListenerObject('devicemotion'),
/**
* Test use only.
* For testing when sensors might not be available.
* Not implemented in watchAll.
* @return {SensorListener}
*/
test: this._getTestEventListenerObject()//Useful for both automated testing and learning on personal computer.
};
}
/**
* Common object for handling sensors
* start: Starts watching sensor
* stop: Stops watching sensor
* check: Checks for support
*/
SensorListener(){
return {
start: ()=>{},
stop: ()=>{},
check: ()=>{return true;}
};
}
/**
* Common SensorListener for window events such as devicemotion.
*
* @param {String} eventName
* @return {SensorListener}
*/
_getWindowEventListenerObject(eventName){
return {
start: function(options){
let eventListener = options.events.data;
return new Promise((resolve, reject)=>{
window.addEventListener(eventName, eventListener);
resolve([eventName, eventListener]);
});
},
stop: function(eventName, eventListener){
return new Promise((resolve, reject)=>{
window.removeEventListener(eventName, eventListener);
resolve();
});
},
check: ()=>{return true;}
};
}
/**
* Gets test SensorListener that can be used without access to sensors.
* Used for testing on displaying when sensors not available.
*
* @return {SensorListener}
*/
_getTestEventListenerObject(){
return {
start: function(options){
let eventListener = options.events.data;
return new Promise((resolve, reject)=>{
let id = window.setInterval(()=>{
eventListener('test data');
}, 500);
resolve([id]);
});
},
stop: function(id){
return new Promise((resolve, reject)=>{
window.clearTimeout(id);
resolve();
});
},
check: function(){
return true;
}
}
}
}
module.exports = BrowserSensorWatcher;</code></pre>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(1.0.4)</span><img src="./image/esdoc-logo-mini-black.png"></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>