Firepad Plugin: WebRTC video collaboration

Yesterday Firebase launched Firepad, a Firebase-powered open source collaborative text editor. Here’s the product pitch, Michael Lehenbauer says it best:

Firepad provides true collaborative editing, complete with intelligent OT-based merging and conflict resolution. It’s full-featured and has support for both rich text and code editing. Some of its features include cursor position synchronization, undo / redo, text highlighting, user attribution, presence detection, and version checkpointing.

For the first time, developers can now add text editing and document collaboration to their own apps without too much extra work.

This project is open-sourced, which is exciting because it means that we can build plugins for it. Since collaboration usually involves communication, we decided to build a video chat plugin right into Firepad, so you can not only collaborate, but talk to your companions as well. Here’s how you can add video chat to your firepad project:

First, include all the necessary Firepad Javascript and CSS libraries


Second, include TokBox library and Tokbox plugin for firepad:

Screen Shot 2013-04-10 at 2.26.30 AM

Third, add a ‘div’ element for video to appear:

Screen Shot 2013-04-10 at 2.27.28 AMLastly, put videos in that div element!

Screen Shot 2013-04-10 at 2.29.17 AM

And you will now be able to video chat with your collaborators while you work together. For a live demo, check out our demo page.

Happy Coding!

Screen Shot 2013-04-10 at 10.42.37 AM

*Disclaimer*: WebRTC is currently only supported in Chrome, Firefox Nightly, Internet Explorer (with Chrome Frame Plugin), and Android Chrome Beta (with webrtc flag enabled)