Sidebar Movie Talk: A WebRTC movie experiment in Google Apps Script as an add-on for Google Docs, Sheets and Forms – MASHe
MASHe
- Home
- 2017
- July
- Sidebar Movie Talk: A WebRTC movie experiment in Google Apps Script as an add-on for Google Docs, Sheets and Forms
tl;dr my failed attempt to get production level movie web talk into Google Doc, Sheets, Forms sidebar as an Add-on (possible with WebRTC but not without setup/running costs)
Back in two thousand ten 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 two thousand thirteen I revisited this in ‘This time it’s real and private: Making your own realtime learning practices with WebRTC’, looking at the WebRTC specification, which permits real-time communication (audio, movie, talk, screen interaction) without any extra plugins just your web browser a bit of JavaScript, to develop applications.
One of the contraptions I mentioned in that post was the movie conferencing service show up.in. I’ve been tracking the development of emerge.in for a number of years now, sharing my thoughts on how this service could be used for setting up an effortless open online office hours using show up.in. A lump of news I missed was show up.in releasing a developer API to permit effortless 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.show up.in/
This was bit of a suck as I was hoping to test the user practice of group movie talk embedded within Google Docs, Sheets and Forms and my preference was not to build an entire movie conference solution.
There are other solutions for plugin WebRTC services like OpenTok and twilio but there is no free tier. PeerJS do suggest fifty concurrent connections but it doesn’t look like the project is maintained (there is an issue from two thousand fifteen on the requirement to stir to SSL in Chrome which is unanswered). PeerJS is more or a raw wrapper library for WebRTC than the more cork 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 attempt out the practice by visiting this add-on test document and clicking Add-ons > Sidebar Movie Talk > Begin. For those not familiar with WebRTC there are essentially five components you need:
- A modern browser
- Some JavaScript code to interface WebRTC features
- Signalling server – used to orchestrate connections inbetween peers
- Overwhelm server – used to get an outer network address
- 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 three items is where it gets more tricky. For the Numb server you can use Google's public Numb server (overwhelm.l.google.com:19302), which has previously been proclaimed 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 movie/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.
Ultimately there is the signalling server. In the case of SimpleWebRTC the authors have also published Signalmaster, which uses knot.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 emerges you can now only sign-up for v3 which isn’t compatible. Signalling servers don’t have to be knot.js/socket.io and there are slew of alternative setups you can use include PHP/SQLite and while SimpleWebRTC permits passing in a different connection object I was incapable 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 emerge.in will see how effortless 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 glad to talk you through this).
One last link to share. Here’s a tutorial for an Insanely Ordinary WebRTC Movie Talk 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 good 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]