Customize The Look Of Your <camera>

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 supply your own css file (instead of ousing ours). Simply replace the link to ur css in your <head> tag with a link to your own.

The easiest way to start building this CSS file is to use ours as the starting point and then make customizations CSS template

How do I change the HTML?"

The PhotoBooth has eight "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

  • capture-screen

  • upload-screen

  • review-screen

  • wait-screen

  • error-screen

  • published-screen

To overwrite a screen for any CameraTag create a <div> on the page with an id that matches the pattern [CAMERA_DOM_ID]-[SCREEN_NAME]. Here's an example of a how to replace the default start-screen with a very simple "click to capture" link.
<photobooth id='myBooth1' data-app-id='SOME_APP_ID'></photobooth>

<div id='MyBooth1-start-screen'>
  <a class='cameratag_connect'>click to capture</a>
</div>
Take note of the class name "cameratag-record" on the "click to start recording" link. This is one of seven special classes that will trigger an action in the CameraTag when clicked. These special action classes are:
  • cameratag_photobooth_capture
    starts the camera

  • cameratag_upload
    this element n the start screen will trigger and upload

  • cameratag_photobooth_trigger
    snaps a picture

  • cameratag_photobooth_accept
    saves the current picture

  • cameratag_photobooth_apply
    applys the selected effect

  • cameratag_photobooth_cancel
    cancels the current effect

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.
CT_i18n[0] = CT_i18n[0] || "To record this video using your mobile phone please visit <<url>> in your mobile browser"
CT_i18n[1] = CT_i18n[1] || "Your mobile device does not support video uploading"
CT_i18n[2] = CT_i18n[2] || "Please install Flash Player 11 or higher: https://get.adobe.com/flashplayer"
CT_i18n[3] = CT_i18n[3] || "Unable to embed video recorder. Please make sure you have Flash Player 11 or higher installed"
CT_i18n[4] = CT_i18n[4] || "choose a method below to submit your video"
CT_i18n[5] = CT_i18n[5] || "record from webcam"
CT_i18n[6] = CT_i18n[6] || "upload a file"
CT_i18n[7] = CT_i18n[7] || "record from phone"
CT_i18n[8] = CT_i18n[8] || "wave to the camera"
CT_i18n[9] = CT_i18n[9] || "recording in"
CT_i18n[10] = CT_i18n[10] || "uploading..."
CT_i18n[11] = CT_i18n[11] || "click to stop recording"
CT_i18n[12] = CT_i18n[12] || "click to skip review"
CT_i18n[13] = CT_i18n[13] || "Accept"
CT_i18n[14] = CT_i18n[14] || "Re-record"
CT_i18n[15] = CT_i18n[15] || "Review Recording"
CT_i18n[16] = CT_i18n[16] || "please wait while we push pixels"
CT_i18n[17] = CT_i18n[17] || "published"
CT_i18n[18] = CT_i18n[18] || "Enter your <b>mobile phone number</b> below and we will text you a link for mobile recording"
CT_i18n[19] = CT_i18n[19] || "Send Mobile Link"
CT_i18n[20] = CT_i18n[20] || "cancel"
CT_i18n[21] = CT_i18n[21] || "Check your phone for mobile recording instructions"
CT_i18n[22] = CT_i18n[22] || "or point your mobile browser to"
CT_i18n[23] = CT_i18n[23] || "drop file to upload"
CT_i18n[24] = CT_i18n[24] || "sending your message"
CT_i18n[25] = CT_i18n[25] || "please enter your phone number!"
CT_i18n[26] = CT_i18n[26] || "that does not appear to be a valid phone number"
CT_i18n[27] = CT_i18n[27] || "Unable to send SMS."
CT_i18n[28] = CT_i18n[28] || "No Camera Detected"
CT_i18n[29] = CT_i18n[29] || "No Microphone Detected"
CT_i18n[30] = CT_i18n[30] || "Camera Access Denied"
CT_i18n[31] = CT_i18n[31] || "Lost connection to server"
CT_i18n[32] = CT_i18n[32] || "Playback failed"
CT_i18n[33] = CT_i18n[33] || "Unable To Connect"
CT_i18n[34] = CT_i18n[34] || "Unable to publish your recording."
CT_i18n[35] = CT_i18n[35] || "Unable to submit form data."
CT_i18n[36] = CT_i18n[36] || "uploading your video"
CT_i18n[37] = CT_i18n[37] || "buffering video playback"
CT_i18n[38] = CT_i18n[38] || "publishing"
CT_i18n[39] = CT_i18n[39] || "connecting..."
CT_i18n[40] = CT_i18n[40] || "negotiating firewall..."
CT_i18n[41] = CT_i18n[41] || "Oh No! It looks like your browser paused the recorder"
CT_i18n[42] = CT_i18n[42] || "That does not appear to be a valid video file. Proceed anyway?"
CT_i18n[43] = CT_i18n[43] || "Record or Upload a Video"
CT_i18n[44] = CT_i18n[44] || "Tap to get started"
CT_i18n[45] = CT_i18n[45] || "Choose a method to submit your photo"
CT_i18n[46] = CT_i18n[46] || "Capture from Webcam"
CT_i18n[47] = CT_i18n[47] || "Upload a File"
CT_i18n[48] = CT_i18n[48] || "Choose which camera and microphone you would like to use"
CT_i18n[49] = CT_i18n[49] || "Tap here to snap or upload a photo"
CT_i18n[50] = CT_i18n[50] || "Image Adjustments / Filters"
CT_i18n[51] = CT_i18n[51] || "Pan & Zoom"
CT_i18n[52] = CT_i18n[52] || "Smoke"
CT_i18n[53] = CT_i18n[53] || "Murica"
CT_i18n[54] = CT_i18n[54] || "Brightness / Contrast"
CT_i18n[55] = CT_i18n[55] || "Night Vision"
CT_i18n[56] = CT_i18n[56] || "Posterize"
CT_i18n[57] = CT_i18n[57] || "Zinc"
CT_i18n[58] = CT_i18n[58] || "Berry"
CT_i18n[59] = CT_i18n[59] || "Spy Cam"
CT_i18n[60] = CT_i18n[60] || "Magazine"
CT_i18n[61] = CT_i18n[61] || "Cross Hatch"
CT_i18n[62] = CT_i18n[62] || "Flare"
CT_i18n[63] = CT_i18n[63] || "Hue / Saturation"
CT_i18n[64] = CT_i18n[64] || "Vibrance"
CT_i18n[65] = CT_i18n[65] || "Denoise"
CT_i18n[66] = CT_i18n[66] || "Unsharp Mask"
CT_i18n[67] = CT_i18n[67] || "Noise"
CT_i18n[68] = CT_i18n[68] || "Sepia"
CT_i18n[69] = CT_i18n[69] || "Vignette"
CT_i18n[70] = CT_i18n[70] || "Zoom Blur"
CT_i18n[71] = CT_i18n[71] || "Triangle Blur"
CT_i18n[72] = CT_i18n[72] || "Tilt Shift"
CT_i18n[73] = CT_i18n[73] || "Lens Blur"
CT_i18n[74] = CT_i18n[74] || "Swirl"
CT_i18n[75] = CT_i18n[75] || "Bulge / Pinch"
CT_i18n[76] = CT_i18n[76] || "Ink"
CT_i18n[77] = CT_i18n[77] || "Edge Work"
CT_i18n[78] = CT_i18n[78] || "Hexagonal Pixelate"
CT_i18n[79] = CT_i18n[79] || "Dot Screen"
CT_i18n[80] = CT_i18n[80] || "Color Halftone"
CT_i18n[82] = CT_i18n[82] || "Angle"
CT_i18n[83] = CT_i18n[83] || "Size"
CT_i18n[84] = CT_i18n[84] || "Scale"
CT_i18n[85] = CT_i18n[85] || "Radius"
CT_i18n[86] = CT_i18n[86] || "Strength"
CT_i18n[87] = CT_i18n[87] || "Brightness"
CT_i18n[88] = CT_i18n[88] || "Blur Radius"
CT_i18n[89] = CT_i18n[89] || "Gradient Radius"
CT_i18n[90] = CT_i18n[90] || "Hue"
CT_i18n[91] = CT_i18n[91] || "Saturation"
CT_i18n[92] = CT_i18n[92] || "Motion"
CT_i18n[93] = CT_i18n[93] || "Number of Colors"
CT_i18n[94] = CT_i18n[94] || "Gamma"
CT_i18n[95] = CT_i18n[95] || "Color"
CT_i18n[96] = CT_i18n[96] || "Luminance"
CT_i18n[97] = CT_i18n[97] || "Contrast"
CT_i18n[98] = CT_i18n[98] || "Stopping"
CT_i18n[99] = CT_i18n[99] || "Unable to activate camera or microphone"
CT_i18n[100] = CT_i18n[100] || "Waiting for hardware"