Ionic Angular - cannot signal after peer is destroyed

33 Views Asked by At

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

0

There are 0 best solutions below