Introduction

In the upcoming new ZK version 8.6, we are going to introduce two new components: Video and Camera, both are based on <video> in HTML5.

The Video component is used to play the video in browsers. Users can specify video sources or combine with other components like Fileupload, Dropupload and Camera. In addition, it provides a special feature called Dim Background.

The Camera component is used to record videos and take snapshots in browsers. It provides upload features to upload the video and snapshot to server, and it also provides state change event for developers to handle each state, such as start recording or stop recording.

Demo

The following is an example of how you can use these components:

<zk>
    <camera id="camera" onVideoUpload="video.setContent(event.media)" 
                     onSnapshotUpload="image.setContent(event.media)">
        <attribute name="onStateChange">
            if (event.state == Camera.START) {
                /* do something after starting record,
                   such as provide users recording hint. */
            }
        </attribute>
    </camera>
    <video id="video" />
    <image id="image" />
    <button label="Start recording" onClick="camera.start()" />
    <button label="Stop recording" onClick="camera.stop()" />
    <button label="Take a snapshot" onClick="camera.snapshot()" />
</zk>

As shown above, if you click the button, you will call start(), stop() or snapshot(), all of which are methods of camera. When Camera is recording, calling stop() will trigger onVideoUpload event, then you can listen to it and get the uploaded video by using event.media. In this example, after we received onVideoUpload event, we set the uploaded video into video tag by calling video.setContent(event.media).

If you want to take a snapshot and check the result immediately, just use camera with video: listen to onSnapshotUpload. After calling snapshot(), onSnapshotUpload event will be send, and you can set the uploaded image into image tag by calling image.setContent(event.media).

There are four different states in Camera representing the recording status: Camera.START, Camera.STOP, Camera.PAUSE and Camera.RESUME (as shown above). By listening to onStateChange, every state change will trigger this event, and you can call event.state to check the current state and do something if needed.

I hope you like these components, feel free to share with us your feedback!