带有ionic 5的RTCMultiConnection完整示例 [英] RTCMultiConnection with ionic 5 full example

问题描述

尝试了所有方法，但找不到任何解决方案。
请提供带有离子5的工作示例

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

推荐答案

在Android中工作

创建IONIC项目
ionic开始myApp空白

在索引中。 html 添加两个脚本

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

添加两个Cordova插件

add two Cordova plugin

https://github.com/patwaswapnil/cordova-opentok-android-permissions

ionic cordova插件添加cordova-opentok-android-permissions

此插件将为android添加一些权限

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

转到上面的链接以获取有关诊断

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

app.module.ts

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

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

相机和麦克风权限。

等待this.diagnostic.requestCameraAuthorization（）

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

  }

}

这篇关于带有ionic 5的RTCMultiConnection完整示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！