Posted by Tom on Mar 12, 2021 in Azure Communication Services, Development

Learn Azure Communication Services Day 11 – Changing Audio & Video Devices

This blog post is part of a series called “Learn ACS“, all about Microsoft Azure Communication Services. The series covers a high-level overview of capabilities and considerations, then dives into the development detail of using ACS in your application.Â Find the rest of the posts in the series at learnACS.dev.

Today, we’re going to take the Day 8 sample (which joins an ACS client to a Teams meeting), plus the video features we added in Day 10, and add the ability to change audio and video devices. You could add these to any of the samples we’ve previously made – but the Teams meeting one means it’s easy for you to create a Teams meeting and join it using the Teams client, and then join with an ACS client and toggle the video and audio devices then see and hear the effect using the other client.

When we talk about audio and video devices, there are actually three different devices we are changing: the video feed, the microphone and the speaker. Each of these can have different values, and these values can be changed mid-call.

Audio devices in Azure Communication Services are changed by making a call to the DeviceManager, which then handles the actual switching of audio. No other change is needed. For anyone who has previously had to deal with WebRTC, you’ll recognise this is a significantly easier process.

For video devices, there is a method on theÂ LocalVideoStream object calledÂ switchSource which we can use. This has the benefit of not only changing the video feed sent to the call (if the call is connected) but also updating the local vanity feed automatically.

You can see all this happening in the code below. As before, I’ll provide all the code to get it working, and then we’ll talk through it. I’m going to assume that you have already followed all of the steps in Day 5 to get the sample code up and running. Replace the contents of index.html and client.js with these versions. Don’t forget: on Line 18, replace the placeholder text with the full URL of your Azure Function created in Day 3, including the code parameter. Also, note there are additional import statements in this code, so if you’re adding to an earlier sample, be sure to include them:

index.html

	<!DOCTYPE html>
	<html>
	<head>
	<title>Learn ASC Day 11 - Changing Devices</title>
	</head>
	<body>
	<h2>Learn ASC Day 11 - Changing Devices</h2>

	<p>Call state <span style="font-weight: bold" id="call-state">-</span></p>
	<input id="destination-user-input" type="text" placeholder="Microsoft Teams meeting join URL (https://teams.microsoft.com/l/meetup-join/....)"
	style="margin-bottom:1em; width: 600px;" />

	<div>
	<button id="connect-button" type="button" disabled="false">
	Connect with Video
	</button>
	<button id="disconnect-button" type="button" disabled="true">
	Disconnect
	</button>
	<button id="startvideo-button" type="button" disabled="true">
	Start Video
	</button>
	<button id="stopvideo-button" type="button" disabled="true">
	Stop Video
	</button>
	<select id="selectVideoDevice"></select>
	<select id="selectAudioInputDevice"></select>
	<select id="selectAudioOutputDevice"></select>
	</div>

	<div id="selfVideo"></div>


	<hr/>
	<p style="font-family: sans-serif">Hi, I'm Tom! I hope you found this code sample useful. This sample code comes from a series of blog posts about Azure Communication Services. Links for all blog posts can be found at <a href="https://learnacs.dev" target="_blank" rel="noopener">learnACS.dev</a>. I blog at <a href="https://blog.thoughtstuff.co.uk">thoughtstuff.co.uk</a>. You can also <a href="https://www.youtube.com/c/TomMorganTS?sub_confirmation=1" target="_blank" rel="noopener">subscribe to my YouTube channel</a> for videos about ACS (and much more!). </p>

	<h4>Disclaimer: This is a sample. It’s not meant for you to take and use without fully understanding what it’s doing. It’s definitely not meant for production use. You should understand the risks of hosting your own ACS instance and associated web-based entry point on the public internet before proceeding. If you end up sharing your access tokens, or there’s a bug in the code and you end up with a huge hosting bill, or find yourself unwittingly hosting other people’s rooms, you’re on your own. This sample code is provided under the <a href="https://opensource.org/licenses/MIT">MIT license</a>, which you should read in full (it’s 21 LOC).</h4>

	<script src="./bundle.js"></script>
	</body>

	</html>

