Sidebar Video Chat: A WebRTC video experiment in Google Apps Script as an add-on for Google Docs, Sheets and Forms

tl;dr my failed attempt to get production level video web chat into Google Doc, Sheets, Forms sidebar as an Add-on (possible with WebRTC but not without setup/running costs)

Back in 2010 I predicted we’d see a lot more real-time web applications in education highlighting a number of web services that had strong real-time collaborative features. In 2013 I revisited this in ‘This time it’s real and personal: Making your own realtime learning experiences with WebRTC’, looking at the WebRTC specification, which permits real-time communication (audio, video, chat, screen interaction) without any extra plugins just your web browser a bit of JavaScript, to develop applications.

One of the tools I mentioned in that post was the video conferencing service appear.in. I’ve been tracking the development of appear.in for a number of years now, sharing my thoughts on how this service could be used for setting up an easy open online office hours using appear.in. A piece of news I missed was appear.in releasing a developer API to allow easy integration of their service in your sites as I only discovered it after they announced it would close on the 30th June 2017.


Screenshot from https://developer.appear.in/

This was bit of a blow as I was hoping to test the user experience of group video chat embedded within Google Docs, Sheets and Forms and my preference was not to build an entire video conference solution.

 

There are other solutions for plugin WebRTC services like OpenTok and twilio but there is no free tier. PeerJS do offer 50 concurrent connections but it doesn’t look like the project is maintained (there is an issue from 2015 on the requirement to move to SSL in Chrome which is unanswered). PeerJS is more or a raw wrapper library for WebRTC than the more plug and play OpenTok and twilio.

The closest I got to a production level solution was using the SimpleWebRTC library. As part of the library a sandbox signalling server is provided and you can try out the experience by visiting this add-on test document and clicking Add-ons > Sidebar Video Chat > Start. For those not familiar with WebRTC there are essentially five components you need:

  1. A modern browser
  2. Some JavaScript code to interface WebRTC features
  3. Signalling server – used to orchestrate connections between peers
  4. STUN server – used to get an external network address
  5. TURN server – fallback to relay traffic if direct (peer-to-peer) connection fails

You can read more about WebRTC infrastructure in this HTML5 Rocks post, where I cribbed some of the list above. The last 3 items is where it gets more tricky. For the STUN server you can use Google’s public STUN server (stun.l.google.com:19302), which has previously been declared for public use. TURN is where it get more complicated. This is the fallback when network conditions prevent a direct peer-to-peer data connection. As you are relaying video/audio it’s potentially high bandwidth. In my attempts to take this idea to production I experimented with the Xirsys service which has a 500Mb free tier for developers.

Finally there is the signalling server. In the case of SimpleWebRTC the authors have also published Signalmaster, which uses node.js server and socket.io. I was hesitant to set this up on Google Cloud given the potential cost implications. Xirsys have ported SimpleWebRTC to use their infrastructure, including their signal server, but this was released for v2 of their API and it appears you can now only sign-up for v3 which isn’t compatible. Signalling servers don’t have to be node.js/socket.io and there are plenty of alternative setups you can use include PHP/SQLite and while SimpleWebRTC permits passing in a different connection object I was unable to get far with this.

So many hours later I’ve a sandbox demo working but nothing for general release. My various fumblings are captured in this Github repo if anyone is interested in taking further. Perhaps appear.in will see how easy it is to integrate their product as an Add-on for Google Docs, Sheets and Forms and whitelist their service for a sidebar embed (if you are reading more than happy to talk you through this).

One last link to share. Here’s a tutorial for an Insanely Simple WebRTC Video Chat Using Firebase, which uses a Firebase Realtime Database as a signalling server. If I had more time to spend on this I think my next avenue would be to port some of SimpleWebRTC features into this example … unless of course someone can figure out how to make a Firebase connection object for the existing SimpleWebRTC library.

[I suppose I should also address the elephant in the room … why not use Google Hangouts? Hangouts are great but often the hangout window gets buried when you are working on a doc and whilst you can still hear other people unless you do a lot of browser resizing/placing you can’t actually see them]

4 Comments


    1. Great call Tsahi looks ideal for this type of project. Would need some upfront investment to build a user base before recouping costs but great to know this option exists

      Reply

      1. Gruveo can be loyal to up to the limit to 3..4 users in the chat. If this leads them to popularity.
        Does Google intend to add video to the chat? I noticed that Skype inside the Office 365 works very well. They can implement video calls.

        Reply

        1. Hi Alexander – thanks for your comment. I looked a bit further into and it looks like the Gruveo Embed API has a minimum $0.05 per user per call. Google gazumping this would always be a risk, you never know it might be something they’ve already researched and found to be a poor user experience…

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *