Embed a Webcam Feature into a ZEN Page

(Originally posted by @Sascha Kisser on March 11, 2014) The following 2 classes are a component for a webcam, and a ZEN page that incorporates it. The webcam can take a snapshot and save it to Caché:

Class skisser.webcamPage extends %ZEN.Component.page
{
Parameter APPLICATION;

Parameter PAGENAME;
 
Parameter DOMAIN;
 
XData Style
{
<style type="text/css">
</style>
}
 
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<button caption="startCam" onclick="zenPage.startCam()"/>
<button caption="Snapshot" onclick="zenPage.snapshot()"/>
<camComponent width="600px" height="800px" id="mycam"/>
<image id="image_source" src="" hidden="true"/>
 
</page>
}
 
ClientMethod snapshot() [ Language = javascript ]
{
    var snap = zenPage.getComponentById('image_source')
    zen('mycam').snapshot(snap);
    zen('mycam').SaveImageToDB(snap);
    snap.refreshContents();
}
 
ClientMethod startCam() [ Language = javascript ]
{
    zen('mycam').startWebcam();
}

}
Class skisser.webcamPage extends %ZEN.Component.page
{
Parameter APPLICATION;
Parameter PAGENAME;
 
Parameter DOMAIN;
 
XData Style
{
<style type="text/css">
</style>
}
 
XData Contents [ XMLNamespace = "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen" title="">
<button caption="startCam" onclick="zenPage.startCam()"/>
<button caption="Snapshot" onclick="zenPage.snapshot()"/>
<camComponent width="600px" height="800px" id="mycam"/>
<image id="image_source" src="" hidden="true"/>
 
</page>
}
 
ClientMethod snapshot() [ Language = javascript ]
{
    var snap = zenPage.getComponentById('image_source')
    zen('mycam').snapshot(snap);
    zen('mycam').SaveImageToDB(snap);
    snap.refreshContents();
}
 
ClientMethod startCam() [ Language = javascript ]
{
    zen('mycam').startWebcam();
}

}

Here's a link to the code on GitHub: https://github.com/intersystems-community/code-snippets/blob/master/src/cls/skisser/webcamPage.cls