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