After a lot of back and forth with this code, there are a lot of things to troubleshoot to make sure it's playing:
- Audio Media Playback security issue from Google (since I am using a Chrome-based browser): Autoplay policies.
- Multiple WebViews: Ensure your WebView is instance-based.
- Token Usage: Make sure the token is one-time use only. Don’t reuse the same token, or you might have audio issues.
- Device Permissions: Even if you are setting them correctly in .NET MAUI, ensure you have some fail-safe code.
- Reset Variables: Make sure you reset variables after every call or failed call.
- Unmute by Default: Ensure both users are unmuted by default.
- Subscribe to the Other User Correctly.
- Don’t Manually Subscribe to Audio: ACS SDK handles this well by itself; meddling with it can cause issues.
FIXES (for each one of the above):
1. Introduce user gesture buttons. Since you are starting and accepting a call, each user should have the corresponding buttons to ensure a user gesture has been given, avoiding autoplay policy issues.
Example:
```javascript
startCallButton.addEventListener('click', async () => {
// Enter code here, such as initiating a call
call = callAgent.startCall([targetUser], callOptions);
});
```
Or for acceptCallButton:
```javascript
acceptCallButton.addEventListener('click', async () => {
// Unlock the audio context
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const source = audioContext.createBufferSource();
source.buffer = audioContext.createBuffer(1, 1, 22050);
source.connect(audioContext.destination);
source.start(0);
if (audioContext.state === 'suspended') {
await audioContext.resume();
}
console.log('Audio context unlocked.');
} catch (e) {
console.error('Error unlocking audio context:', e);
}
// Proceed to accept the call
await acceptCall();
notifyMAUICallAccepted();
acceptCallButton.style.display = 'none'; // Hide button after accepting
});
```
2. Single Instance WebView.
To manage multiple WebView instances:
```csharp
if (Instance != null) {
Console.WriteLine("Attempted to create a second instance of CallPage.");
return; // Optionally handle as needed
}
Instance = this;
```
Or, if navigating back to the main page:
```csharp
public async void NavigateToMainPage() {
await MainThread.InvokeOnMainThreadAsync(async () => {
Application.Current.MainPage = new NavigationPage(new LoginPage());
});
}
```
3. Token Disposal
Ensure the token is used once by disposing of the CallAgent before reinitializing:
```javascript
if (callAgent) {
await callAgent.dispose();
console.log('Existing CallAgent disposed.');
}
```
4. Device Permissions in .NET MAUI
For iOS:
```csharp
if (CallWebView.Handler != null) {
var iosWebView = (WKWebView)((IWebViewHandler)CallWebView.Handler).PlatformView;
iosWebView.UIDelegate = new CustomWKUIDelegate();
iosWebView.Configuration.AllowsInlineMediaPlayback = true;
iosWebView.Configuration.MediaTypesRequiringUserActionForPlayback = WKAudiovisualMediaTypes.None;
}
```
For Android:
```csharp
if (CallWebView.Handler != null) {
var androidWebView = (Android.Webkit.WebView)((IWebViewHandler)CallWebView.Handler).PlatformView;
androidWebView.Settings.JavaScriptEnabled = true;
androidWebView.Settings.MediaPlaybackRequiresUserGesture = false;
androidWebView.Settings.DomStorageEnabled = true;
androidWebView.Settings.DatabaseEnabled = true;
}
```
5. Variable Resetting.
Create a function to reset all call-related variables after each call.
6. Unmute by Default
Ensure users are unmuted when initiating a call:
```javascript
const callOptions = {
audioOptions: { muted: false },
};
call = callAgent.startCall([targetUser], callOptions);
if (call.isMuted) {
await call.unmute();
console.log('Call unmuted after accept.');
}
```
7. Subscribe to Remote Participant
Subscribe to remote participants and handle their video streams:
```javascript
function subscribeToRemoteParticipant(remoteParticipant) {
console.log(`Remote participant added: ${remoteParticipant.identifier.id}`);
remoteParticipant.on('isMutedChanged', () => {
console.log(`Remote participant mute state changed: ${remoteParticipant.isMuted}`);
});
remoteParticipant.videoStreams.forEach(remoteVideoStream => {
subscribeToRemoteVideoStream(remoteVideoStream);
});
remoteParticipant.on('stateChanged', () => {
console.log(`Remote participant state changed to: ${remoteParticipant.state}`);
});
}
```
Hopefully, this helps! Thank you for your time.
