v16 Docs

Products

Camera Microphone Photobooth Player Wall Photo

Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Videos

Embeding a <camera>

Below are instructions on how to embed your Camera into a webpage.

Embeding with HTML
Embeding with dynamic (async) HTML
Embeding with JS
Embeding with React

Embedding a <camera> with HTML

First, make sure you have the cameratag.js and cameratag.css files included in the header of your site. The following <script> tag should appear at the bottom of your page's <head> tag

<script src='//staging.cameratag.com/v16/js/cameratag.min.js' type='text/javascript'></script>
<link rel='stylesheet' href='//staging.cameratag.com/v16/css/cameratag.css'>

Next, create a new <camera> somehwere in your <body> like the one below.

<camera id='[INSTANCE_ID]' data-app-id='[YOUR_APP_UUID]'></camera>

You will need to replace the values denoted by brackets in the above example.

You will replace [YOUR_APP_UUID] with the UUID of the App you would like to use with this <camera>. This can be found under the name of your App on any of the App pages on CameraTag.

You will replace [INSTANCE_ID] with a unique id for that instance of the <camera>. This will allow you specifically refernce that <camera> on the page.

Pleas note: Each camera on a page MUST HAVE A UNIQUE INSTANCE ID however multiple cameras on a page may be attached to the same App.

Adding a <camera> with asynchronous HTML

If you want to embed at a camera after the page has loaded simply add the <camera> element to the DOM as described in the static embed section above then call the CameraTag rescan() method:

CameraTag.setup();

This will rescan the DOM for any uninitialized CameraTag products.

How to initialize a Camera with JS

First, make sure you have the cameratag.js and cameratag.css files included in the header of your site. The following <script> tag should appear at the bottom of your page's <head> tag

<script src='//staging.cameratag.com/v16/js/cameratag.min.js' type='text/javascript'></script>
<link rel='stylesheet' href='//staging.cameratag.com/v16/css/cameratag.css'>

Then you can initialize a <camera> directly with JS by using the CameraTag.init() method. The method takes three parameters:

var myTargetElement = document.getElementById("my_target_div");
CameraTagCamera.init(myTargetElement, {appUuid: "YOUR_APP_UUID", id: "myCamera"});

DOM element (to be replaced by the recorder)
A handle to a DOM element that will be replaced by the CameraTag lt;camera>.

options

The required options are appUUID (the UUID of your CameraTag App) and id (A unique identifier for this camera instance). Other configurations options can be see on camera configurations docs page.

How to initialize a Camera with React

Youc an import our camera react NPM module into your react app to embed a CameraTag <camera>.

npm install @cameratag/react_camera

import Camera from @cameratag/react_camera;

//You can the use the component like this:
<Camera appUuid="YOUR_APP_UUID" id="myCamera"/>

There are more attributes that can be used to configure how the camera functions. You can see them all on the camera configurations docs page.