Device names are not consistent on different project environments

[canperk]

• Package Name: @azure/communication-calling
• Package Version: 1.0.0
• Operating system: Windows 10
• nodejs
  • 14.15.3
• browser
  • Edge/91.0.864.48**:
• typescript
  • 4.1.3

Describe the bug
Following code is returning microphones with the names, ids, etc... However when I try sample code on here my microphone name lists as "Microphone Array (Realtek (R) Audio)" but when I use same code on another project (Vue JS App) it lists as "Microphone" which is type property of returning object

To Reproduce
Steps to reproduce the behavior:

1. Set Up

> npm init @vitejs/app projectname --template vue-ts
> cd projectname
> npm i
> npm i @azure/[email protected]
> npm run dev

2. Code in main.ts

import { createApp } from "vue";
import {  CallClient } from "@azure/communication-calling";

createApp(App).mount("#app"); 

let callClient = new CallClient();
let deviceManager = await callClient.getDeviceManager();
let microphoneList = await deviceManager.getMicrophones();

console.log(microphoneList);

3. Download source which is defined above from github and compare devices

Expected behavior
Same device names on all environments and projects

[sharifrahaman]

Please ask for device permission before accessing the microphones. You have already granted the access for Sample app that's why the device list is showing as expected. Example-

let callClient = new CallClient();
let deviceManager = await callClient.getDeviceManager();

// Microphones already having access
let microphoneList = await deviceManager.getMicrophones();
console.log('Current Microphone List: ', microphoneList);

// Ask for Device permission
let deviceAccess = await deviceManager.askDevicePermission({audio: true, video: true});
if(deviceAccess.audio) {
    console.log('Microphone access granted.');
} else {
    console.log('Microphone access denied.');
}

// Updated Devices
deviceManager.on('audioDevicesUpdated', async e => {
    console.log(`EVENT, audioDevicesUpdated, added=${JSON.stringify(e.added)}, removed=${JSON.stringify(e.removed)}`);
    microphoneList = await deviceManager.getMicrophones();
    console.log('Updated Microphone List: ', microphoneList);
});`

[ghost]

Hi, we're sending this friendly reminder because we haven't heard back from you in a while. We need more information about this issue to help address it. Please be sure to give us your input within the next 7 days. If we don't hear back from you within 14 days of this comment the issue will be automatically closed. Thank you!

[canperk]

Hi, device permission are already set in my browser. I will use the same code as you shared and let you know

[akania]

Closing since we didn't hear back, @canperk please reopen if you have further questions