A Web Component that makes writing camera applications for FirefoxOS easy.
$ npm install fxos-cameraPermissions (example)
device-storage:picturesdevice-storage:videoscamera
<html>
<head>
<script src="node_modules/fxos-camera/fxos-camera.js"></script>
</head>
<body>
<fxos-camera></fxos-camera>
</body>
</html>camera.takePicture('path/to/picture.jpeg')
.then(picture => ...);camera.set('mode', 'video')
.then(() => camera.startRecording('path/to/my-video.3gp'))
.then(() => {
// recording has started
});
// ... later
camera.stopRecording()
.then(video => ...);By default FXOSCamera boots in with the 'back' camera.
// switch to 'front'
camera.set('camera', 'front')
.then(...);// switch to 'back'
camera.set('camera', 'back')
.then(...);Most devices today have two cameras: 'front' and 'back'. You can use the result of this query to determine whether to show a camera 'toggle' button in your app or not.
camera.get('cameras')
.then(list => {
console.log(list); //=> ['front', 'back']
});FXOSCamera will run continuous-auto-focus (CAF) if available on the hardware. You have the ability to override this by by focusing on a specific point. It is common for camera apps to support a 'tap to focus' feature.
// pass specific coordinates
camera.focus({ clientX: 50, clientY: 50 }).then(...);
// or wire-up a 'click' hander directly
camera.addEventListener('click', e => camera.focus(e));camera.get('flashModes')
.then(modes => ...)camera.set('flashMode', mode)
.then(...)camera.get('sceneModes')
.then(modes => ...)camera.set('sceneMode', mode)
.then(...)camera.get('hdrModes')
.then(modes => ...)camera.set('hdrMode', mode)
.then(...)camera.get('pictureSizes')
.then(sizes => ...)camera.set('pictureSize', size.key)
.then(...)camera.get('recorderProfiles')
.then(profiles => ...)camera.set('recorderProfile', profile.key)
.then(...)camera.get('viewfinderSize')
.then(size => ...)Faces detected by the camera hardware will be inserted as .face elements inside <fxos-camera>. You can use CSS in your app to style these as you wish.
fxos-camera .face {
border: solid 1px;
border-radius: 50%;
color: white
opacity: 0;
}
fxos-camera .face.active {
opacity: 1;
}
fxos-camera .face.largest {
color: green;
}A .focus ring element is placed inside <fxos-camera>. You can use CSS in your app to style these as you wish. If you wish to do more advanced things with icons or transforms, we recommend using pseudo elements so as not to interfere with the internal placement styling.
fxos-camera .focus {
width: 80px;
height: 80px;
border: solid 1px;
border-radius: 50%;
opacity: 0;
}
fxos-camera .focus[data-state="focusing"] { color: grey; }
fxos-camera .focus[data-state="focused"] { color: green; }
fxos-camera .focus[data-state="failed"] { color: red; }- Ensure Firefox Nightly is installed on your machine.
$ npm install$ npm test
If your would like tests to run on file change use:
$ npm run test-dev
Run lint check with command:
$ npm run lint