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/...