Camera

Provides a consistent API to the camera on all platforms.

The camera is accessed via the CameraLayer which extends VideoLayer.

For privacy reasons, a browser requires the user's consent before accessing the camera. It is strongly recommended that best practices are followed to give the user an optimal experience and increase the engagement rate of your audience. (See here, for examples.)

Compatibility: Due to browser requirements, VideoStack is only able to access the camera on iOS 11 or later, and Android 6 or later.

Example

var cameraLayer = new VideoStack.CameraLayer();
cameraLayer.requestUserMedia(function() {});

var convenienceLayer = new VideoStack.ConvenienceLayer(cameraLayer, {
  outputResolution: [ 1024, 1024 ],
  context
});

var renderer = new VideoStack.AnimationLoop();
renderer.start(function() {
  convenienceLayer.render();
});

Constructor

new VideoStack.CameraLayer([options])

Create a new CameraLayer instance.

Argument Type Description
options Object Options to pass in for the new CameraLayer instance (optional)

  • mediaDevices {Object}
  • Contains the getUserMedia function used to access the camera. This is useful for gaining access to window.top.navigator.mediaDevices when calling from within a safeframe of iframe.


    Default: window.navigator.mediaDevices

  • constraints {Array}
  • MediaTrackConstraints ordered by desired constraint preference. Mostly useful for selecting between multiple cameras, though cross-browser support is difficult to come by; it is preferable to set the selfie option for choosing between front and back facing cameras.


    Default: Attempts to set the camera according to the selfie argument, otherwise uses any available camera.

  • onerror {Function}
  • A callback function to fire if the camera fails to load, either due to user refusing access or other browser issues.


    Default: () => {}

  • selfie {Boolean}
  • Specifies to use the front-facing (true) or back-facing (false) camera on the mobile device.


    Default: true

Additionally, the CameraLayer constructor also accepts all VideoLayer constructor options. See VideoLayer.constructor.

var cameraLayer = new VideoStack.CameraLayer();

Instance Methods

requestUserMedia(onload, mediaDevices)

Sends a request to access the camera. This should only be called when you want to ask the user for camera access. A browser prompt will appear asking the user to allow access to the camera. Some browsers ask only once per web domain (see this article on good and bad ways to educate users).

Argument Type Description
onload Function A callback function to execute once the camera is loaded.


Default: ()=>{}

mediaDevices Object Overide the mediaDevices object provided in the constructor.


Default: window.navigator.mediaDevices

cameraLayer.requestUserMedia(function() {});