Welcome Apps
Products
Camera Microphone Photobooth Player Wall Photo
REST API
Overview New in V16 Upgrading to V16

Overview

Below are the some changes in V16 that you will want to be aware of when upgrading to v16.

Updated Custom Screen Setup (breaking)

Custom screens are now defined inside the CameraTag product element itself (as opposed to referencing a div outide the element).

Instead of creating a div with a specific id and then referencing it in your code you can now create a div with a class name that matches the screen you wish to customize.

For example, if you wanted to customize the start-screen, your code would now look like this:

<camera id='myCamera'>
  <div class='start-screen'>
    <a class='cameratag_record'>click to start recording</a>
  </div>
</camera>

You can learn more about the internal custom screens in the docs.

**Note if you are upgrading from v14 or earlier please note that that the default UI flow has change you should consult the docs for the new screen names and UX flow.

Updated Event Observation (breaking)

Events are no longer observed using the CameraTag.observe method. Instead, each product class now maintains its own event observation methods.

For example, if you wanted to observe the "initialized" event of a camera you would now do it like this:

CameraTagCamera.observe('myCamera', 'initialized', function(){ alert('camera initialized'); });

You can learn more about the event observation in the docs.

Updated Signatures (required for comments)

CameraTag signatures now contain two components: a data-signature and a data-signatureJson.

The data-signatureJson is a JSON string that contains keys for your api_key (found on your account credentials settings page) and expiration (expressed in linux epoch format).

The data-signature The signature is the HMAC-SHA1 hash of the data-signatureJson signed with your API secret.

For example here is how you would generate the signatureJson and signature signature in Ruby: 
signatureJSON = {
  api_key: "123-456-789",
  expiration: (Time.now + 30.minutes).to_i
}.to_json

signature = OpenSSL::HMAC.hexdigest("sha1", YOUR_API_SECRET, signatureJSON)
You would then use the culculated values in your player like so: 
<video id='[CAMERA_ID]' data-uuid='YOUR_VIDEO_UUID' data-signature='CALCULATED_SIGNATURE' data-signatureJson='SIGNATURE_JSON_STRING'></camera>

New Way To Include the JS Files (optional / recommended)

You can now load CameraTag products through individual JS files. This will result in a faster loading time for your page as only the necessary JS and CSS files will be loaded. You can still reference all of the file bundled through cameratag.js for (backwards compatibility / ease of use). But you can now also choose to load just the files you need.

For example, if you are using the <camera> product you could include the following:

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

**Note that if you load the individual product JS files you will need to access the product's Class through it's individualized JS class not the global CameraTag class.

Individual Product JS Classes (optional / recommended)

Previously all products were accessed and initialized from the CameraTag class. Now each product has its own JS Class that you can use intialize the products, keep track of instance etc:

  • CameraTagCamera
  • CameraTagMicrophone
  • CameraTagPhotobooth
  • CameraTagPlayer
  • CameraTagWall
  • CameraTagPhoto

For example, to initialize a new <camera> that was added to the DOM you would call.

CameraTagCamera.setup();

To access the instance of a camera already initialized you can use the following code:

CameraTagCamera.cameras.myCamera

You can learn more about the individual product JS classes in the docs.