CAMERA - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
The <CAMERA/> widget is somewhat unique in that it is both a display widget and a file data source.
Other widgets like <IMAGE/> can use <CAMERA/> to display snapshot's taken from the camera.
On desktop and on web, the <CAMERA/> widget attempts to connect to the attached or embedded device's webcam. On mobile devices, the <CAMERA/> widget attempts to connect to the device's internal camera.
Image transforms such as <CROP/>, <FLIP/>, <GRAYSCALE/> and <RESIZE/> can be nested inside of the <CAMERA/> itself or inside of other connected data sources to manipulate the photo.
The <CAMERA/> widget must be in a visible area on the stack. If in fullscreen mode, it must be a direct child of the FML template at the top position of the <STACK/>
For performance reasons, evaluations and events should avoid binding to the <CAMERA/>'s value.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| controls | bool | true | Show the default shutter button |
| Name | Default | Description |
|---|---|---|
| data | References the saved picture file. Use {data.property} or {id.data.property} binding syntax to access the files properties where id is the id of the camera and property is the name of the file property. |
| Name | Description |
|---|---|
| oninitialized | A list of ; separated event's to evaluate and execute when the camera is first initialization |
| Name | Description |
|---|---|
| start | Launches the onboard or attached camera and displays the cameras video display stream. |
| stop | Stops the camera's video display stream. |
| snapshot | Takes a snapshot (picture) of the current video display screen and saves it to file |
<POST id="ds1" url="https://fml.dev/api/demo/user/image" onsuccess="alert('success','{ds1.statusmessage}')" onfail="alert('error','{ds1.statusmessage}')">
<BODY>
<![CDATA[
<User>
<email>[email protected]</email>
<picture>{wc1.data.file}</picture>
</User>
]]>
</BODY>
</POST>
<VAR id="istaking" value="true"/>
<VAR id="browser" value="={SYSTEM.useragent} != desktop"/>
<POS left="0" right="0" top="0" bottom="0">
<BUSY id="b1" visible="true" size="48"/>
</POS>
<!-- Main Camera -->
<CAMERA id="wc1" oninitialized="istaking.set(false)" onsuccess="ds1.start();" onfail="alert('We were unable to access your camera, please enter your details or try again.')" enabled="=!{ds1.busy}" width="100%" height="100%" controls="true">
<!-- Picture in Picture -->
<PAD all="25">
<BOX expand="false" width="200" border="all" pad="10" radius="5" visible="=!noe({wc1.data.file})">
<IMAGE url="{wc1.data.file}"/>
</BOX>
</PAD>
<BOX center="true">
<BUSY id="busy" visible="{ds1.busy}" width="100%" height="100%"/>
</BOX>
</CAMERA>
</FML>