<h:h1>API Basic Usage</h:h1>
    <button onClick="camera.requestCamera()" label="Request camera"/>
    <button onClick="camera.start()" label="Start"/>
    <button onClick="camera.pause()" label="Pause"/>
    <button onClick="camera.resume()" label="Resume"/>
    <button onClick="camera.stop()" label="Stop"/>
    <button onClick="camera.snapshot()" label="Snapshot"/>

    <separator/>
    <camera id="camera" height="300px"  width="400px" maxsize="-1" lengthLimit="60" previewRecord="true"
            onVideoUpload='video.setContent(event.getMedia())'
    onSnapshotUpload='image.setContent(event.getMedia())'
    onLengthLimitExceed='Clients.log(event.getName())'
    onStateChange="Clients.log(event.getState().toString())">
        <attribute name="onMaxsizeExceed">
            Clients.log(event.getName() + ": dataSize is " + event.getData().toString() + "KB.");
        </attribute>
    </camera>

    <separator/>
    <h:h2>Snapshot</h:h2>
    <image id="image" height="300px" width="400px" style="border: solid 1px"/>