Camera Tag: Video Recording API & More!

CameraTag was built from the ground up to easily allow you to style and brand its interface. Below you will learn how to customize how your Camera appears on your site.

How do I apply diffrent CSS stylings?
How do I change the HTML?
How can I change the language of the default interface?

How do I apply diffrent CSS stylings?

You can choose one of our prebuilt styles in the Camera Wizard or you can suuply your own css file. If you are hand-rolling your own <camera> you can supply the css url to the camera by adding a data-cssurl attribute to the tag.

The easiest way to start building this CSS file is to use our CSS template

How do I change the HTML?"

CameraTag has multiple "screens" each of which has an associated HTML interface that can be individually overwritten. The screens are named as follows:

start-screen
mobile-start-screen
recording-screen
upload-screen
accept-screen
wait-screen
completed-screen
error-screen
sms-screen

To overwrite a screen for any CameraTag create a <div> inside the <camera> with a class name that matches the desired sacreen name above. Here's an example of a how to replace the default startup screen with a very simple "click to start recording" link.

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

Take note of the class name "cameratag-record" on the "click to start recording" link. This is one of several special classes that will trigger an action when clicked. These special action classes are:

cameratag_record
starts recording
cameratag_countdown_status
element's innerHTML gets replaced with pre-roll countdown
cameratag_stop_recording
stops recording
cameratag_record_timer_prompt
element's innerHTML gets replaced with recording timer
cameratag_horizontal_meter
this element's width will be set as a percentage equal to the audio level sent by the audioLevel event
cameratag_vertical_meter
this element's height will be set as a percentage equal to the audio level sent by the audioLevel event
cameratag_settings_btn
open the camera's input settings dilaog (different for flash & WebRTC)
cameratag_sms_link
Open the record via SMS interface
cameratag_send_sms
Sends an SMS to the phone number enetered in the box
cameratag_play
starts playback
cameratag_stop_playback
stops playback
cameratag_publish
publishes the recorded video
cameratag_error_message
on error element's innerHTML gets replaced with error message

How can I change interface language?

You can change any of the interface strings in CameraTag using the CT_i18n array. Simply copy and paste the JS below into a <script> tag in your <head> and change whatever values you'd like.

// i18n
if (typeof(CT_i18n) == "undefined") {
  CT_i18n = []
}

