Dialpad is launching by default for cross framework support

[deshneni-akhil]

Describe the bug; what happened?

I am using js bundle to integrate ACS calling functionality into my application, however despite setting the following flag disableAutoShowDtmfDialer to true I am still seeing the dtmf dailer button upon the call start.

I see that the issue has been fixed for React https://github.com/Azure/communication-ui-library/issues/4563 I am using the following code to configure the flag for dtmf dailer button.

const callAdapter = await outboundCallComposite.loadCallComposite(
                {
                    userId: userId,  // The user's ID
                    token: token,  // The user's token
                    displayName: displayName,  // The user's display name
                    targetCallees: [  // The target callee's details
                        {
                            teamsAppId: teamsAppId,  // The Teams App ID of the callee
                            cloud: "public",  // The cloud type
                        },
                    ],
                    audioOptions: {
                        muted: false, // Set to false to start the microphone unmuted
                    },
                },
                document.getElementById(containerId), // The container for the call composite
                {
                    formFactor: isMobileDevice ? "mobile" : "desktop", // Set the form factor based on isMobileDevice
                    /* disableSurvey: true, // Disable the survey*/
                    callControls: {
                        screenShareButton: {
                            disabled: UseAuthenticationAndAuthorization // Enable/disable the screen share button
                        }
                    },
                    disableAutoShowDtmfDailer: {
                        disabled: false // Enable/disable the DTMF dialer
                    }
                }
            );

In what environment did you see the issue?

Installed the latest call composite bundle

• OS & Device: Windows 11
• Browser: Microsoft Edge, Google Chrome

TechStack: I am building web application using C# and JS.

Am I following the right approach to disable the dtmf dailer button here, I have tried several ways and unable to figure out any insights to fix this issue is appreciated.

[dmceachernmsft]

Hi @deshneni-akhil! Thanks for filing the issue! this should be working I will do some looking here, something might be missing from our side. will update when I have an answer here!

[dmceachernmsft]

Hi @deshneni-akhil, To clarify your issue are you trying to hide the control to autoshow the dialer over the video gallery? or remove the button from the control bar? To do both you need to do the following to your code:

const callAdapter = await outboundCallComposite.loadCallComposite(
                {
                    userId: userId,  // The user's ID
                    token: token,  // The user's token
                    displayName: displayName,  // The user's display name
                    targetCallees: [  // The target callee's details
                        {
                            teamsAppId: teamsAppId,  // The Teams App ID of the callee
                            cloud: "public",  // The cloud type
                        },
                    ],
                },
                document.getElementById(containerId), // The container for the call composite
                {
                    formFactor: isMobileDevice ? "mobile" : "desktop", // Set the form factor based on isMobileDevice
                    /* disableSurvey: true, // Disable the survey*/
                    callControls: {
                        screenShareButton: {
                            disabled: UseAuthenticationAndAuthorization // Enable/disable the screen share button
                        },
                        dtmfDialerButton: false // <- this will remove the button from the control bar
                    },
                    disableAutoShowDtmfDailer: true // <- this will stop the dialpad from showing over the gallery when the call connects
                }
            );

As an aside as well there is no AudioOptions param on the function. when using the target participant API to initiate a call to another user or bot the microphone will always be live.

[deshneni-akhil]

Hello @dmceachernmsft thanks for suggesting on disabling the dtmfdailer button upon call start. I have added the above code snippet and have re-run my project still the application shows dtmf dailer button upon call being started.

For your look at below screenshots thank you.

[dmceachernmsft]

Hi @deshneni-akhil, Thanks for the images! Can you please share the following with me:

• whether you are calling a CallQueue or a AutoAttendant?
• How old your bundle you are working with is? if you try the bundle from the public preview 1.18.0-beta.1 found in releases these API's should be working

[deshneni-akhil]

@dmceachernmsft thanks for the release link I am using the outbound file using the following link over ACS https://github.com/Azure/communication-ui-library/releases/latest/download/callComposite.js

After using the above link, the Dialpad has been disabled thanks for the latest release link.

You can close this ticket have a great day

[dmceachernmsft]

Excellent glad to hear we could help! please reopen the issue if you have more problems in this area, otherwise feel free to open a new ticket!