Intro
Overview New in V14
Apps
Overview Configuration
<camera>
Overview Browser Support Embedding Configuration Custom Interface JS Methods JS Events Collecting Videos
<room>
Overview Browser Support Embedding Configuration Custom Interface JS Methods JS Events
<player>
Overview Embedding Configuration JS Methods & Events
<wall>
Overview Embedding Configuration JS Methods
<photobooth>
Overview Embedding Configuration Custom Interface JS Methods JS Events
<photo>
Overview Embedding
<microphone>
Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Audio
REST API
Overview List Assets Show Asset Update Asset Delete Asset List Apps Show App Create App Update App Video Object Photo Object Audio Object List Rooms Create Room Show Room Update Room Delete Room

Customize The Look Of Your <room>

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 room 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 Room Wizard or you can supply your own css file.

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

How do I change the HTML?"

There are a few primary interfaces (screens) in the CameraTag <room>. Each one can be replaced with your own HTML using the method below.

lobby-screen


start-screen


chat-screen


device-selection-screen


To overwrite a screen in the CameraTag <room> create a <div> on the page with an id that matches the pattern [ROOM_INSTANCE_ID]-screen-name. For exmaple to replace the start-screen in yor <room> with the id "myRoom1" you would create a div like the one below: 
<div id='myRoom1-start-screen'>
  <div class='cameratag_user_prompt'>Please enter a nick name to join the room</div>
  <input class='cameratag_username' placeholder='Enter a Nickname'></input>
  <a class='cameratag_connect'>Join Room</a>
</div>
Take note of the class name "cameratag_connect" on the "Join Room" link. This is one of several special classes that will trigger an action in the room tag when clicked. These special action classes are:
  • cameratag_connect
    connects to room

  • cameratag_disconnect
    disconnect from room

  • cameratag_login_prompt
    An element that containts a text prompt for the user to enter a user name (will be hidden if a data-user attribute is provided). Used on the start screen.

  • cameratag_user_name
    text input that allows the user to define their own user name (will be hidden if a data-user attribute is provided). Used on the start screen.

  • cameratag_room_name
    text input that allows the user to define their own room name (will be hidden if a data-room attribute is provided). Used on the start screen.

  • cameratag_streams_container
    A div in your start screen that will automatically be populted with video streams.

  • cameratag_controls_container
    A div in your start screen that will contain your main controls (typically disconnect, mute mic, mute video and settings links)

  • cameratag_stream_mute_mic
    a link that will toggle on/off the user's microphone

  • cameratag_stream_mute_video
    a link that will toggle on/off the user's camera

  • cameratag_show_device_selection
    a link to open the device selection screen.

  • cameratag_close_device_settings
    a link or button that will close the device selection screen

  • cameratag_video_sources
    a select element that will be automatically populated with the available video devices (for use on the device_selection_screen)

  • cameratag_audio_sources
    a select element that will be automatically populated with the available audio devices (for use on the device_selection_screen)

  • cameratag_disconnect_warning
    an element on the chat-screen that will show the time remaining warning (we will automaticlly populate the text)

  • cameratag_lobby_timer
    an element on the lobby-screen that will display the time remaining before the room goes live (we will automaticlly populate the text)

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 from camera"
CT_i18n[6] = "upload a file"
CT_i18n[7] = "record from 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] = "Enter your <b>mobile phone number</b> below and we will text you a link for mobile recording"
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] = "Capture from Webcam"
CT_i18n[47] = "Upload a File"
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] = "Image Adjustments / 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] = "record from 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 chat credentials below:"
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."