apiCC.myWebRTC_Adapter.getUserMedia is not a function' apiRTC audio call working on browser but not on android with angular ionic capacitor

Question

I'm using "@angular/core": "~12.1.1", "@ionic/angular": "^6.1.4", and "@apirtc/apirtc": "^4.7.2".

I'm implementing an audio call following apiRTC doc and I'm getting this error when I publish the stream on android :

apiCC.myWebRTC_Adapter.getUserMedia is not a function

I've all the necessary permissions in my AndroidManifest.xml :

<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

And I'm correctly requesting them in my component:

private checkPermissions(): void {
    if (!this.platform.is('cordova')) {
      return;
    }
    this.androidPerms.checkPermission(this.androidPerms.PERMISSION.MODIFY_AUDIO_SETTINGS).then(
      result => console.log('Has permission?', result.hasPermission),
      err => this.androidPerms.requestPermission(this.androidPerms.PERMISSION.MODIFY_AUDIO_SETTINGS)
    );
    this.androidPerms.checkPermission(this.androidPerms.PERMISSION.RECORD_AUDIO).then(
      result => console.log('Has permission?', result.hasPermission),
      err => this.androidPerms.requestPermission(this.androidPerms.PERMISSION.RECORD_AUDIO)
    );

    this.androidPerms.requestPermissions([
      this.androidPerms.PERMISSION.MODIFY_AUDIO_SETTINGS,
      this.androidPerms.PERMISSION.RECORD_AUDIO,
    ]);
  }

The method called in my component to join a conversation is this one:

@ViewChild('localAudio') audioRef: ElementRef;
@Input() convId: string;

public call(): void {
    this.streamSub = this.callService.getSession().pipe(
        concatMap(session => this.callService.startConv(session, this.convId)),
        tap(stream => stream.attachToElement(this.audioRef.nativeElement))
    ).subscribe();
}

My CallService :

  public userAgent: UserAgent;
  public conversation: Conversation;
  public localStream: Stream;
  public session: Session;
  public allJoined = false;

  public getSession(): Observable<Session> {
    if (this.session) {
      return of(this.session);
    }

    this.userAgent = new UserAgent({
      uri: `apiKey:${environment.apiRTCKey}`
    });

    return from(this.userAgent.register())
      .pipe(
        tap(s => this.session = s)
      );
  }

  public startConv(session: Session, conversationId: string): Observable<Stream> {
    this.allJoined = false;
    this.conversation = session.getConversation(conversationId);
    this.conversation.on('streamListChanged', (streamInfo: any) => {
      if (streamInfo.listEventType === 'added') {
        this.allJoined = true;
        if (streamInfo.isRemote === true) {
          this.conversation.subscribeToMedia(streamInfo.streamId)
            .then((stream: Stream) => {
            }).catch((err) => {
            });
        }
      }
    });
    this.conversation.on('streamRemoved', (stream: any) => {
    });

    return from(this.userAgent.createStream({
      constraints: {
        audio: true,
        video: false
      },
      audioInputId: true,
      videoInputId: false
    }))
      .pipe(
        concatMap(stream => {
          this.localStream = stream;

          return from(this.conversation.join());
        }),
        concatMap(_ => from(this.conversation.publish(this.localStream)))
      );
  }

This is working on web browser but not on android.

What is the problem ?

Answer 1

In https://github.com/ApiRTC/ApiRTC-angular-ionic-tutorial it is mentioned to use @ionic-native/android-permissions and PERMISSION.CAMERA. Have you tried using theses ?