Quickblox webrtc video calling with angular 9 not working in iPhone 11

Question

This is the simple code

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CONFIG } from 'src/app/config';
// import { ConsoleReporter } from 'jasmine';
declare var QB: any;
@Component({
  selector: 'app-video-chat',
  templateUrl: './video-chat.component.html',
  styleUrls: ['./video-chat.component.css']
})
export class VideoChatComponent implements OnInit {


  userId: any;
  calleeId: any;
  CREDENTIALS = {
    appId: xxxx,
    authKey: 'xxxxxx',
    authSecret: 'xxxxxxx'
  };
  public currentSession: any = undefined;
  public calling: boolean = false;

  constructor(public activatRoute: ActivatedRoute) {
    this.calleeId = this.activatRoute.snapshot.paramMap.get('calleeId');
    this.userId = this.activatRoute.snapshot.paramMap.get('userId');
    QB.init(CONFIG.CREDENTIALS.appId, CONFIG.CREDENTIALS.authKey, CONFIG.CREDENTIALS.authSecret, CONFIG.APICONFIG);
  }

  ngOnInit(): void {
    this.connect();

    console.log(QB);
  }


  connect() {
    QB.chat.connect({ userId: this.userId, password: "quickblox" }, (err, roster) => {
      if (err) {
        console.log(err);
      } else {
        console.log("connected", roster);
        this.registerListner();
      }
    });
  }

  createNewSession() {
    var calleesIds = [this.calleeId]; // User's ids vendor5
    var sessionType = QB.webrtc.CallType.VIDEO; // AUDIO is also possible
    var callerID = this.userId; // Your user ID (optional, will be defined from chat connection)
    var additionalOptions = { "bandwith": "" }; // The video bandwith (number, optional, 0 = unlimited)

    this.currentSession = QB.webrtc.createNewSession(calleesIds, sessionType, callerID, additionalOptions);

    if (this.createNewSession !== undefined) {
      console.log('session created', this.createNewSession);
      this.getMediaParams();
    }
  }


  getMediaParams() {

    var mediaParams = {
      audio: true,
      video: true,
      options: {
        muted: true,
        mirror: true
      },
      elemId: 'localVideo'
    };

    this.currentSession.getUserMedia(mediaParams, (err, stream) => {
      if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
        this.currentSession.stop({});
        console.log("err in get media", err);
      } else {
        console.log(stream);
        console.log("media strem", stream)
        // this.currentSession.attachMediaStream("localVideo", stream)
        var extension = {};
        this.currentSession.call(extension, function (error) {

        });
      }
    });
  }

  startCall() {
    this.createNewSession();

  }
  stopCall() {
    this.currentSession.stop({});
  }

  registerListner() {
    QB.webrtc.onCallListener = (session, extension) => {
      this.currentSession = session;
      if (session.initiatorID != this.userId) {
        console.log(this.userId, session.initiatorID)


        if (this.currentSession.state !== QB.webrtc.SessionConnectionState.CLOSED) {

          this.calling = true;

        }
      }
    }

    QB.webrtc.onAcceptCallListener = (session, userId, extension) => {
      this.currentSession.update({ 'filter': "accepted" });
    };

    QB.webrtc.onRemoteStreamListener = (session, userID, remoteStream) => {
      // attach the remote stream to DOM element
      this.currentSession.peerConnections[userID].stream = remoteStream;
      console.log("remotStream", remoteStream);
      console.log("remotStream", this.userId);
      this.currentSession.attachMediaStream('remote_video_' + this.userId, remoteStream);

    };


    QB.webrtc.onSessionCloseListener = (session) => {
      this.currentSession.detachMediaStream('remote_video_' + this.userId);
      this.currentSession.detachMediaStream('localVideo');
      this.calling = false;

    };

    QB.webrtc.onUpdateCallListener = function (session, userId, extension) {

    };
  }


  public acceptCall() {

    console.log('acceptsession', this.currentSession);
    var mediaParams = {
      audio: true,
      video: true,
      options: {
        muted: true,
        mirror: true
      },
      elemId: 'localVideo'
    };

    this.currentSession.getUserMedia(mediaParams, (err, stream) => {
      if (err || !stream.getAudioTracks().length || !stream.getVideoTracks().length) {
        this.currentSession.stop({});
        console.log("err in get media", err);
      } else {
        console.log(stream);
        console.log("media strem", stream)
        // this.currentSession.attachMediaStream("localVideo", stream)
        var extension = {};
        this.currentSession.accept({});
        this.calling = false;
      }
    });
  }
}

and this is html

<div class="qb-video">
    <video #remoteVideo width="200px"  id="remote_video_{{userId}}" class="qb-video_source" autoplay playsinline></video>
</div>

<div class="qb-video">
    <video width="200px" id="localVideo" class="qb-video_source" autoplay playsinline></video>
</div>
<button class="btn" (click)="startCall()">Start Call</button>
<button class="btn" (click)="stopCall()">Stop</button>
<button [hidden]="!calling" (click)="acceptCall()"> accept</button>
<div>{{videoChatStatusDesc}}</div>

This is my simple code its working in all device accept iPhone 11, when same code do in pure javascript/jquery its working fine in all devices but the problem in angular, when call from iphone to other devices then its working but when call to other device to iphone then not works.