Example web applications using the crocodile-rtc library.

get a copy of this repository:

git clone https://github.com/crocodilertc/crocodile-rtc-examples.git

Alternatively, download a zip file of the repository by clicking on the button to the right labelled Download ZIP.

The directory dist contains concatenated, minified CSS and JavaScript files. Node.js can be used to create a clean build of the dist directory:

On the command line, If you have Node.js installed, navigate to the directory of the example you would like to use and run the install command:

npm install

This downloads any dependencies that are needed to build a distribution of the project. Now on the command line run GRUNT to build a distribution of the project:

grunt

Once the command has finished loading, it will re-create the folder labelled dist. Add this folder to the same location of the web page you would like to use the example in. For example; if the web page called click2call.html is located in the folder www. A copy of the dist folder should be placed in the www folder.

Now you can use the example in your web page. The example below uses the click-2-call application:

<link href='dist/css/crocodilertc-click2call-plugin.min.css' rel='stylesheet' type='text/css'/>
<script src="dist/js/crocodilertc-click2call-plugin.min.js"></script>
<script>
  var config = {
    apiKey: 'FIXME',
    addressToCall: 'FIXME@crocodilertc.net',
    click2callDisplayName: 'FIXME'
  };
  croc_click2call(config);
</script>

This will create a click-2-call tab on the right hand side of your web page. You will need to replace the FIXME place holder with appropriate values.

• The apiKey property requires an API key registered on the Crocodile network. To register go to https://www.crocodilertc.net/
• The addresssToCall property requires the address of a registered user for free calls. To make calls to non-registered numbers you will need to add balance to your API key.
• The click2callDisplayName property requires a string of any characters except " This will be displayed to the recipient.

The Click-2-Call application can be configured to build audio only or video only versions of the application. The lighter build enables the application to load faster. This option is intended for users that would like to only use audio or video.

To build an audio only version of the Click-2-Call application, run the command:

grunt audio

To build a video only version of the Click-2-Call application, run the command:

grunt video

The Click-2-Call application uses image files that it MUST know the location of. It builds the application assuming that its default location will be in the dist folder in the same location as the HTML page that will be using it.

If you would like to place the dist folder into a different location from the HTML page using it, run the command:

grunt --pathToDist='path/to/dist'

You will need to replace the value path/to/dist with the path to the dist folder you would like to use. The path can be absolute, or relative to the HTML page initiating the application.

Once the command has finished loading, it will re-create the folder labelled dist. Add this folder to the value of the pathToDist option. For example; if the web page called click2call.html is located in the folder www and the pathToDist option is set to path/to/dist. A copy of the dist folder should be placed in the www/path/to/ directory resolving the dist folder to www/path/to/dist.

For more details on the examples, see the crocodile-rtc-wiki.