At WebRTC.ventures, our speciality is building completely custom live video applications. We build applications where live video is a central part of the workflow. Use cases include telehealth, interactive events, collaboration tools, and many others. There is, however, a problem we run into frequently. We’re happy to report here that 8×8 (which acquired Jitsi last year) has come up with an interesting solution with their new Jitsi as a Service.
8×8’s Jitsi as a Service solves a common challenge that custom development shops like ours often face
A common challenge for our team at WebRTC.ventures are those customers with a relatively simple video integration use case and a limited budget. We are often asked, “Can you add live video to my WordPress site?” Until now, our answer has been “Yes, but it’s more expensive and complicated than you imagine!”
We think WebRTC is the best thing since sliced bread and we love building custom apps with it. But fully custom WebRTC applications often require months of work and tens or hundreds of thousands of dollars – making a custom app more costly than simple use cases justify. Adding live video customer support or sales widgets to a small e-commerce website are good examples of when this is the case. Another is having a branded meeting experience built directly into your website for online education or sales meetings. (More on this one below!)
If you are a large company building a big application, then the costs are less of a problem and it’s well worth the effort. But if you are a small to medium sized business, the payoff can be more uncertain and the technical risk may become too high.
8×8’s new offering of Jitsi as a Service changes all this. I’ll refer to it as JaaS from here on out.
Arin and 8×8’s Shane Pearson share best practices for building WebRTC-based applications and demonstrate a JaaS integration in this March 23 webinar:
3 Best Practices for Embedding Video Meetings in a WordPress Website.
More than just a jazzy new CPaaS
Building a WebRTC application requires an important upfront technical choice. Should you build your app based on open source media servers or a commercial Communication Platform as a Service (CPaaS)?
Jitsi has traditionally been one of the top choices for building an open source based WebRTC application. But, you still had to set up and manage your own infrastructure for the media servers. This requires some cost. More importantly, it requires a good amount of technical expertise. This in itself is the more expensive part! Furthermore, you still have to build the UI around your video calls and integrate them into the rest of your application. This incurs further development costs as well as ongoing maintenance.
Going with a commercial CPaaS eliminates some of those costs. You don’t need to host the media servers yourself. But you still need to do extensive coding against their APIs to build your video solution.
These options are good for those with larger budgets and more custom workflows. They are probably not the right solution for that small business with limited programming budget and a simple use case. Enter JaaS with a new solution for those users!
With a JaaS account from 8×8 and minimal additional code, you can now integrate a standard video call experience directly into your site. JaaS provides you with a complete meeting tool UI right out of the box. For example, the following screenshot shows a group video chat that we implemented directly in the WebRTC.ventures site with minimal code needed:
The beauty lies in the simplicity of implementation and the ability to brand the meeting
We set up a URL on our WordPress website where the meeting will be hosted. Perhaps, “https://yourdomain.com/meeting/”, or whatever works for you. This branded URL is what is provided to participants in advance of a sales call.
In the JaaS admin page, we set the background image and added our logo so it was further customized to our brand. When a customer clicks this URL, they join a group video call with a UI already supplied by the Jitsi API.
And it gets even better: we can place that meeting URL on our website wherever we want. So it not only uses consistent branding and has access to our menu structure, we can also put links to other materials we commonly reference in a sales call, like pricing sheets or customer examples. It also has chat, screen sharing, and all the important meeting functionalities built right in.
4 Simple Steps to add JaaS to your WordPress site
- Create a JaaS account with 8×8 and get your API key. Customize aspects of your calls in the account admin, such as background image and logo.
- Set up a page in your WordPress site where you will host meetings. On this page, you’ll make a call out to a small bit of custom code you need to host somewhere that creates a JSON Web Token (JWT) for each meeting participant, and which signs that JWT with your JaaS API key.
- 8×8 will supply you with a bit of sample HTML. Put the sample HTML into your site, which is basically just a div tag to indicate where the video call should be placed in your page layout. We recommend using a full page width layout so that it looks best in responsive designs, on desktop and mobile browsers.
- They will also supply sample Javascript to put into a Raw Javascript tag on your same WordPress page. You’ll need to slightly modify the sample to insert your JWT for each meeting participant.
Here’s a diagram showing how this will work:
Note that in steps 2 and 3 of the diagram above, I’ve shown an example of signing the JWT. This is the only custom code you’ll need, and it can be very simple, such as a NodeJS call you make on a free Heroku server instance. The signed JWT that you get back from that goes into the sample 8×8 code below, where it says JSON Web Token:
Don’t rely on the Javascript code in the above image. Instead, grab the latest samples from the JaaS admin and adapt those to your needs. This is just to give you an idea of how it will work. The div tag which is named “jaas-container” is put into a raw HTML block if you’re using a WordPress page builder, as we do in this example on the WebRTC.ventures website. You can also insert it into your html directly in the appropriate place, if you’re building the page in custom html.
The sample 8×8 Javascript shown above also needs to be inserted on the page (in a Raw JS block if you’re using a page builder.) You need to supply the AppId and Room name, as well as the JSON Web Token that you’ve received from your custom code.
Signing a JSON Web Token with a key is a pretty straightforward exercise. Blog posts such as this one show you how to do it. We recommend you put it behind a Nodejs web service on another server, such as Heroku, so that you can obfuscate the API key from people trying to read your javascript code. (JaaS is inexpensive. but you still don’t want to make it easy for anyone to steal your API key and use your account at your expense!)
When should I use JaaS instead of Jitsi?
JaaS is a great option to consider if you have a limited budget for your video application (less than $10,000 for example), and you have a pretty straightforward use case.
For example, you already have a WordPress site where you are selling the services of a small team of Spanish teachers. You just want a branded, private chat room to talk with your students. Around that chat room, you want to embed things like links to homework assignments or videos you’re going to watch together. In the default features of the Jitsi meeting tool that JaaS provides, you already have access to text chat, screen sharing, and you don’t need much else in the video tool itself. JaaS is perfect for this scenario.
Any freelance developer can use this blog post as a starting point to integrate JaaS into your WordPress or other website. It won’t cost you a lot and there’s no major server infrastructure you need to maintain on an ongoing basis.
When should I use Jitsi instead of JaaS?
Anytime that you have a more custom workflow or need more specialized features in the video call itself, a more custom solution is in order. Or, if you are a larger business that needs to consider higher scale applications and would like to control your own infrastructure.
An example here would be the type of telehealth applications we often build at WebRTC.ventures. You need a tight patient UI that guides them through a specific workflow of payment and forms before they meet with their doctor. And, all the data around that call must be handled carefully to be HIPAA compliant. Something like our telehealth starter platform, SimplyDoc.
Another example where custom development is justified is an interactive broadcasting application. You want to have a group video chat conducted over Jitsi, but then broadcast out to a large audience via a custom interface. Perhaps it’s a business conference, a music concert, or a larger scale online education application. Any of those are good examples where you can still use Jitsi, but you might want to control your own infrastructure and go to the higher expense (and benefits) of a custom application.
For those scenarios, you can use Jitsi as an open source media server, set up your own custom infrastructure, build your own custom UI around it, and integrate other tools like callstats.io from 8×8 for analysis of call quality.
We’re here to build your custom solution!
To learn more about JaaS, check it out on 8×8 and sign up for an account! The admin tools will provide you with a lot of documentation to help you on your way.
If you would like to explore building a custom application around Jitsi, or need some consulting around your existing solution or video business ideas, contact us! We can supply all the expertise you need around the design, development, and devops of highly custom and scalable WebRTC applications.
