Azure communication service Web Calling Issue

Question

Azure communication service Web Calling Issue

Adithya Udupa 6

Hi, I'm able to successfully deploy a standalone react app & run the following sample application and make a web call . https://github.com/Azure-Samples/communication-services-web-calling-tutorial

But, when i integrate this into my existing React App, i start getting issues in creating a CallAgent after creating a CallClient with error as follows.
'azure:ACS:error 27/10/2021, 18:13:48:96 CallClient1:CallAgent1 op:Initialize failed, message=No CommunicationTokenCredential provided,'

I am passing the CommunicationTokenCredentials while calling the createCallAgent(token) (verified by printing the token as well).
But still i get this error. Can you please tell me what might be wrong here ?

MakeCall.js:188 communicationUserId:[object Object]
MakeCall.js:190 userDetailsResponse:[object Object]
log.browser.js:12 azure:ACS:info 27/10/2021, 18:13:48:85 CallClient1 created
MakeCall.js:70 td {sendTelemetry: ƒ, handleVisibilityChange: ƒ, handleOrientationChange: ƒ, getOrientationBasedOnWindowSize: ƒ, handleResize: ƒ, …}
log.browser.js:12 azure:ACS:info 27/10/2021, 18:13:48:93 CallClient1 op:CreateCallAgent, started
log.browser.js:12 azure:ACS:info 27/10/2021, 18:13:48:93 CallClient1:CallAgent1 op:Initialize, started
index.js:1375 azure:ACS:error 27/10/2021, 18:13:48:96 CallClient1:CallAgent1 op:Initialize failed, message=No CommunicationTokenCredential provided, code=400 in 0.003s
console.<computed> @ index.js:1375
log @ log.browser.js:8
push../node_modules/@azure/logger/dist-esm/src/index.js.AzureLogger.log @ index.js:16
child.log @ index.js:108
child.log @ index.js:108

Adithya Udupa 6 Reputation points

2021-10-28T05:24:13.097+00:00

To simplify the issue further, when i use the CallClient of @azure/communication-calling SDK to create a CallAgent, i'm getting 'No CommunicationTokenCredential provided' error even though i'm passing a valid CommunicationTokenCredential
Ex: this.callAgent = await this.callClient.createCallAgent(tokenCredential);
Grmacjon-MSFT 19,301 Reputation points Moderator

2021-10-28T08:33:39.493+00:00

Thanks for brining this issue to our attention @Adithya Udupa . We are checking internally with the engineering to see what may be causing this problem. We will update this thread once we hear back from them.

Best,
Grace
Adithya Udupa 6 Reputation points

2021-10-28T08:53:58.627+00:00

Thanks. Let me know if your engineering team needs any additional details from my end
Adithya Udupa 6 Reputation points

2021-10-29T09:52:24.68+00:00

Do you have any update on this please?
fizampou 1 Reputation point Microsoft Employee

2021-11-02T23:07:10.913+00:00

Can you please post a more complete sample on how you create the tokenCredential object what are you passing exactly, what are the imports. The error indicates that your object is not there.

Adithya Udupa 6

import { CallClient, LocalVideoStream, Features } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';
const communicationIdentityClient = new CommunicationIdentityClient("endpoint=https://azure-communication-service1.communication.azure.com/;accesskey=<AccessKey>;");

 handleLogIn = async () => {
try {
     let communicationUserId = await communicationIdentityClient.createUser();
     const userDetailsResponse = await communicationIdentityClient.issueToken(communicationUserId, ["voip"]);

     console.info('userDetailsResponse:'+JSON.stringify(userDetailsResponse));
     this.callClient = new CallClient();
     var tokenCredential = new AzureCommunicationTokenCredential(userDetailsResponse.token);
     console.info('Stringify val='+JSON.stringify(tokenCredential));
     setLogLevel('verbose');
     this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'ABCD' });

...........

I could also print and see that the tokenCredential is not empty when i pass it to createCallAgent().

2 answers

Your answer

Adithya Udupa 6 Reputation points

2021-10-28T05:24:13.097+00:00

To simplify the issue further, when i use the CallClient of @azure/communication-calling SDK to create a CallAgent, i'm getting 'No CommunicationTokenCredential provided' error even though i'm passing a valid CommunicationTokenCredential
Ex: this.callAgent = await this.callClient.createCallAgent(tokenCredential);
Grmacjon-MSFT 19,301 Reputation points Moderator

2021-10-28T08:33:39.493+00:00

Thanks for brining this issue to our attention @Adithya Udupa . We are checking internally with the engineering to see what may be causing this problem. We will update this thread once we hear back from them.

Best,
Grace
Adithya Udupa 6 Reputation points

2021-10-28T08:53:58.627+00:00

Thanks. Let me know if your engineering team needs any additional details from my end
Adithya Udupa 6 Reputation points

2021-10-29T09:52:24.68+00:00

Do you have any update on this please?
fizampou 1 Reputation point Microsoft Employee

2021-11-02T23:07:10.913+00:00

Can you please post a more complete sample on how you create the tokenCredential object what are you passing exactly, what are the imports. The error indicates that your object is not there.
Adithya Udupa 6 Reputation points

2021-11-03T04:11:27.56+00:00

import { CallClient, LocalVideoStream, Features } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';
const communicationIdentityClient = new CommunicationIdentityClient("endpoint=https://azure-communication-service1.communication.azure.com/;accesskey=<AccessKey>;");

