Making a multi-channel full duplex walkie-talkie

  • Tutorial
Once we knock for help - to make a service walkie talkie. After lengthy searches, the client was unable to find a suitable solution, so he turned to VoxImplant . We wondered what he had planned there and if we could realize his idea on our platform. We rarely managed to find a scenario that could not be done on it. In general, we talked, we listened carefully and went to write code. The walkie-talkie had to be able to connect to several channels at the same time (similarly to frequencies in analog walkie-talkies), and also give the opportunity to speak in one of the connected channels + it was desirable to display activity in the channel. Under the cut is a story about how we made this service in a few hours.

Scheme of work


It is always useful to draw a diagram before starting work. As a result of this operation, we got something like this:

The logic is as follows:

1. The SDK user makes a call, the script ( WTGatekeeper ) forwards the call to the conference
2. Such a conference is created for each user and is required in order to connect the incoming sound from all channels to which the user subscribes and forward the outgoing sound to the selected channel
3. The local conference processes the signal events join_channel, leave_channel, choose_channel, and also sends events channel_activity, channel_connected, channel_disconnected (see the WTUserConf script ) to the user
4. Conference channels (see the WTChannelConf script ) just connect everything in Calls from local conferences

In total, one conference is created per user and per channel.

Client functionality includes:

  • channel list with corresponding controls
  • the ability to subscribe to the incoming sound from the channel
  • button for selecting the channel where we will talk
  • push-to-talk button that activates sending outgoing sound to the selected channel

To speed up the process, we created a demo application using the Web SDK and ReactJS. The result is an interface:

To implement the visualization of voice activity in the connected channel, we used the built-in VAD platform. For each call, you can hang up the handler of this event and broadcast information about activity to the client:

call.addEventListener(CallEvents.MicStatusChange, handleChannelAudio);
call.handleMicStatus(true);
function handleChannelAudio(e) {
	// Send info about channel audio
	user_call.sendMessage(JSON.stringify({
		event: "channel_activity",
		name: e.call.number().replace("channel_", ""),
		active: e.active 
	}));
}

The channel activity was visualized as follows:


Despite the fact that everything looks simple, the VoxImplant backend performs many tasks to ensure the operation of the service. It was nice that we managed to set it all up quickly enough without dancing with a tambourine.

Look at the result


You can independently test the resulting service and chat in one of several available channels at this link . Use Chrome / Firefox / another WebRTC-enabled browser.

Also popular now: