ZK Component Reference/Multimedia and Miscellaneous/Camera

Camera

• Java API: Camera
• JavaScript API: Camera

[ ZK EE ]
[ since 8.5.2 ]

Employment/Purpose

A camera component is used to record the video and take the snapshot at the browser. Developers can control the action of the camera by the start, stop, pause, resume and snapshot methods. Camera is based on Navigator.getUserMedia() and MediaRecorder, please check compatibility before using camera.

Example

Use the camera, when calling start or snapshot, the first thing is to request user's camera and microphone as shown below, if user accept this request, user can start to record the video or taking the snapshot, if user reject this request, user will not be able to use the features of camera.

  <camera />

record

setRecord(true) is same as invoking start().

setRecord(false) is same as invoking stop().

getRecord() can check whether the camera is recording.

Note: getRecord() will return true even the camera is pause, this method will return false only when the camera is stop, if you want to know when the camera is pause, please listen to onStateChange.

  <camera id="camera" />
  <button onClick="camera.setRecord(true)" />

audio

You can decide whether to record sound while recording video by specify the value of audio, the valid value is boolean.

Default: true

  <camera audio="false" />

previewRecord

The camera component provides a preview screen to preview the record content.

When you turn on the preview screen, you can set the screen size by specifying width and height, the unit is 'px'.

If you want to take a snapshot, must turn on preview screen, or nothing will happen.

Default: true

  <camera width="600px" previewRecord="true" />

maxsize

You can set the max size of upload video and snapshot, unit is "KB", negative value means unlimited, e,g,. maxsize="-1"

When the size of upload video or snapshot is bigger than max size, nothing will be uploaded and it will cause an event, if you want to handle this situation, you can listen to onMaxsizeExceed and getting the upload size from event.getData().

Default: please refer to max-upload-size

  <camera maxsize="1024" onMaxsizeExceed="event.getData()" />

lengthLimit

You can set the maximum record length limit, unit is "seconds".

When the recording seconds exceed length limit, recording will stop immediately and cause an event, if you want to handle this situation, you can listen to onLengthLimitExceed.

Default: 60

  <camera lengthLimit="120" onLengthLimitExceed="doSomething()" />

UploadEvent

There are two types of UploadEvent for listening data upload, one is onVideoUpload and the other is onSnapshotUpload, both can get upload data by calling event.getMedia().

onVideoUpload will be notified after calling stop() or the recording seconds exceed the length limit setting.

onSnapshotUpload will be notified after calling snapshot().

The camera can easily integrate with Video and Image.

For example:

If you want to integrate with those components, you can write codes as shown below, after the video or snapshot uploaded, you can see the result immediately.

  <camera onVideoUpload='video.setContent(event.getMedia())' 
          onSnapshotUpload='image.setContent(event.getMedia())' />
  <video id="video" />
  <image id="image" />

StateChangeEvent

When calling start(), stop(), pause() or resume(), will trigger StateChangeEvent, you can check current state by calling event.getState(), Camera has four states, you can access them by using Camera.START, Camera.STOP, Camera.PAUSE and Camera.RESUME.

For example:

If you want to do something after starting record, you can write codes as shown below (MVVM style).

  <camera onStateChange="@command('stateChange', event=event)" />

  @Command
  public void stateChange(@BindingParam("event") StateChangeEvent event) {
    if (event.getState() == Camera.START) {
      // do something...
    }
  }

Supported Events

Name	Event Type
onVideoUpload	Event: UploadEvent Notifies after the video has been uploaded.
onSnapshotUpload	Event: UploadEvent Notifies after the snapshot has been uploaded.
onMaxsizeExceed	Event: Event Notifies if the upload size is bigger than max size setting.
onLengthLimitExceed	Event: Event Notifies if the recording seconds exceed length limit setting.
onStateChange	Event: StateChangeEvent Notifies when invoking start(), stop(), pause() or resume().

• Inherited Supported Events: XulElement

Supported Children

*NONE