handleLogIn = async () => { try { let communicationUserId = await communicationIdentityClient.createUser(); const userDetailsResponse = await communicationIdentityClient.issueToken(communicationUserId, ["voip"]); console.info('userDetailsResponse:'+JSON.stringify(userDetailsResponse)); this.callClient = new CallClient(); var tokenCredential = new AzureCommunicationTokenCredential(userDetailsResponse.token); console.info('Stringify val='+JSON.stringify(tokenCredential)); setLogLevel('verbose'); this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'ABCD' });

...........

I could also print and see that the tokenCredential is not empty when i pass it to createCallAgent().

Answer 1

Adithya Udupa 6

I was able to isolate the issue to the webpack, webpack-cli plugin my project was using which was an older version. Once i upgraded it to newer version the issue got resolved even though i don't know how ACS web call is related to the webpack version. Anyways, thanks for your help so far

Chris Whilar 1 Reputation point

2021-11-15T22:31:34.517+00:00

I see, okay sounds thank you for letting us know. Im glad the issue got resolved!

Answer 2

Artur Kania 1 Microsoft Employee

Hi

Can you share the code that you're using to create token credential please?
You can also refer to our sample code here https://github.com/Azure-Samples/communication-services-web-calling-tutorial/blob/803699180e306a0de5fadec9f3ebf3ec761d2316/Project/src/MakeCall/Login.js

const tokenCredential = new AzureCommunicationTokenCredential(token); ... this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'Optional ACS user name'});

Adithya Udupa 6 Reputation points

2021-11-03T04:09:27.727+00:00
import { CallClient, LocalVideoStream, Features } from '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from '@azure/communication-common';
const communicationIdentityClient = new CommunicationIdentityClient("endpoint=https://azure-communication-service1.communication.azure.com/;accesskey=<AccessKey>");

handleLogIn = async () => {
try {
let communicationUserId = await communicationIdentityClient.createUser();
const userDetailsResponse = await communicationIdentityClient.issueToken(communicationUserId, ["voip"]);

console.info('userDetailsResponse:'+JSON.stringify(userDetailsResponse)); this.callClient = new CallClient(); var tokenCredential = new AzureCommunicationTokenCredential(userDetailsResponse.token); console.info('Stringify val='+JSON.stringify(tokenCredential)); setLogLevel('verbose'); this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'ABCD' });

...........

I could also print and see that the tokenCredential is not empty when i pass it to createCallAgent().
kaniartur 76 Reputation points

2021-11-03T05:47:36.38+00:00

which version of ACS calling , common and identity libraries are you using?
Adithya Udupa 6 Reputation points

2021-11-03T05:53:44.73+00:00

Same as https://github.com/Azure-Samples/communication-services-web-calling-tutorial/blob/main/Project/package.json

"@azure/communication-administration": "1.0.0-beta.4",
"@azure/communication-calling": "1.2.3-beta.1"
Chris Whilar 1 Reputation point Microsoft Employee

2021-11-03T18:12:00.74+00:00

Can you plase put a break point on the browser debugger on this line:
this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'ABCD' });
And when you hit this line, hover over tokenCredential? do you see a value for it or does it say undefined? Do not share the value of that with anyone though.

The error you are getting means that tokenCredential is undefined.

Calling web sdk checks to see if the tokenCredential object is undefined, and if its undefined it throws error No CommunicationTokenCredential provided, code=400
Adithya Udupa 6 Reputation points

2021-11-04T14:59:55.12+00:00

Do you have any other way of making this work? Maybe a newer version of libraries with different functions? Maybe if you have some more samples/examples for web calling?
Adithya Udupa 6 Reputation points

2021-11-04T16:21:08.263+00:00

Not sure how the previous comments got deleted. But following are the details as requested
OS - macOS Catalina - Version 10.15.7
Browser - Chrome Version 94.0.4606.81 (Official Build) (x86_64)

Also, as mentioned in the initial description, the sample provided under https://github.com/Azure-Samples/communication-services-web-calling-tutorial works as expected when i download the repo & do a 'npm start' . But ,when i copy the same steps and integrate into my own repo, i start getting the 'No CommunicationTokenCredential provided' error even though the token is present when i debug this line:
this.callAgent = await this.callClient.createCallAgent(tokenCredential, { displayName: 'ABCD' });
Chris Whilar 1 Reputation point Microsoft Employee

2021-11-04T16:50:55.093+00:00
Hi yes i see the previous comments got somehow deleted, weird.

Okay i see you did mention that the app did work successfully when you cloned it and built and ran it on main branch without changing any code. Thats good.

Now for your own app, can you please do a full fresh npm install?

Delete your node_modules folder

run "npm cache clean --force"

Make sure your app's package json has the exact same versions as the package json in https://github.com/Azure-Samples/communication-services-web-calling-tutorial/blob/main/Project/package.json

npm install, build your app, etc...

Please also try to build and run your app on a windows machine.
If issue persists, can you please upload your app to a github repo so that we can try out your app ourselves? Provide a readme with info on how to build and run your app locally

For ref here are other sample apps we have:

Plain javascript quickstart samples: https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/voice-video-calling/getting-started-with-calling?pivots=platform-web

Full sample apps: https://learn.microsoft.com/en-us/azure/communication-services/samples/overview
Adithya Udupa 6 Reputation points

2021-11-05T07:56:08.77+00:00

Tried the steps mentioned. But, got the same error again.
Since, it's a proprietary code, i won't be able to upload it to GitHub. I will try to replicate this behaviour in a simple react app and try to upload it into Github for you to analyse in a few days. Thanks

Share via

Azure communication service Web Calling Issue

2 answers

Your answer