RTCMultiConnection with ionic 5 full example

Question

Everything is tried but not able to find any solution. please provide the working example with ionic 5

Answer 1

Working in Android

Create the IONIC project ionic start myApp blank

In Index.html add two scripts

<script src="https://rtcmulticonnection.herokuapp.com/dist/RTCMultiConnection.min.js"></script>
<script src="https://rtcmulticonnection.herokuapp.com/socket.io/socket.io.js"></script>

add two Cordova plugin

https://github.com/patwaswapnil/cordova-opentok-android-permissions
ionic cordova plugin add cordova-opentok-android-permissions
this plugin will add some permission for android

https://ionicframework.com/docs/native/diagnostic
go to above link for more detail about diagnostic

ionic cordova plugin add cordova.plugins.diagnostic
npm install @ionic-native/diagnostic

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Diagnostic,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

home.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content id="myContent" [fullscreen]="true">
  <button (click)="join()">Join</button>
  <br>
  <br>
</ion-content>

home.ts

camera and microphone permission is necessary to use this plugin
await this.diagnostic.requestCameraAuthorization()
await this.diagnostic.requestMicrophoneAuthorization()

import { Component } from '@angular/core';
import { Diagnostic } from '@ionic-native/diagnostic/ngx';
import { Platform } from '@ionic/angular';


declare var RTCMultiConnection;


@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  connection: any;
  constructor(private diagnostic: Diagnostic,
    private platform: Platform,) {

  }


  ngAfterViewInit() {
    console.log('ngAfterViewInit');
    this.platform.ready().then(() => {
      console.log('ready');
      this.getPermission();
    });
  }


  getPermission() {
    console.log('getPermission');
    this.diagnostic.requestCameraAuthorization()
      .then((res) => {
        console.log('res 0');
        console.log(res);
        return this.diagnostic.requestMicrophoneAuthorization()
      })
      .then((res) => {
        console.log('res');
        console.log(res);
      }).catch((err) => {
        console.log('err', err);
      }).finally(() => {
        console.log('finally');
        this.webrtc();
      });
  }



  join() {
    var predefinedRoomId = 'test123';
    this.connection.openOrJoin(predefinedRoomId);
  }

  webrtc() {
    let content = document.querySelector('#myContent') as HTMLElement;

    console.log('ngAfterViewInit');
    this.connection = new RTCMultiConnection();

    console.log('connection', this.connection);


    // this line is VERY_important
    this.connection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';

    // all below lines are optional; however recommended.

    this.connection.session = {
      audio: true,
      video: true
    };

    this.connection.onMediaError = function (error) {
      console.log('error', error);
      console.log('error', JSON.stringify(error));
    };

    this.connection.sdpConstraints.mandatory = {
      OfferToReceiveAudio: true,
      OfferToReceiveVideo: true
    };

    this.connection.onstream = function (event) {
      console.log('onstream', event);

      content.appendChild(event.mediaElement);
    };

  }

}