A Web Component that makes writing camera applications for FirefoxOS easy.
Installation
$ npm install fxos-camera
example)
Permissions (device-storage:pictures
device-storage:videos
camera
Usage
<html>
<head>
<script src="node_modules/fxos-camera/fxos-camera.js"></script>
</head>
<body>
<fxos-camera></fxos-camera>
</body>
</html>
Taking pictures
camera.takePicture('path/to/picture.jpeg')
.then(picture => ...);
Recording videos
camera.set('mode', 'video')
.then(() => camera.startRecording('path/to/my-video.3gp'))
.then(() => {
// recording has started
});
// ... later
camera.stopRecording()
.then(video => ...);
Changing cameras
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(...);
Get available cameras
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']
});
Set focus
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));
Set flash mode
camera.get('flashModes')
.then(modes => ...)
camera.set('flashMode', mode)
.then(...)
Set scene mode
camera.get('sceneModes')
.then(modes => ...)
camera.set('sceneMode', mode)
.then(...)
Set HDR mode (hyper-dynamic-range)
camera.get('hdrModes')
.then(modes => ...)
camera.set('hdrMode', mode)
.then(...)
Set picture size
camera.get('pictureSizes')
.then(sizes => ...)
camera.set('pictureSize', size.key)
.then(...)
Set recorder profile (video size)
camera.get('recorderProfiles')
.then(profiles => ...)
camera.set('recorderProfile', profile.key)
.then(...)
Get the viewfinder sizes
camera.get('viewfinderSize')
.then(size => ...)
Styling detected faces
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;
}
Styling the focus ring
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; }
Tests
- 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
Lint check
Run lint check with command:
$ npm run lint