QuickBlox webrt c видеозвонок с angular 9 не работает в iPhone 11 - PullRequest
1 голос
/ 30 апреля 2020

Это простой код

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;
      }
    });
  }
}

, а это 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>

Это мой простой код, который работает на всех устройствах, принимает iPhone 11, когда одинаково код делает в чистом javascript / jquery его нормально работает на всех устройствах, но проблема в angular, когда вызов с iphone на другие устройства, то его работает, но когда вызов на другое устройство на iphone тогда не работает.

...