view raw LearnACS-Day11.index.html hosted with ❤ by GitHub

client.js

	import { CallClient, CallAgent, DeviceManager, LocalVideoStream, Renderer } from "@azure/communication-calling";
	import { AzureCommunicationTokenCredential } from '@azure/communication-common';

	const connectButton = document.getElementById('connect-button');
	const disconnectButton = document.getElementById('disconnect-button');
	const callStateElement = document.getElementById('call-state');
	const destinationUserElement = document.getElementById('destination-user-input');
	const startVideoButton = document.getElementById('startvideo-button');
	const stopVideoButton = document.getElementById('stopvideo-button');
	const videoDeviceSelect = document.getElementById('selectVideoDevice');
	const audioInputDeviceSelect = document.getElementById('selectAudioInputDevice');
	const audioOutputDeviceSelect = document.getElementById('selectAudioOutputDevice');

	let call;
	let callAgent;
	let callClient;
	let deviceManager;
	let localVideoStream;
	let localVideoRender;
	let videoDevices;
	let audioInputDevices;
	let audioOutputDevices;
	let selectedVideoDevice;
	let selectedAudioInputDevice;
	let selectedAudioOutputDevice;

	async function init() {

	callClient = new CallClient();

	//get an access token to use
	const response = await fetch('YOUR ACS TOKEN ISSUING WEB FUNCTION URL HERE (WITH THE CODE). SEE DAY 3');
	const responseJson = await response.json();
	const token = responseJson.value.item2.token;
	const tokenCredential = new AzureCommunicationTokenCredential(token);
	callAgent = await callClient.createCallAgent(tokenCredential);
	connectButton.disabled = false;

	deviceManager = await callClient.getDeviceManager();
	//get all the cameras, then choose the first one
	videoDevices = await deviceManager.getCameras();
	selectedVideoDevice = videoDevices[0];
	localVideoStream = new LocalVideoStream(selectedVideoDevice);

	//get all the microphone/speaker devices, then choose the first one
	audioInputDevices = await deviceManager.getMicrophones();
	audioOutputDevices = await deviceManager.getSpeakers();
	deviceManager.selectMicrophone(audioInputDevices[0]);
	deviceManager.selectSpeaker(audioOutputDevices[0]);

	//populate the device choice dropdowns
	videoDevices.forEach(function(device)
	{
	var el = document.createElement("option");
	el.textContent = device.name;
	el.value = device.id;
	videoDeviceSelect.appendChild(el);
	});

	audioInputDevices.forEach(function(device)
	{
	var el = document.createElement("option");
	el.textContent = device.name;
	el.value = device.id;
	audioInputDeviceSelect.appendChild(el);

	});

	audioOutputDevices.forEach(function(device)
	{
	var el = document.createElement("option");
	el.textContent = device.name;
	el.value = device.id;
	audioOutputDeviceSelect.appendChild(el);

	});



	}
	init();

	connectButton.addEventListener("click", () => {
	const destinationToCall = { meetingLink: destinationUserElement.value};
	const callOptions = {videoOptions: {localVideoStreams:[localVideoStream]}};
	call = callAgent.join(destinationToCall, callOptions);

	call.on('stateChanged', () => {
	callStateElement.innerText = call.state;
	})

	showLocalFeed();

	// toggle button states
	disconnectButton.disabled = false;
	connectButton.disabled = true;
	startVideoButton.disabled = false;
	stopVideoButton.disabled = false;
	});

	disconnectButton.addEventListener("click", async () => {
	await call.hangUp();

	// toggle button states
	disconnectButton.disabled = true;
	connectButton.disabled = false;
	callStateElement.innerText = '-';
	});

	startVideoButton.addEventListener("click", async () => {
	await call.startVideo(localVideoStream);
	showLocalFeed();
	});

	stopVideoButton.addEventListener("click", async () => {
	await call.stopVideo(localVideoStream);
	hideLocalFeed();
	});

	videoDeviceSelect.addEventListener("change",async () => {
	selectedVideoDevice = videoDevices.find((device) => device.id === videoDeviceSelect.value);
	localVideoStream.switchSource(selectedVideoDevice);
	});

	audioInputDeviceSelect.addEventListener("change",async () => {
	let selectedAudioInputDevice = audioInputDevices.find((device) => device.id === audioInputDeviceSelect.value);
	deviceManager.selectMicrophone(selectedAudioInputDevice);
	});

	audioOutputDeviceSelect.addEventListener("change",async () => {
	let selectedAudioOutputDevice = audioOutputDevices.find((device) => device.id === audioOutputDeviceSelect.value);
	deviceManager.selectSpeaker(selectedAudioOutputDevice);
	});


	async function showLocalFeed() {
	localVideoRender = new Renderer(localVideoStream);
	const view = await localVideoRender.createView();
	document.getElementById("selfVideo").appendChild(view.target);
	}

	async function hideLocalFeed() {
	localVideoRender.dispose();
	document.getElementById("selfVideo").innerHTML = "";
	}

