Introduction

Multi-media applications are becoming more and more common on the web. To satisfy the increasing demand, we are introducing a new component in ZK – ZK Webcam, which communicates with a camera directly based on the  jQuery webcam plugin and also integrating another ZK component, canvas4z for previewing snapshots.

By using this component, user will see a screen displaying the image caught by the webcam ready to take a photo. Through the component, you can set a timer for the camera or you can take it instantly and you can also save the picture.  There are two modes to manage the image shot by the user – callback mode and save mode :

  • callback mode: to display an image by bring it on a Canvas
  • save mode: to store the image on the server

Please note that the callback mode has to use the canvas tag, therefore the browser at client-side must be HTML5 compatible to show images under this mode.

Demo

Get Adobe Flash player

Development Example

It is easy to use the component. Following is an example of how you can use it:

<zk>
    <window title="ZK Webcam Demo" mode="overlapped" border="normal">
        <html>
            <h3>The picture will be shown on the canvas below:</h3>
        </html>
        <canvas id="cvs" width="320px" height="240px" style="border: 2px dashed red"/>
        <webcam id="myCam" width="500px" timer="3" uploadUrl="img/absroottimer.jpg"  
          canvas="${cvs}" mode="callback" />
    </window>
</zk>

There are several attributes in which you can use:

  1. You can use one or both of height and width attribute to control the screen size that displays the image caught by the webcam.
  2. mode should be either “callback” or “save”. In the callback mode, a 320px * 240px canvas element which is a ZK canvas component must be placed before the webcam in the page for showing the shot image on it.

    On the other hand, for save mode, the attribute, uploadUrl, should be used to indicate the path and file name for saving the image on the server. It is therefore unnecessary to set uploadUrl in the above example since it is a callback mode example, however, it is included for referencing if you are to use the save mode.

  3. timer is optional for setting the seconds for delay shooting.

Like all other ZK components, all of the attributes can be set and changed by the server-side dynamically.

Download

You can download the component and the demo application here.

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.

6 Responses to “Webcam Component: communicate with a camera directly”

  1. andreas says:

    This component was exactly what I needed. At that time was developing exclusively for android only because of the access the webcam. Now my application can also run on iOS. Thank you.

  2. andreas says:

    Forgot to mention … Now I can to program 100% in ZK. Thus run it in any browser … Be it mobile or no.

    thank you

  3. Ron Grimes says:

    It appears to me that this relies on the flashplayer plugin. Is this correct? If so, I highly recommend against this. This was the whole reason I switched from Adobe Flex to ZK – because modern Apple devices won’t support it, and I wanted something quite a bit more browser/device agnostic.

  4. francis.hsiao says:

    Right, this is flash based. In fact afaik most of them are flash. But since ZK is flexible if you do find a non-flash one that works better for you, you can also integrate it with ZK easily.

  5. windeyu says:

    It’s definitely a great step forward to tap into the media capability of the browser, whether it’s flash-based or not. It’s encouraging to see this coming from the ZK team. As more and more desktop/mobile browser vendors fully support the HTML5 media capability, I’m sure ZK team will find a way to make them available to the ZK community.
    Great job!

  6. ashwin says:

    hello all

    i need to integrate this webcam component to adempiere zk framework.is there any buddy who has done this job???
    than u in advance

Leave a Reply