openvidu-browser: bug solved for streamPlaying event when republishing

openvidu-browser/src/OpenVidu/Publisher.ts

@@ -326,6 +326,15 @@ export class Publisher extends StreamManager {
                                                 mediaStream.getVideoTracks().forEach((track) => {
                                                     track.stop();
                                                 });
+                                                if (error.constraint.toLowerCase() === 'deviceid') {
+                                                    errorName = OpenViduErrorName.INPUT_AUDIO_DEVICE_NOT_FOUND;
+                                                    errorMessage = "Audio input device with deviceId '" + (<ConstrainDOMStringParameters>(<MediaTrackConstraints>constraints.audio).deviceId!!).exact + "' not found";
+                                                } else {
+                                                    errorName = OpenViduErrorName.PUBLISHER_PROPERTIES_ERROR;
+                                                    errorMessage = "Audio input device doesn't support the value passed for constraint '" + error.constraint + "'";
+                                                }
+                                                errorCallback(new OpenViduError(errorName, errorMessage));
+                                            }).catch(e => {
                                                 if (error.constraint.toLowerCase() === 'deviceid') {
                                                     errorName = OpenViduErrorName.INPUT_VIDEO_DEVICE_NOT_FOUND;
                                                     errorMessage = "Video input device with deviceId '" + (<ConstrainDOMStringParameters>(<MediaTrackConstraints>constraints.video).deviceId!!).exact + "' not found";
@@ -334,15 +343,6 @@ export class Publisher extends StreamManager {
                                                     errorMessage = "Video input device doesn't support the value passed for constraint '" + error.constraint + "'";
                                                 }
                                                 errorCallback(new OpenViduError(errorName, errorMessage));
-                                            }).catch(e => {
-                                                if (error.constraint.toLowerCase() === 'deviceid') {
-                                                    errorName = OpenViduErrorName.INPUT_AUDIO_DEVICE_NOT_FOUND;
-                                                    errorMessage = "Audio input device with deviceId '" + (<ConstrainDOMStringParameters>(<MediaTrackConstraints>constraints.video).deviceId!!).exact + "' not found";
-                                                } else {
-                                                    errorName = OpenViduErrorName.PUBLISHER_PROPERTIES_ERROR;
-                                                    errorMessage = "Audio input device doesn't support the value passed for constraint '" + error.constraint + "'";
-                                                }
-                                                errorCallback(new OpenViduError(errorName, errorMessage));
                                             });
                                         break;
                                 }
@@ -373,6 +373,15 @@ export class Publisher extends StreamManager {
         this.ee.emitEvent(type, eventArray);
     }
 
+    /**
+     * @hidden
+     */
+    reestablishStreamPlayingEvent() {
+        if (this.ee.getListeners('streamPlaying').length > 0) {
+            this.addPlayEventToFirstVideo();
+        }
+    }
+
 
     /* Private methods */
 
@@ -390,42 +399,4 @@ export class Publisher extends StreamManager {
         }
     }
 
-
-    /* Private methods */
-
-    private userMediaHasVideo(callback): Promise<any> {
-        return new Promise<any>((resolve, reject) => {
-            // If the user is going to publish its screen there's a video source
-            if ((typeof this.properties.videoSource === 'string') && this.properties.videoSource === 'screen') {
-                resolve(true);
-            } else {
-                this.openvidu.getDevices()
-                    .then(devices => {
-                        resolve(
-                            !!(devices.filter((device) => {
-                                return device.kind === 'videoinput';
-                            })[0]));
-                    })
-                    .catch(error => {
-                        reject(error);
-                    });
-            }
-        });
-    }
-
-    private userMediaHasAudio(callback): Promise<any> {
-        return new Promise<any>((resolve, reject) => {
-            this.openvidu.getDevices()
-                .then(devices => {
-                    resolve(
-                        !!(devices.filter((device) => {
-                            return device.kind === 'audioinput';
-                        })[0]));
-                })
-                .catch(error => {
-                    reject(error);
-                });
-        });
-    }
-
 }

openvidu-browser/src/OpenVidu/Session.ts

@@ -330,6 +330,7 @@ export class Session implements EventDispatcher {
                 publisher.initialize()
                     .then(() => {
                         this.connection.addStream(publisher.stream);
+                        publisher.reestablishStreamPlayingEvent();
                         publisher.stream.publish()
                             .then(() => {
                                 resolve();

openvidu-browser/src/OpenVidu/StreamManager.ts

@@ -89,7 +89,7 @@ export class StreamManager implements EventDispatcher {
     /**
      * @hidden
      */
-    protected customEe = new EventEmitter();
+    protected canPlayListener: EventListenerOrEventListenerObject;
 
 
     /**
@@ -118,6 +118,21 @@ export class StreamManager implements EventDispatcher {
                 this.element = targEl;
             }
         }
+        this.canPlayListener = () => {
+            if (this.stream.isLocal()) {
+                if (!this.stream.displayMyRemote()) {
+                    console.info("Your local 'Stream' with id [" + this.stream.streamId + '] video is now playing');
+                    this.ee.emitEvent('videoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'videoPlaying')]);
+                } else {
+                    console.info("Your own remote 'Stream' with id [" + this.stream.streamId + '] video is now playing');
+                    this.ee.emitEvent('remoteVideoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'remoteVideoPlaying')]);
+                }
+            } else {
+                console.info("Remote 'Stream' with id [" + this.stream.streamId + '] video is now playing');
+                this.ee.emitEvent('videoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'videoPlaying')]);
+            }
+            this.ee.emitEvent('streamPlaying', [new StreamManagerEvent(this)]);
+        };
     }
 
     /**
@@ -330,6 +345,8 @@ export class StreamManager implements EventDispatcher {
         }
 
         this.videos.slice().reverse().forEach((streamManagerVideo, index, videos) => {
+            // Remove oncanplay event listener (only OpenVidu browser one, not the user ones)
+            streamManagerVideo.video.removeEventListener('canplay', this.canPlayListener);
             if (!!streamManagerVideo.targetElement) {
                 // Only remove videos created by OpenVidu Browser (those generated by passing a valid targetElement in OpenVidu.initPublisher and Session.subscribe
                 // or those created by StreamManager.createVideoElement). These are also the videos that triggered a videoElementCreated event
@@ -364,21 +381,7 @@ export class StreamManager implements EventDispatcher {
      */
     addPlayEventToFirstVideo() {
         if ((!!this.videos[0]) && (!!this.videos[0].video) && (this.videos[0].video.oncanplay === null)) {
-            this.videos[0].video.oncanplay = () => {
+            this.videos[0].video.addEventListener('canplay', this.canPlayListener);
-                if (this.stream.isLocal()) {
-                    if (!this.stream.displayMyRemote()) {
-                        console.info("Your local 'Stream' with id [" + this.stream.streamId + '] video is now playing');
-                        this.ee.emitEvent('videoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'videoPlaying')]);
-                    } else {
-                        console.info("Your own remote 'Stream' with id [" + this.stream.streamId + '] video is now playing');
-                        this.ee.emitEvent('remoteVideoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'remoteVideoPlaying')]);
-                    }
-                } else {
-                    console.info("Remote 'Stream' with id [" + this.stream.streamId + '] video is now playing');
-                    this.ee.emitEvent('videoPlaying', [new VideoElementEvent(this.videos[0].video, this, 'videoPlaying')]);
-                }
-                this.ee.emitEvent('streamPlaying', [new StreamManagerEvent(this)]);
-            };
         }
     }