Camera Tag: Video Recording API & More!

Advanced player Configuration

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

Instance ID
Asset(s)
Aspect Ratio
Width
Height
Auto Start
Show Controls
Show Captions
Display Name
Display Dscription
Mute
Repeat
Poster
Sharing Link
Embed Code
Share Prompt
Stretch Type
Download Button

Instance ID

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

HTML

Vanilla JS

React JS

<player id='myPlayer' data-app-id='[YOUR_APP_UUID]'></player>

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

REACT

Asset(s)

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-assets='["v-1234","v-5678"]'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  assets: ["v-1234","v-5678"]
})

REACT

Aspect Ratio

To create a responsively sized player, select an aspect ratio and set the width to a percentage. The default value is "automatic" Acceptable values are 'automatic', '4:3', '16:9'

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-aspectratio='16:9'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  aspectratio: '16:9'
})

REACT

Width

Width of the player as integer or percentage (if left blank the player will be sized to the selected video(s).) To create a responsive player please also choose an aspect ratio and leave the height param blank.

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-width='600'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  width: '600'
})

REACT

Height

Height of the player as integer (if left blank the player will be sized to the video(s) selected for playback)

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-height='400'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  height: '400'
})

REACT

Auto Start

Automatically start playinhg the media on load (not supported by all devices)

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-autostart='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  autostart: true
})

REACT

Show Controls

Display playback controls to the user The default value is "true"

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-controls='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  controls: false
})

REACT

Show Captions

Display captions if a cvaptions outpout exists The default value is "true"

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-showcaptions='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  showcaptions: false
})

REACT

Display Name

Show the asset name in the player The default value is "true"

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-displaytitle='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  displaytitle: false
})

REACT

Display Dscription

Show the asset description in the player The default value is "true"

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-displaydescription='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  displaydescription: false
})

REACT

Mute

Start the player with the sound muted

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-mute='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  mute: true
})

REACT

Repeat

Automatically loop the media

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-repeat='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  repeat: true
})

REACT

Poster

URL to an image to use as the player's poster (if left blank the CameraTag generated thumbnail will be used)

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-image='https://www.myimage.com/someimage.jpg'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  image: 'https://www.myimage.com/someimage.jpg'
})

REACT

Sharing Link

A URL to be used when this media is shared from the right click menu. By default the media's CameraTag public page.

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-sharing-link='https://www.mysite.com/myVideoURL'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  sharing-link: 'https://www.mysite.com/myVideoURL'
})

REACT

Embed Code

An URL to be used when this media is shared from the right click menu. By default the CameraTag Player.

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-sharing-embed='https://www.mysite.com/'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  sharing-embed: 'https://www.mysite.com/'
})

REACT

Share Prompt

Language used in the share menu The default value is "Share Asset"

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-sharing-heading='Billy Rides a Bike'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  sharing-heading: 'Billy Rides a Bike'
})

REACT

Stretch Type

Determines how meida are fit to the player. The default value is "uniform" Acceptable values are 'uniform', 'exactfit', 'fill', 'none'

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-stretching='fill'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  stretching: 'fill'
})

REACT

Download Button

Show a download button in the player

HTML

Vanilla JS

React JS

<player id='MyRecorder1' data-app-id='[YOUR_APP_UUID]' data-download='true'></player>

CameraTag.init('targetDivID', 'player', {
  appUuid: '[YOUR_APP_UUID]',
  id: 'myPlayer',
  download: true
})

REACT