andrenatal/fxos-camera

A Web Component that makes writing camera applications for FirefoxOS easy.

Installation

$ npm install fxos-camera

Permissions (example)

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

andrenatal / fxos-camera