Skip to content

Latest commit

 

History

History
433 lines (354 loc) · 9.45 KB

API.md

File metadata and controls

433 lines (354 loc) · 9.45 KB
Raw

Camera element

Attributes

  • controls
    The control is displayed.

  • autoplay
    Open camera automatically

  • facing
    This is the camera face when opening the camera automatically.
    Specify "front" for the front camera and "back" for the back camera.
    The default is "back".

  • width
    The width of the camera resolution.

  • height
    The height of the camera resolution.

  • dat-gui
    The GUI option menu is displayed.

Properties

  • state: string
    Returns the camera status.

    open The camera is open.
    loading The camera is preparing to open.
    close The camera is closed.

  • opened: boolean
    Returns true if the camera is open.

  • paused: boolean
    Returns true if the camera is paused.

  • facingMode: string
    Returns the open camera face.

back The back camera is open.
front The front camera is open.
undefined The camera is closed.

  • guiState: GuiState
    If using dat-gui for the camera element, returns the GUI options that have been applied.
    This object inherits the GuiState interface.

  • resolution: { width: number, height: number }
    Returns the camera resolution.

Methods

open()

Open camera.

Syntax
camera.open(facingMode: 'front'|'back' = 'back', width?: number, height?: number): Promise<void>
Parameters

  • facingMode: string
    Camera face.

    back Back camera.
    front Front camera.

  • width: number|undefined
    Width of resolution. The default is the initial value of the terminal.

  • height: number|undefined
    Height of resolution. The default is the initial value of the terminal.

Return

Return promise.

waitOpen()

Use the "autoplay" attribute on the Camera element and wait for it to be ready to open automatically.

Syntax
camera.waitOpen(): Promise<void>
Return

Return promise.

close()

Close camera.

Syntax
camera.close(): void

pause()

Pause the camera.

Syntax
camera.pause(): void

play()

Resume the camera from pause.

Syntax
camera.play(): void

capture()

Returns the current frame image in data URL.

Syntax
camera.capture(option?: {
  /**
   * Resize width (px). The default is no resizing (undefined).
   * @type {number}
   */
  width?: number,

  /**
   * Resize height (px). The default is no resizing (undefined).
   * @type {number}
   */
  height?: number,

  /**
   * This is the position to crop. The default is no crop (undefined).
   * @type {{x: number, y: number, width: number, height: number}}
   */
  extract?: {x: number, y: number, width: number, height: number},

  /**
   * Fit mode.
   * @type {number}
   */
  fit?: 'cover'|'contain'|'fill',

  /**
   * MIME type of the captured image.
   * @type {number}
   */
  format?: 'image/webp'|'image/png'|'image/jpeg'
}): string
Parameters

  • width: number|undefined
    Resize width (px). The default is no resizing (undefined).

  • height: number|undefined
    Specify the height when resizing the captured image.

  • extract: {x: number, y: number, width: number, height: number}
    This is the position to crop. The default is no crop (undefined).

  • fit: 'cover'|'contain'|'fill'|undefined
    How the image should be resized to fit both provided dimensions, one of cover, contain, fill. (optional, default 'fill')

    cover The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.
    contain The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
    fill This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit.

  • format: 'image/webp'|'image/png'|'image/jpeg'|undefined
    Capture image format.The default is "image/png".

    image/webp WebP image.
    image/png PNG image.
    image/jpeg JPEG image.
Return

Returns the captured image as a string in data URL.

getPermission()

Returns the camera permissions.

Syntax
camera.getPermission(): Promise<string|undefined>
Return

Returns a promise that accepts a string with permission status.

granted Caller will be able to successfuly access the feature without having the user agent asking the user’s permission.
denied Caller will not be able to access the feature.
prompt User agent will be asking the user’s permission if the caller tries to access the feature. The user might grant, deny or dismiss the request.
undefined Returns undefined when Permissions.query API is not supported.

revokePermission()

Revoke camera access settings.

Syntax
camera.revokePermission(): Promise<void>
Return

Return promise.

on()

Add camera event listener.

Syntax
camera.on(
  type: string,
  listener: () => void,
  option: { once: boolean } = { once: false }
): Camera
Parameters

  • type: string
    event name.

  • listener: (event?: Event) => void
    Event listener callback function.

  • option: { once: boolean } = { once: false } Event option. The following values ​​can be set.

    once If true, the listener would be automatically removed when invoked.The default is false.
Return

Returns the camera element.

off()

Remove event listener.

Syntax
camera.off(
  type: string,
  listener: (event?: Event) => void
): Camera
Return

Returns the camera element.

Events

opened

Fired when the camera opens.

camera.on('opened', event => {});

played

Fired when the camera plays from pause.

camera.on('played', event => {})

paused

Fired when the camera pauses.

camera.on('paused', event => {});

captured

Fired when you take a picture.
This is used to attach a control attribute to the camera element and receive shooting data when the shooting button is pressed.

camera.on('captured', event => {
  console.log(event.detail.capture);// data:image/png;base64,iVB...
});

Constraints interface

Interface for constraint objects used when opening a camera

Properties

  • video: Object

    • facingMode: string
      Camera face.

      user Use front camera.
      environment Use the back camera.

    • width: number|undefined
      Camera resolution width.

    • height: number|undefined
      Camera resolution height.

  • audio: boolean
    Use audio if true.

GuiState interface

Interface for GUI option objects of camera elements.

Properties

  • resolution: string
    Returns the width and height of the resolution, separated by commas.

  • facingMode: string Camera face.

    back Back camera.
    front Front camera.

  • format: string
    Format of photos to take.

    image/webp WebP image.
    image/png PNG image.
    image/jpeg JPEG image.

  • resize: boolean
    Returns true to resize the photo taken.

  • width: number
    The height to resize the picture taken.

  • height: number
    The width to resize the picture taken.

  • fit: string
    It is a fitting method when resizing the taken picture.

    cover The replaced content is sized to maintain its aspect ratio while filling the element's entire content box. The object will be clipped to fit.
    contain The replaced content is scaled to maintain its aspect ratio while fitting within the element's content box.
    fill This is default. The replaced content is sized to fill the element's content box. If necessary, the object will be stretched or squished to fit.