We work on Angular Ionic + C#, we write a common API for a computer and a mobile phone. We wrote a video chat on microsod SignalR, which works perfectly peer to peer, connecting countless parallel one-on-one calls. the question is that when we transferred to a mobile phone, if I call someone from a computer, that person sees me on the phone. and I no longer see this person who is calling me from the phone. What could be the problem?we have already thought about building for android and manifests, but this is questionable.
test-video.component.ts
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { ChatMessage, PeerData, SignalInfo, UserInfo } from '../interfaces/signalrModels';
import { RtcService } from '../services/rtc.service';
import { SignalrVideoService } from '../services/signalr-video.service';
@Component({
selector: 'app-test-video',
templateUrl: './test-video.component.html',
styleUrls: ['./test-video.component.scss']
})
export class TestVideoComponent implements OnInit, OnDestroy {
@ViewChild('videoPlayer') videoPlayer!: ElementRef;
@ViewChild('myVideoPlayer') myVideoPlayer!: ElementRef;
public subscriptions = new Subscription();
private stream: any;
public currentUser: string = '';
public dataString: any;
public userVideo: string = '';
public messages: Array<ChatMessage> = [];
public mediaError = (): void => { console.error(`Can't get user media`); };
public myVideo: string = '';
errorsignalData: any = 'sdfsf';
onStreamData: any = 'sdfsf';
onSignalToSend: any = 'sdfsf';
onSignalToSendId: any = 'sdfsf';
constructor(private rtcService: RtcService, private signalR: SignalrVideoService) { }
ngOnInit() {
this.getMyVideo();
this.messages = new Array();
this.subscriptions.add(this.signalR.newPeer$.subscribe((user: UserInfo) => {
this.rtcService.newUser(user);
this.signalR.sayHello(this.currentUser, user.connectionId);
}));
this.subscriptions.add(this.signalR.helloAnswer$.subscribe((user: UserInfo) => {
this.rtcService.newUser(user);
}));
this.subscriptions.add(this.signalR.disconnectedPeer$.subscribe((user: UserInfo) => {
this.rtcService.disconnectedUser(user);
}));
this.subscriptions.add(this.signalR.signal$.subscribe((signalData: SignalInfo) => {
console.log('signalData');
console.log(signalData);
this.errorsignalData = signalData;
this.rtcService.signalPeer(signalData.user, signalData.signal, this.stream);
}));
this.subscriptions.add(this.rtcService.onSignalToSend$.subscribe((data: PeerData) => {
console.log('rtcService.onSignalToSend$');
console.log(data.data, '/ + /', data.id);
this.onSignalToSend = data.data;
this.onSignalToSendId = data.id;
this.signalR.sendSignalToUser(data.data, data.id);
}));
this.subscriptions.add(this.rtcService.onData$.subscribe((data: PeerData) => {
this.messages = [...this.messages, { own: false, message: data.data }];
console.log(`Data from user ${data.id}: ${data.data}`);
}));
this.subscriptions.add(this.rtcService.onStream$.subscribe((data: PeerData) => {
console.log('rtcService.onStream$');
console.log(data);
this.onStreamData = data;
this.userVideo = data.id;
this.videoPlayer.nativeElement.srcObject = data.data;
this.videoPlayer.nativeElement.load();
this.videoPlayer.nativeElement.play();
}));
}
public async getMyVideo() {
try {
const curStream = await navigator.mediaDevices.getUserMedia({ video: true });
this.myVideo = '3423423423esdfdsfdsf';
this.myVideoPlayer.nativeElement.srcObject = curStream;
this.myVideoPlayer.nativeElement.load();
this.myVideoPlayer.nativeElement.play();
} catch (error) {
console.error(`Can't join room, error ${error}`);
}
}
public onUserSelected(userInfo: UserInfo) {
console.log(userInfo)
const peer = this.rtcService.createPeer(this.stream, userInfo.connectionId, true);
this.rtcService.currentPeer = peer;
}
public async saveUsername(): Promise<void> {
try {
await this.signalR.startConnection(this.currentUser);
this.stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
} catch (error) {
console.error(`Can't join room, error ${error}`);
}
}
public sendMessage() {
this.rtcService.sendMessage(this.dataString);
this.messages = [...this.messages, { own: true, message: this.dataString }];
this.dataString = null;
}
ngOnDestroy() {
this.subscriptions.unsubscribe();
}
}
signalr-video.service.ts
import { Injectable } from '@angular/core';
import * as signalR from "@microsoft/signalr";
import { Subject } from 'rxjs';
import { SignalInfo, UserInfo } from '../interfaces/signalrModels';
import { environment } from '@app/environments/environment';
@Injectable({
providedIn: 'root'
})
export class SignalrVideoService {
private hubConnection!: signalR.HubConnection;
private newPeer = new Subject<UserInfo>();
public newPeer$ = this.newPeer.asObservable();
private helloAnswer = new Subject<UserInfo>();
public helloAnswer$ = this.helloAnswer.asObservable();
private disconnectedPeer = new Subject<UserInfo>();
public disconnectedPeer$ = this.disconnectedPeer.asObservable();
private signal = new Subject<SignalInfo>();
public signal$ = this.signal.asObservable();
constructor() { }
public async startConnection(currentUser: string): Promise<void> {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl(environment.hubVideoUrl)
.build();
await this.hubConnection.start();
console.log('Connection started');
this.hubConnection.on('NewUserArrived', (data) => {
this.newPeer.next(JSON.parse(data));
});
this.hubConnection.on('UserSaidHello', (data) => {
this.helloAnswer.next(JSON.parse(data));
});
this.hubConnection.on('UserDisconnect', (data) => {
this.disconnectedPeer.next(JSON.parse(data));
});
this.hubConnection.on('SendSignal', (user, signal) => {
this.signal.next({ user, signal });
});
this.hubConnection.invoke('NewUser', currentUser);
}
public sendSignalToUser(signal: string, user: string) {
this.hubConnection.invoke('SendSignal', signal, user);
}
public sayHello(userName: string, user: string): void {
this.hubConnection.invoke('HelloUser', userName, user);
}
}
We tried to change AndroidManifest.xml, but still the mobile application does not send any data, the browser does not see the broadcast, but the broadcast takes place in the application