QuickStart Guide
Let's build your first video chat app in HTML, CSS and Javascript
Setting things up
In order to connect to the ApiRTC services, you need an API key.
To find out your API key:
Register and log into your ApiRTC account on https://cloud.apirtc.com.
Go to the API/Credentials section.
Grab it and keep it aside, we will soon use this key.
Enter 127.0.0.1 (for the purpose of this tutorial) or the targeted application domain in the list of authorized domains. You may use wildcards as *.mydomain.com.
This project is a simple Web Application consisting of an HTML file, a Javascript file and a CSS file.
Before delving into the code, you need to create a project directory ( quickstart_apirtcjs/
for example) for your application.
This folder will eventually look as follows:
Now, let's build the app!
Create some placeholders for video streams
ApiRTC is to be used in a brower. It will use the DOM Elements to display the video streams.
In the index.html
:
Create a basic HTML markup structure
Reference
app.css
and the latest version of the ApiRTC libraryReference the
app.js
javascript file at the end just before the</body>
closing tagAdd 2
div
elements identified asremote
(that will contains all the video streams from remote participant) andlocal
(that will contains your own camera display)
Connect to the ApiRTC platform
Let's open the app.js
file to develop the scripting part.
The first step is to create a UserAgent
to connect to the ApiRTC server and manage media streams.
You need to replace #INSERT_YOUR_APIKEY_HERE#
by your ApiRTC key. Refer to the **** Get your ApiRTC key and authorize your domain section if you don’t already have your key available.
Launch a webserver pointing to index.html
, open your browser and to see the magic!
See other connection mode in the Authenticationsection.
Create an ApiRTC conversation and publish your local video
Now that you are connected to the ApiRTC plaform, we will:
1. Retrieve a Conversation through its convarsationName
(which is a simple string)
2. Retrieve the local camera video stream and local audio stream
3. Display the local video stream in the HTML page
4. Join the Conversation
5. Publish our local camera video stream into the Conversation to shared across all the participants.
Replace the userAgent.register
call instruction in app.js
by the code below:
Reload the web page in your browser.
You should be prompted to allow mic and camera use.
Click on the "Allow" button.
Note that you should read Subscribed to XXXXXXXXXXXXXXXXX
in your browser console.
Subscribe to remote streams
Each time a new participant publishes their stream to the Conversation, you want to display it in your webpage.
3 events are triggered by the Conversation object to help us with it:
streamListChanged
: when any stream is added or remove to the Conversation's stream list, or when one of the stream's attributes changes.streamAdded
: triggered when a new stream is added to the Conversation (only by streams you are subscribed to)streamRemoved
triggered when a stream is removed from the Conversation (only by streams you are subscribed to)
To get it right with this, you need to:
Subscribe to new streams when the
streamListChanged
is triggeredAdd a new participant's video to the HTML page when
streamAdded
is triggeredRemove a participant's video from the HTML page when
streamRemoved
is triggered
If your speakers and microphone are opened, you will get some shrieking feedback sound. Turn off your microphone and all should be fine.
Go deeper into the ApiRTC model
Read the ApiRTC Javascript Reference documentation pages:
Conversation class
Stream class
UserAgent class
Final touch, get some style
Let's beautiful your first video app with some CSS styling. Edit the app.css
file and add the following code:
Here should be the result:
What you can do next
Read the Developers Guideand get a deeper understanding of ApiRTC workflow
Get to know the Video Communication LifeCyclerun by ApiRTC
Play with theDemo App & Resources
Last updated