Adding audio/video calls in HTML5 app

Eugeny89 picture Eugeny89 · Jun 4, 2013 · Viewed 18.9k times · Source

I'm working on HTML5 app that lets several users to work on one document. I need to add a possibility for users (editing the same document) to talk to each other. And I just don't know how to start with that. Here are my questions

  1. Is there an HTML5 lib allowing to transfer sound from microphone between clients?
  2. What about streaming video from camera?
  3. What is an easiest server-side solution for that?

Any thoughts are strongly appreciated! So don't be shy! :)

UPD: please note that I need an abbility for more then two users to talk.

Answer

user1693593 picture user1693593 · Jun 7, 2013

For this you can use WebRTC.

However, this is a very young and unfinished technology that as already stated is currently available only in Chrome stable and Firefox beta. This means there will probably come changes to the current spec, something to be aware of in case of early implementation. But it allow you to use video and audio communication directly in the browser.

Quick-start here:
http://www.html5rocks.com/en/tutorials/webrtc/basics/

Other options are Flash based plugins such as flash-videoio. This is an open source plugin but will naturally require Adobe Flash installed. This may or may not be a problem depending on the company's security policy.

For technical details on implementation please see examples on the provided links.

For many-to-many you can use either:

  1. "Mesh" - everybody connects to everybody. This however is costly on CPU and mobiles are often left out.
  2. "Star" - everybody goes through the most capable device. However, with many connections this will soon run slow for the device handling all connections.
  3. MCU. Specialized server to handle all connections. If mixes audio and video and handles drop-outs as well without affecting the other callers.

Examples of MCU's:
http://sourceforge.net/projects/mcumediaserver/ (open source)
http://www.medooze.com/products/mcu.aspx (commercial)