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 Camera Configuration

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

CameraTag App UUID
Instance ID
Recording Name
Recording Description
Metadata
Sources
Default Mobile Camera
Preroll Count
Max Length
Min Length
Prompts
Mobile Recording URL
Recording Stack
Permitted File Extensions
Flip Camera Preview
Screen Sharing
Disable Audio Processing
Skip Preview
Skip Hair Check
Video Bit Rate
Audio Bit Rate

CameraTag App UUID

The UUID for the CameraTag app that this camera should publish to

HTML

Vanilla JS

React JS

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

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

REACT

Instance ID

A unique identifier for this camera The default value is "myCamera"

HTML

Vanilla JS

React JS

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

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

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

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

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  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

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

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  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

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

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

REACT

Sources

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

HTML

Vanilla JS

React JS

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

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

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

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-facingMode='environment'></camera>

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

REACT

Preroll Count

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

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-preroll='5'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  preroll: '5'
})

REACT

Max Length

The max length (in seconds) of videos recorded (does not apply to uploads) The default value is "30"

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-maxLength='30'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  maxLength: '30'
})

REACT

Min Length

The min length (in seconds) of videos recorded (does not apply to uploads) The default value is "3"

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-minLength='3'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  minLength: '3'
})

REACT

Prompts

Prompts are text prompts that display to the user as they are recording. Each prompt can have a max and min response time.

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-prompts='[{"text":"What is your name","minLength":5,"maxLength":20}]'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  prompts: [{"text":"What is your name","minLength":5,"maxLength":20}]
})

REACT

Mobile Recording URL

Sets the URL for the QR code used for mobile recording

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-mobileRecordingUrl='https://www.mysite.com/record?user_id=123'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  mobileRecordingUrl: 'https://www.mysite.com/record?user_id=123'
})

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

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-defaultStack='mediarecorder'></camera>

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

REACT

Permitted File Extensions

When uploading what file types should be allowed The default value is "mov,mp4,webm,flv,mv4,mov,avi,wmv,mpeg,mpg,m4v,wav,mp3,aif,aiff,aifc" Acceptable values are 'mov', 'mp4', 'webm', 'flv', 'mv4', 'mov', 'avi', 'wmv', 'mpeg', 'mpg', 'm4v', 'wav', 'mp3', 'aif', 'aiff', 'aifc'

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-permittedExtensions='["mov", "mp4", "webm", "flv", "mv4", "mov", "avi", "wmv", "mpeg", "mpg", "m4v", "wav", "mp3", "aif", "aiff", "aifc"]'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  permittedExtensions: '["mov", "mp4", "webm", "flv", "mv4", "mov", "avi", "wmv", "mpeg", "mpg", "m4v", "wav", "mp3", "aif", "aiff", "aifc"]'
})

REACT

Flip Camera Preview

Flpe the recording preview horziontally to it's easier for the user to orient themsleves The default value is "true"

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-flipRecordPreview='true'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  flipRecordPreview: false
})

REACT

Screen Sharing

Default to sharing the user's screen (instead of a webcam)

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-screenShare='true'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  screenShare: true
})

REACT

Disable Audio Processing

Turn off advanced audio processing such as gain control and echo cancelation.

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-disableAudioProcessing='true'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  disableAudioProcessing: true
})

REACT

Skip Preview

Skip the video review step and automatically publish after stopping

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-skipPreview='true'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  skipPreview: true
})

REACT

Skip Hair Check

Skip the haircheck screen and record immediately

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-skipHairCheck='true'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  skipHairCheck: true
})

REACT

Video Bit Rate

The target bit rate for the video stream (in bits per second) The default value is "1200000"

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-videoBitRate='1200000'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  videoBitRate: '1200000'
})

REACT

Audio Bit Rate

The taregt bit rate for the audio stream (in bits per second) The default value is "128000"

HTML

Vanilla JS

React JS

<camera id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-audioBitRate='128000'></camera>

CameraTag.init('targetDivID', 'camera', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myCamera',
  audioBitRate: '128000'
})

REACT