Comments Off on 5 simple steps to add video chat to your WordPress site.

To demonstrate the flexibility of WebRTC based applications, we have developed a video chat plugin for the popular wordpress platform that allows to make a call or initiate screen sharing between two users on the blog. You can make a call and other user will receive this call, you can also choose between sharing your screen or just sharing a webcam stream. This was done using one of many WebRTC based CPaaS (Communication Platforms as service), TokBox, this means you will need tokbox credentials, fortunately TokBox offers trial accounts that provide you with limited free credentials.

How to setup

First, install this plugin just like any other wordpress plugin, then you’ll need to configure your TokBox credentials in order to connect a call later on.

Here’s how you would do it after installing and activating the plugin on your wordpress administrator page.

wordpress settings page
Fig. 1: WordPress settings for the wordpress video call plugin
wordpress toolbar make-a-call button
Fig. 2: WordPress toolbar after the plugin has been installed.

Update

After you have installed and configured the plugin in wordpress, the first thing you’ll notice is a new button that says Make a Call, before you click on it, make sure you’ve added the contacts page to your blog, so you can see something like this.

contacts page menu choice between share screen and call
Fig. 3: selecting a user to have a call with, after clicking a user the option to share screen or have a normal call pop up.

At this point we can select whether we want to share our cameras or our desktops with the callee, this is how both options look like in practice, note that if you’re using chrome you will need a plugin to grant permissions on your website to access the desktop and you will also need to specify the extension’s ID on your settings page (Fig. 1), more on how to do this for your domain here.

screen with streaming on the left and screen sharing on the right
Fig. 4: webcam streaming on the left and screen sharing on the right by the other peer
both parties share a webcam stream
Fig. 5: Both parties sharing their webcam stream.

To add a new “Contacts” page, go to your admin area and then to the Pages sub-menu as pictured on the image below. Click on Add New.

adding a new page in page menu
Fig. 6: Pages configuration menu in wordpress.

On the “Add New” page, name the new one “Contacts” and select the “Contacts” template, you should be able to see it after installing the plugin in wordpress.

adding the contacts page, correct permalink pictured
Fig. 7: Adding a new Contacts page, showing the correct permalink.

Once you see the permalink show up like /contacts/ you can safely click on Publish  and go to your new contacts page for video chatting and screen sharing in wordpress.

You can use this link to try out the plugin. This plugin is experimental and not production ready.

If you are looking for more information on our services and products, don’t hesitate to contact us, WebRTC applications are our speciality, we have some of the best people in the field and we’ll be thrilled to take your case.

Recent Blog Posts