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!

 

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

3 Responses to “[8.6 Preview] Introducing New Media Components: Video and Camera”

  1. Adrien SALES says:

    Hey, this is great ! Especially associated with responsive sites …on mobiles, use cases are around !
    Why not addind a “Share to linkedIn” button in addition to FB, Twitter, reddit and Google ?

  2. Hans Müller says:

    I just wanted to write my own plugin for that.
    Do you already know if it will be available in de EE, PE or CE version?

  3. jeanyen says:

    @Adrien, thanks for your feedback! Fixed the linkedin button!
    @Hans Muller, you can check corresponding Component Reference to find out the supported versions and editions. For example: https://www.zkoss.org/wiki/ZK%20Component%20Reference/Multimedia%20and%20Miscellaneous

Leave a Reply