From 9661b83468a321c9d42777b3775cd7883b45c510 Mon Sep 17 00:00:00 2001 From: csantosm <4a.santos@gmail.com> Date: Wed, 20 Jul 2022 15:29:32 +0200 Subject: [PATCH] openvidu-ionic: Updated tutorial --- .../src/app/app.component.ts | 16 +++++++--------- openvidu-ionic/src/app/app.component.ts | 15 +++++++-------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/openvidu-ionic-capacitor/src/app/app.component.ts b/openvidu-ionic-capacitor/src/app/app.component.ts index ee10e25c..8127f963 100644 --- a/openvidu-ionic-capacitor/src/app/app.component.ts +++ b/openvidu-ionic-capacitor/src/app/app.component.ts @@ -71,8 +71,6 @@ export class AppComponent implements OnInit, OnDestroy { this.OV = new OpenVidu(); - this.initDevices(); - // --- 2) Init a session --- this.session = this.OV.initSession(); @@ -125,8 +123,8 @@ export class AppComponent implements OnInit, OnDestroy { // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video // element: we will manage it on our own) and with the desired properties const publisher: Publisher = this.OV.initPublisher(undefined, { - audioSource: this.microphones[0].deviceId, // The source of audio. If undefined default microphone - videoSource: this.cameras[0].deviceId, // The source of video. If undefined default webcam + audioSource: undefined, // The source of audio. If undefined default microphone + videoSource: undefined, // The source of video. If undefined default webcam publishAudio: true, // Whether you want to start publishing with your audio unmuted or not publishVideo: true, // Whether you want to start publishing with your video enabled or not resolution: '640x480', // The resolution of your video @@ -135,6 +133,8 @@ export class AppComponent implements OnInit, OnDestroy { mirror: this.isFrontCamera // Whether to mirror your local video or not }); + publisher.on('accessAllowed', () => this.initDevices()); + // --- 6) Publish your stream --- try { @@ -172,10 +172,9 @@ export class AppComponent implements OnInit, OnDestroy { mirror: this.isFrontCamera }; - // Stopping the video tracks after request for another MediaStream - this.publisher.stream.getMediaStream().getVideoTracks().forEach((track) => { - track.stop(); - }); + // Stopping the video tracks before request for another MediaStream + // Only one unique device can be used at same time + this.publisher.stream.getMediaStream().getVideoTracks()[0].stop(); const newTrack = await this.OV.getUserMedia(pp); const videoTrack: MediaStreamTrack = newTrack.getVideoTracks()[0]; await (this.publisher as Publisher).replaceTrack(videoTrack); @@ -236,7 +235,6 @@ export class AppComponent implements OnInit, OnDestroy { private async initDevices() { this.devices = await this.OV.getDevices(); - this.cameras = this.devices.filter((d) => d.kind === 'videoinput'); this.microphones = this.devices.filter((d) => d.kind === 'audioinput' && d.label !== 'Default'); diff --git a/openvidu-ionic/src/app/app.component.ts b/openvidu-ionic/src/app/app.component.ts index 5df4c7dd..d1be4240 100644 --- a/openvidu-ionic/src/app/app.component.ts +++ b/openvidu-ionic/src/app/app.component.ts @@ -87,8 +87,6 @@ export class AppComponent implements OnDestroy { this.OV = new OpenVidu(); - this.initDevices(); - // --- 2) Init a session --- this.session = this.OV.initSession(); @@ -154,8 +152,8 @@ export class AppComponent implements OnDestroy { // Init a publisher passing undefined as targetElement (we don't want OpenVidu to insert a video // element: we will manage it on our own) and with the desired properties const publisher: Publisher = await this.OV.initPublisherAsync(undefined, { - audioSource: this.microphones[0].deviceId, // The source of audio. If undefined default microphone - videoSource: this.cameras[0].deviceId, // The source of video. If undefined default webcam + audioSource: undefined, // The source of audio. If undefined default microphone + videoSource: undefined, // The source of video. If undefined default webcam publishAudio: true, // Whether you want to start publishing with your audio unmuted or not publishVideo: true, // Whether you want to start publishing with your video enabled or not resolution: "640x480", // The resolution of your video @@ -164,6 +162,8 @@ export class AppComponent implements OnDestroy { mirror: this.isFrontCamera, // Whether to mirror your local video or not }); + publisher.on('accessAllowed', () => this.initDevices()); + // --- 6) Publish your stream --- await this.session.publish(publisher); @@ -200,10 +200,9 @@ export class AppComponent implements OnDestroy { mirror: this.isFrontCamera }; - // Stopping the video tracks after request for another MediaStream - this.publisher.stream.getMediaStream().getVideoTracks().forEach((track) => { - track.stop(); - }); + // Stopping the video tracks before request for another MediaStream + // Only one unique device can be used at same time + this.publisher.stream.getMediaStream().getVideoTracks()[0].stop(); const newTrack = await this.OV.getUserMedia(pp); const videoTrack: MediaStreamTrack = newTrack.getVideoTracks()[0]; await (this.publisher as Publisher).replaceTrack(videoTrack);