v16 Docs

Products

Camera Microphone Photobooth Player Wall Photo

Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Audio

Embeding a <microphone>

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

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

Embedding a <microphone> 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 <microphone> somehwere in your <body> like the one below.

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

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 <microphone>. 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 <microphone>. This will allow you specifically refernce that <microphone> on the page.

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

Adding a <microphone> with asynchronous HTML

If you want to embed at a microphone after the page has loaded simply add the <microphone> 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 Microphone 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 <microphone> directly with JS by using the CameraTag.init() method. The method takes three parameters:

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

DOM element (to be replaced by the recorder)
A handle to a DOM element that will be replaced by the CameraTag <microphone>.

options

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

How to initialize a Microphone with React

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

npm install @cameratag/react_microphone

import Microphone from @cameratag/react_microphone;

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

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