How to do multi-party video conference?
The multi-party video conference is the natural extension of two-party video call. Please see How to do two-party video call? for details. You can do multi-party live video conference by having multiple instances of VideoIO application, one per participant. One of the VideoIO instance is used to capture live camera view and microphone audio as local stream to the media server, and other instances are used to play the remote media streams of other participants from the media server. Please see How to work with media server? on details of installing and configuring a media server. For illustrations in this section we assume that you have a media server running on 192.1.2.3 and that has an application called myapp which allows you to do live streams. Thus, your media server application should be reachable at "rtmp://192.1.2.3/myapp". In real deployment you will use the real host name or IP address of your media server.
The src property of the VideoIO application can be set to enable the local (publish) or remote (play) mode. Each participant in the conference must use a unique stream name to publish her media. Suppose a six party conference is hosted among users Alice, Bob, Carol, Dan, Emma and Frank, and they select their stream names as "alice", "bob", "carol", "dan", "emma" and "frank", respectively. Each user publishes her own stream, and plays five streams of five other users. Thus, Carol will publish stream named "carol" and play streams "alice", "bob", "dan", "emma", "frank". Thus the remaining challenge is to convey the desired stream names to all the participants in a conference. In practice, people use variety of methods ranging from CGI web service, JavaScript, email or Jabber service to exchange such information among the participants. Whatever mechanism you decide will become the conference membership service of your system. In our tutorial we will assume that these information is exchanged out-of-band by the individuals, e.g., over instant messenging or email. The stream names for each user in our example is shown below for publish and five play instances of VideoIO.
| stream | Alice | Bob | Carol | Dan | Emma | Frank |
|---|---|---|---|---|---|---|
| publish/local | alice | bob | carol | dan | emma | frank |
| play/remote1 | bob | alice | alice | alice | alice | alice |
| play/remote2 | carol | carol | bob | bob | bob | bob |
| play/remote3 | dan | dan | dan | carol | carol | carol |
| play/remote4 | emma | emma | emma | emma | dan | dan |
| play/remote5 | frank | frank | frank | frank | frank | emma |
The user interface will typically have multiple VideoIO instances - one for local video and others for remote videos. For example, user Carol will set src URL of local instance to "rtmp://192.1.2.3/myapp?publish=carol", the src URLs of first remote instance as "rtmp://192.1.2.3/myapp?play=alice", and so on. Joining a conference is equivalent to sending your stream name to all other participants and learning all other participant's stream names. Leaving a conference is equivalent to setting src URLs of all your VideoIO instances to null or "".
The following user interface embeds six VideoIO instances. In practice, you would want to dynamically add new VideoIO instance as more participants join. In our example, each instance is assigned a stream name, which gets set in publish or play mode when you click on the set button for your stream name. To try the demonstration, open this page in six browser instances. You can try on different machines or the same machine. On each browser instance, select one user not already selected before, and click on the set button. It will make that browser instance publish for that user stream, and play for all other streams. When you do this on all six browser instances, you effectively have a six-party video call. Just click on reset button to terminate your conference. If you are running media server on a different host than 192.1.2.3, change the URL's IP address in all text input boxes.
|
|
|
|
|
|
|
|
The source code for these are similar to earlier examples. You can also right-click and select "View Page Source" or equivalent menu option to see the source code.
Summary
In summary, you can use the src property with URL parameter containing publish for your stream and play for remote stream. The recording and playing properties control the current state of whether your video is transmitted or whether remote video is played.
This tutorial is just the begining of how to do multi-party video conference. The VideoIO API is so simple that just setting the src property allows you to accomplish several use cases. There are several other properties that affect behavior of a call, e.g., you can control the camera quality or sound mute. Additionally, you can build other advanced user interface controls in JavaScript similar to how VideoIO's control panel shows in Flash.
The video displayed in local and remote video are different. The publish mode displays the live camera view. In VideoIO the live camera view is always flipped horizontally to appear as if you are looking in a mirror, whereas the actual media stream sent to the server for recording or re-distribution appears as if the camera is looking at you. We feel that this gives the most natural behavior for live video chat or message recording.