Record and save video using JavaScript

In this example, you will learn how to record a video, then save it as soon as the user stops recording. We also use a custom HTML link for the interface and hide the player's buttons.

This example requires you to specify your developer key (see tutorial).

Example

record



Last video GUID:

HTML code

<script language="JavaScript" type="text/javascript">
<!--

// Global variable to hold player's reference.
var _Nimbb;

// Global variable to hold the guid of the recorded video.
var _Guid = "";

// Global variables for timer.
var _Timer;
var _Count;

// Constant for maximum recording time (in seconds).
var MAX_TIME = 15;

// Event: Nimbb Player has been initialized and is ready.
function Nimbb_initCompleted(idPlayer)
{
  // Get a reference to the player since it was successfully created.
  _Nimbb = document[idPlayer];
}

// Event: the player has stopped recording.
function Nimbb_recordingStopped(idPlayer)
{
  // Tell the player to save video now.
  _Nimbb.saveVideo();
}

// Event: the state of the player changed.
function Nimbb_stateChanged(idPlayer, state)
{
  // Update button text.
  updateText();
}

// Event: the video was saved.
function Nimbb_videoSaved(idPlayer)
{
  var textbox = document.getElementById("guidTextBox");
	
  // Get video GUID.
  _Guid = _Nimbb.getGuid();
	
  // Set GUID value in textbox.
  textbox.value = _Guid;
}

// Event: the timer count.
function Timer_Count()
{
  // Decrement total count and check if we have reached the maximum time.
  _Count--;
  if( _Count == 0 )
  {
    // Stop the recording.
    stop();
    return;
  }
	
  // Update button text.
  updateText();
	
  // Let's continue the timer.
  _Timer = setTimeout("Timer_Count()", 1000);
}

// Called when user clicks the link.
function action()
{
  // Check player's state and call appropriate action.
  if( _Nimbb.getState() == "recording" )
  {
    stop();
  } 
  else
  {
    record();
  }
}

// Start recording the video.
function record()
{
  // Make sure the user has allowed access to camera.
  if( !_Nimbb.isCaptureAllowed() )
  {
    alert("You need to allow access to your webcam.");
    return;
  }

  // Make sure the user is not already recording.
  if( _Nimbb.getState() == "recording" )
  {
    alert("You are already recording a video.");
    return;
  }
	
  // Prepare timer object.
  _Count = MAX_TIME + 1;
  Timer_Count();
	
  // Start recording.
  _Nimbb.recordVideo();
}

// Stop recording the video.
function stop()
{
  // Make sure the user is recording.
  if( _Nimbb.getState() != "recording" )
  {
    alert("You need to record a video.");
    return;
  }
	
  // Stop timer.
  clearTimeout(_Timer);
	
  // Stop recording.
  _Nimbb.stopVideo();
}

// Update text on the link.
function updateText()
{
  var actionButton = document.getElementById("actionButton");

  // Check player's state.
  if( _Nimbb.getState() == "recording" )
  {
    // Update link text.
    actionButton.innerHTML = "stop (" + _Count + ")";
  } 
  else
  {
    actionButton.innerHTML = "record";
  }
}

// -->
</script>
<a id="actionButton" href="javascript:action();">record</a>
<br>

<object id="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="http://player.nimbb.com/nimbb.swf?mode=record&simplepage=1&showmenu=0&showcounter=0&key=XXXXXXXXXX&lang=en" />
<param name="allowScriptAccess" value="always" />
<embed name="nimbb" src="http://player.nimbb.com/nimbb.swf?mode=record&simplepage=1&showmenu=0&showcounter=0&key=XXXXXXXXXX&lang=en" width="320" height="240" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash">
</embed>
</object>

<br><br>
Last video GUID: <br>
<input id="guidTextBox" type="text" name="guid" style="width:100px;">


In this example, when you click the record link, the Nimbb Player starts recording and the text is updated to display the total time left in seconds.

When you click stop, the GUID of the video is set in the textbox guidTextBox.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.