view raw LearnACS-Day11-client.js hosted with ❤ by GitHub

Testing it out

Make sure both index.html and client.js files are saved, then use this command-line command to build and run your application.

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

If there are any compile errors then youâll see them in the command line, otherwise, open a web browser to localhost:8080 and you should see your calling page with new dropdowns for video and audio devices, and with the “Connect with video” button enabled after a short time:

Changing the video/audio devices can be done before or during the call. TheÂ LocalVideoStream is actually updated even when you’re not on a call, it’s just that this code only shows the local feed once the call is connected. However, there’s no reason you couldn’t show it before, to allow users to see the video they will be sending once the call is connected.

The sample code joins you to a Teams meeting, and once you’ve done that then you can try changing each of the device types to see the effect. You’ll notice that (compared to some other WebRTC solutions) device changing is quick and smooth with Azure Communication Services.

What’s the code doing?

The init function (starting Line 27 of client.js) is what populates the drop-downs on the first load. It does this by using methods from DeviceManager.
Setting devices is slightly different for audio and video. For audio, the change is made directly on the DeviceManager, using the selectMicrophone and selectSpeaker methods. For video, it’s about setting up a LocalVideoStream and then changing that if the video device changes. In the init, the first device in each list is selected using both of these approaches.
Lines 52-76 populate the dropdowns with the device names and IDs from DeviceManager. There are definitely nicer ways to do this in React but I’m trying to keep the code as simplistic as possible and not introduce anything which can’t be understood by someone who isn’t familiar with React.
When the user changes a value in the drop down, for audio it’s just a case of calling those same methods again (lines 127,132). For video there is a specific method switchSource which is called on the LocalVideoStream. This means that you don’t need to stop and start the video feed in order to change devices, and the result switch is very quick and not jerky.

Today, we took our existing ACS code and added the ability for user to choose their own devices. Tomorrow we’re going to look at sharing screen content. Links for all blog posts can be found at learnACS.dev. You can also subscribe to my YouTube channel for videos about ACS (and much more!).

1 Comment

Sagar Joshi September 9, 2021

Hello Tom,

Thanks for the posting this series.

I have been trying different features of the ACS Javascript SDK. I liked the abstraction which makes common use cases simpler.

However, I’m unable to add participants to a group call in ‘listen-only’ mode. Ideally, the browser shouldn’t ask such participants for microphone permission. But I can’t prevent that from happening.

The audioOptions member of the JoinCallOptions interface only supports a ‘muted’ flag. Also, I can’t just set audioOptions to null, unlike videoOptions.

Is this not possible in ACS at all? Or is there another way that I’m missing?

Post a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Learn Azure Communication Services Day 11 – Changing Audio & Video Devices

Testing it out

What’s the code doing?

Written by Tom Morgan

Share this:

Related posts:

1 Comment

Post a Reply