CT_i18n[0] = "To record this video using your mobile phone please visit <<url>> in your mobile browser"
CT_i18n[1] = "Your mobile device does not support video uploading"
CT_i18n[2] = "Recording in this browser requires Flash player 11 or higher. Would you like to install it now?"
CT_i18n[3] = "Unable to embed recorder. Please make sure you have Flash Player 11 or higher installed"
CT_i18n[4] = "choose a method below to submit your video"
CT_i18n[5] = "record"
CT_i18n[6] = "upload"
CT_i18n[7] = "use phone"
CT_i18n[8] = "wave to the camera"
CT_i18n[9] = "recording in"
CT_i18n[10] = "uploading..."
CT_i18n[11] = "click to stop recording"
CT_i18n[12] = "click to skip review"
CT_i18n[13] = "Accept"
CT_i18n[14] = "Re-Record"
CT_i18n[15] = "Review Recording"
CT_i18n[16] = "please wait while we push pixels"
CT_i18n[17] = "published"
CT_i18n[18] = "Scan the QR Code below (with your camera app) to record this video using your phone"
CT_i18n[19] = "Send Mobile Link"
CT_i18n[20] = "cancel"
CT_i18n[21] = "Check your phone for mobile recording instructions"
CT_i18n[22] = "or point your mobile browser to"
CT_i18n[23] = "drop file to upload"
CT_i18n[24] = "sending your message"
CT_i18n[25] = "please enter your phone number!"
CT_i18n[26] = "that does not appear to be a valid phone number"
CT_i18n[27] = "Unable to send SMS."
CT_i18n[28] = "No Camera Detected"
CT_i18n[29] = "No Microphone Detected"
CT_i18n[30] = "Hardware Access Denied"
CT_i18n[31] = "Lost connection to server"
CT_i18n[32] = "Playback failed"
CT_i18n[33] = "Unable To Connect"
CT_i18n[34] = "Unable to publish your recording"
CT_i18n[35] = "Unable to submit form data"
CT_i18n[36] = "uploading your video"
CT_i18n[37] = "buffering video playback"
CT_i18n[38] = "publishing"
CT_i18n[39] = "connecting..."
CT_i18n[40] = "negotiating firewall..."
CT_i18n[41] = "Oh No! It looks like your browser paused the recorder"
CT_i18n[42] = "That does not appear to be a valid video file. Proceed anyway?"
CT_i18n[43] = "Record or Upload a Video"
CT_i18n[44] = "Tap to get started"
CT_i18n[45] = "Choose a method to submit your photo"
CT_i18n[46] = "Camera"
CT_i18n[47] = "Upload"
CT_i18n[48] = "Choose which device(s) you would like to use"
CT_i18n[49] = "Tap here to snap or upload a photo"
CT_i18n[50] = "Photo Filters"
CT_i18n[51] = "Pan & Zoom"
CT_i18n[52] = "Smoke"
CT_i18n[53] = "Murica"
CT_i18n[54] = "Brightness / Contrast"
CT_i18n[55] = "Night Vision"
CT_i18n[56] = "Posterize"
CT_i18n[57] = "Zinc"
CT_i18n[58] = "Berry"
CT_i18n[59] = "Spy Cam"
CT_i18n[60] = "Magazine"
CT_i18n[61] = "Cross Hatch"
CT_i18n[62] = "Flare"
CT_i18n[63] = "Hue / Saturation"
CT_i18n[64] = "Vibrance"
CT_i18n[65] = "Denoise"
CT_i18n[66] = "Unsharp Mask"
CT_i18n[67] = "Noise"
CT_i18n[68] = "Sepia"
CT_i18n[69] = "Vignette"
CT_i18n[70] = "Zoom Blur"
CT_i18n[71] = "Triangle Blur"
CT_i18n[72] = "Tilt Shift"
CT_i18n[73] = "Lens Blur"
CT_i18n[74] = "Swirl"
CT_i18n[75] = "Bulge / Pinch"
CT_i18n[76] = "Ink"
CT_i18n[77] = "Edge Work"
CT_i18n[78] = "Hexagonal Pixelate"
CT_i18n[79] = "Dot Screen"
CT_i18n[80] = "Color Halftone"
CT_i18n[82] = "Angle"
CT_i18n[83] = "Size"
CT_i18n[84] = "Scale"
CT_i18n[85] = "Radius"
CT_i18n[86] = "Strength"
CT_i18n[87] = "Brightness"
CT_i18n[88] = "Blur Radius"
CT_i18n[89] = "Gradient Radius"
CT_i18n[90] = "Hue"
CT_i18n[91] = "Saturation"
CT_i18n[92] = "Motion"
CT_i18n[93] = "Number of Colors"
CT_i18n[94] = "Gamma"
CT_i18n[95] = "Color"
CT_i18n[96] = "Luminance"
CT_i18n[97] = "Contrast"
CT_i18n[98] = "Stopping"
CT_i18n[99] = "Unable to activate camera or microphone"
CT_i18n[100] = "Waiting for hardware"
CT_i18n[101] = "Resume Recording"
CT_i18n[102] = "Recording Paused"
CT_i18n[103] = "choose a method below to submit your audio"
CT_i18n[104] = "microphone"
CT_i18n[105] = "Which microphone would you would like to use"
CT_i18n[106] = "this video is longer than the maximum allowed length of ## seconds. Please try again."
CT_i18n[107] = "That does not appear to be a valid audio file. Proceed anyway?"
CT_i18n[108] = 'We were unable to parse the file you selected. Please try again.'
CT_i18n[109] = 'This browser does not support hardware access from insecure origins. Please use https://'
CT_i18n[110] = 'Your video is still uploading to ther server. Please try again a few seconds.'
CT_i18n[111] = 'An error has occured.'
CT_i18n[112] = "please make sure your room tag has an id attribute"
CT_i18n[113] = "please make sure your room tag has a data-app-id attribute"
CT_i18n[114] = "Camera or Mic are not found or not allowed in your device."
CT_i18n[115] = "Camera or Mic is being used by some other process that does not not allow these devices to be read."
CT_i18n[116] = "There is no device found that fits your video and audio constraints. You may change video and audio constraints."
CT_i18n[117] = "You are not allowed to access camera and mic."
CT_i18n[118] = "Browser cannot access camera and mic because of unsecure context. Please install SSL and access via https"
CT_i18n[119] = "WebSocket not supported in this browser"
CT_i18n[120] = "Please select your audio and video devices below"
CT_i18n[121] = "Please enter your info below to start chatting"
CT_i18n[122] = "Join Room"
CT_i18n[123] = "Room Name"
CT_i18n[124] = "User Name"
CT_i18n[125] = "The Flash recording stack is no longer supported"
CT_i18n[126] = "This browser does not support video recording. Please make sure you're loading this page securely (using https) and using a recent version of Chrome, Firefox, Safari or Edge."
CT_i18n[127] = "Apply"
CT_i18n[128] = "Save"
CT_i18n[129] = "Retake"
CT_i18n[130] = "Cancel"
CT_i18n[131] = "Zoom Level"
CT_i18n[132] = "Camera or Mic is being used by some other process that does not not allow these devices to be read."
CT_i18n[133] = "There is no device found that fits your video and audio constraints. You may change video and audio constraints."
CT_i18n[134] = "You are not allowed to access camera and mic."
CT_i18n[135] = "Video/Audio is required."
CT_i18n[136] = "Fatal Error: Browser cannot access camera and mic because of unsecure context. Please install SSL and access via https"
CT_i18n[137] = "Fatal Error: WebSocket not supported in this browser"
CT_i18n[138] = "There was a error during data channel communication"
CT_i18n[139] = "You are not allowed to access screen share"
CT_i18n[140] = "Please enter a room name"
CT_i18n[141] = "please enter a username"
CT_i18n[142] = "Camera or Mic are not found or not allowed in your device."