LocalMediaView not working on Android

Hi there!

I could really need some help - been struggling with this for quite some time now.
So, I have a bit more complicated Angular App on one side and use it to receive calls from the sendbird Calls app.
The angular app is setup to let the user join a waiting room (do some validation checks there) and then when a call comes in switch to a video component screen to display the call. The call is stored by a service and handed over to the video component. There the video component accepts the call via calling the service’s accept method which will in turn accept the call using Sendbird Javascript SDK.

The important code is here:

setupActiveListeners(call: DirectCall) {
    call.onEnded = (call) => {
      this._callReady$.next(null); // send null, to prevent subscribers to try to accept a ended call(e.g. a missed call)
      this._callEnded$.next(true);

      if (this.mediaAccess) {
        this.mediaAccess.dispose();
      }
    }

    call.onReconnecting = (call) => {
      this.ps.showDebug('Trying to reconnect');
    };

    call.onReconnected = (call) => {
      this.ps.showDebug('Reconnected!');
    };

    call.onEstablished = (call) => {
      this.ps.showDebug('Established!');
    };

    call.onConnected = (call) => {
      this.ps.showDebug('Connected!');
    }

    call.onRemoteAudioSettingsChanged = (call) => {
      this.ps.showDebug('Remote-Audio-Settings changed');
    };

    call.onRemoteVideoSettingsChanged = (call) => {
      this.ps.showDebug('Remote-Video-Settings changed');
    };

  }    

accept(localMediaView: HTMLMediaElement, remoteMediaView: HTMLMediaElement, videoEnabled: boolean) {
    if (!this._call) return;

    this.setupActiveListeners(this._call);

    this._call.accept({
      callOption: {
        audioEnabled: true,
        localMediaView,
        remoteMediaView,
        videoEnabled
      }
    });
  }

// and my .html
...
  <div class="main-video-wrapper">
    <div class="calling">
        <video class="main-video" id="remote-video" playsinline autoplay></video>
        <div class="secondary-video-wrapper">
            <video class="secondary-video" id="local-video" playsinline muted autoplay></video>
        </div>

        <div class="button-wrapper">
            <img src="/assets/svg/end_call-icon.svg" (click)="endCall($event)" />
        </div>
    </div>
</div>

before that, in the initialization of the app, the sendbird user gets authenticated, the websocket setup and another service sets up passive handlers. When a call comes in (onRinging), it’ll set the call to be available by above service (service.call = call) and then lets the above service keep handling it.

When I use a safari/ iOS device as client, it works without issues.
When I use an android device as client, it doesn’t work. It establishes the call as expected (onEstablished thrown) and it shows the partners video and audio, however it doesn’t show/ capture the own audio/ video so the partner doesn’t see anything.

I’d really appreciate any help!

Hi @Kyrill_Langhans and welcome to the community.

Maybe you can try my sample here and compare with your implementation:

I just tested this with Android and voice/video works fine.

You should add your APP ID and USER ID here:

then ng serve or ng serve --ssl if you want https support.

1 Like