Это простой код
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 тогда не работает.