Camera Tag: Video Recording API & More!

Intro

Overview New in V15

Apps

Overview Configuration

Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Videos

Overview Embedding Configuration Custom Interface JS Methods JS Events

Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Audio

<room>

Overview Embedding Configuration Custom Interface JS Methods JS Events

Overview Embedding Configuration JS Methods & Events

<wall>

Overview Embedding Configuration JS Methods

<photo>

Overview Embedding

REST API

Overview

Assets

List Assets Show Asset Update Asset Delete Asset

Apps

List Apps Show App Create App Update App

Media Factories

List Media Factories Show Media Factory Create Media Factory Update Media Factory

Asset Responses

Video Object Photo Object Audio Object

Rooms

List Rooms Create Room Show Room Update Room Delete Room

Advanced photobooth Configuration

You can configure your photobooth by passing ina data attributes on your <photobooth> tag. The id and app-id attributes are required.

Instance ID
Recording Name
Recording Description
Metadata
Mirror Camera Preview
Sources
Skip Zoom
Force Full Frame Images
Preroll Count
Default Mobile Camera
Recording Stack
Upload Original File

Instance ID

A unique identifier for this room (in case you have more than one on the page) The default value is "myBooth"

HTML

Vanilla JS

React JS

<photobooth id='myBooth' data-app-id='[YOUR_APP_UUID]'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  id: ''
})

REACT

Recording Name

A human friendly name for the video to be recorded by this camera. This will be visible in your CameraTag admin and on YouTube (if you have YouTube export enabled)

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-name='Billy Birthday Wish'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  name: 'Billy Birthday Wish'
})

REACT

Recording Description

A description for the video to be recorded by this camera. This will be visible in your CameraTag admin and on YouTube (if you have YouTube export enabled)

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-description='Billy wishes grandma a very happy birthday during his soccer game.'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  description: 'Billy wishes grandma a very happy birthday during his soccer game.'
})

REACT

Metadata

A JSON string to be stored along with the video. This data will be made available in the server callback and the REST API. **Value must be validly formatted JSON (using double quotes)

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-metadata='{"user_id": 1234, "user_name": "Jon Doe"}'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  metadata: '{"user_id": 1234, "user_name": "Jon Doe"}'
})

REACT

Mirror Camera Preview

When set to false the photobooth will NOT horizontally flip the camera preview. The default value is "true"

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-flip_preview='true'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  flip_preview: null
})

REACT

Sources

What media sources are available to the user The default value is "record,upload" Acceptable values are 'record', 'upload'

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-sources='["record","sms"]'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  sources: ["record","sms"]
})

REACT

Skip Zoom

By default the photobooth will display pan/zoom options if a file is selected with a different aspect ratio than target. Set this to true to bypass this step.

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-skip_zoom='false'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  skip_zoom: null
})

REACT

Force Full Frame Images

Scale and crop images that don't match the target aspect ratio (uploded images) so that the entire frame is filled (no padding)

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-force_full_frame='false'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  force_full_frame: null
})

REACT

Preroll Count

Number of seconds to count down before recording starts The default value is "3"

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-preRollLength='3'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  preRollLength: ''
})

REACT

Default Mobile Camera

Which of the cameras on a mobile device should be used by default Acceptable values are '', 'environment', 'user'

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-facingMode='environment'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  facingMode: 'environment'
})

REACT

Recording Stack

Manually select the recording stack CameraTag will use (leave blank to have CameraTag auto-select based on client capabilities) The default value is "auto" Acceptable values are 'auto', 'webrtc', 'mediarecorder', 'mobile'

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-defaultStack='mediarecorder'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  defaultStack: 'mediarecorder'
})

REACT

Upload Original File

Bypass client side processing and upload original file

HTML

Vanilla JS

React JS

<photobooth id='myBoooth1' data-app-id='[YOUR_APP_UUID]' data-directUpload='true'></photobooth>

CameraTag.init('targetDivID', 'photobooth', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myphotobooth',
  directUpload: true
})

REACT