From 3d6c5d019177cb8c997a9a5a628f78e645483e36 Mon Sep 17 00:00:00 2001 From: pabloFuente Date: Tue, 28 Mar 2017 20:17:44 +0200 Subject: [PATCH] OpenViduBrowser API definition --- .../src/main/resources/ts/OpenVidu.ts | 50 ++++- .../src/main/resources/ts/Session.ts | 187 ++++++++++-------- .../src/main/resources/ts/Stream.ts | 49 +++-- 3 files changed, 191 insertions(+), 95 deletions(-) diff --git a/openvidu-browser/src/main/resources/ts/OpenVidu.ts b/openvidu-browser/src/main/resources/ts/OpenVidu.ts index 437592b0..ae29c04a 100644 --- a/openvidu-browser/src/main/resources/ts/OpenVidu.ts +++ b/openvidu-browser/src/main/resources/ts/OpenVidu.ts @@ -27,16 +27,58 @@ export class OpenVidu { private rpcParams: any; private callback: Callback; private camera: Stream; + private remoteStreams: Stream[] = []; constructor( private wsUri: string ) { if(this.wsUri.charAt(wsUri.length-1) != '/'){ this.wsUri += '/'; } this.wsUri += 'room'; - - this.session = new Session(this); } + + + + + /* NEW METHODS */ + initSession(sessionId) { + console.log("Session initialized!"); + this.session = new Session(this, sessionId); + return this.session; + } + + initPublisherTagged(parentId: string, cameraOptions: any) { + console.log("Publisher tagged initialized!"); + + let camera = this.getCamera(cameraOptions); + camera.requestCameraAccess((error, camera) => { + if (error) return console.log(error); + camera!.playOnlyVideo(parentId, null); + }); + } + + initPublisher(cameraOptions: any) { + console.log("Publisher initialized!"); + + let camera = this.getCamera(cameraOptions); + camera.requestCameraAccess((error, camera) => { + if (error) return console.log(error); + }); + } + + getLocalStream() { + return this.camera; + } + + getRemoteStreams() { + return this.remoteStreams; + } + /* NEW METHODS */ + + + + + getRoom() { return this.session; } @@ -230,7 +272,7 @@ export class OpenVidu { return this.camera; }; - joinSession(options: SessionOptions, callback: Callback) { + /*joinSession(options: SessionOptions, callback: Callback) { this.session.configure(options); @@ -241,7 +283,7 @@ export class OpenVidu { this.session.addEventListener('error-room', error => callback(error)); return this.session; - }; + };*/ //CHAT sendMessage( room, user, message ) { diff --git a/openvidu-browser/src/main/resources/ts/Session.ts b/openvidu-browser/src/main/resources/ts/Session.ts index fc09ff1d..ab56222a 100644 --- a/openvidu-browser/src/main/resources/ts/Session.ts +++ b/openvidu-browser/src/main/resources/ts/Session.ts @@ -25,113 +25,135 @@ export class Session { public thresholdSpeaker: number; private options: SessionOptions - constructor( private openVidu: OpenVidu ) { - this.localParticipant = new Participant( this.openVidu, true, this ); + constructor(private openVidu: OpenVidu, private sessionId: string) { + this.localParticipant = new Participant(this.openVidu, true, this); } - configure( options: SessionOptions ) { + + + /* NEW METHODS */ + connect(token, callback) { + + this.openVidu.connect((error) => { + if (error) { + callback('ERROR CONNECTING TO OPENVIDU'); + } + else { + this.configure({ + sessionId: this.sessionId, + participantId: token + }); + + let joinParams = { + user: token, + room: this.sessionId, + dataChannels: false + } + + if (this.localParticipant) { + if (Object.keys(this.localParticipant.getStreams()).some(streamId => + this.streams[streamId].isDataChannelEnabled())) { + joinParams.dataChannels = true; + } + } + + this.openVidu.sendRequest('joinRoom', joinParams, (error, response) => { + + if (error) { + callback('UNABLE TO JOIN ROOM'); + } else { + + this.connected = true; + + let exParticipants = response.value; + + let roomEvent = { + participants: new Array(), + streams: new Array() + } + + let length = exParticipants.length; + for (let i = 0; i < length; i++) { + + let participant = new Participant(this.openVidu, false, this, + exParticipants[i]); + + this.participants[participant.getId()] = participant; + + roomEvent.participants.push(participant); + + let streams = participant.getStreams(); + for (let key in streams) { + roomEvent.streams.push(streams[key]); + if (this.subscribeToStreams) { + streams[key].subscribe(); + } + } + } + + if (this.subscribeToStreams) { + for (let stream of roomEvent.streams) { + this.ee.emitEvent('stream-added', [{ stream }]); + + // Adding the remote stream to the OpenVidu object + this.openVidu.getRemoteStreams().push(stream); + } + } + + callback(undefined); + } + }); + } + }); + } + + publish() { + this.openVidu.getCamera().publish(); + } + /* NEW METHODS */ + + + + + + configure(options: SessionOptions) { this.options = options; this.id = options.sessionId; this.subscribeToStreams = options.subscribeToStreams || true; this.updateSpeakerInterval = options.updateSpeakerInterval || 1500; this.thresholdSpeaker = options.thresholdSpeaker || -50; - this.localParticipant.setId( options.participantId ); + this.localParticipant.setId(options.participantId); this.activateUpdateMainSpeaker(); this.participants[options.participantId] = this.localParticipant; } - - getId(){ + + getId() { return this.id; } private activateUpdateMainSpeaker() { setInterval(() => { - if ( this.participantsSpeaking.length > 0 ) { - this.ee.emitEvent( 'update-main-speaker', [{ + if (this.participantsSpeaking.length > 0) { + this.ee.emitEvent('update-main-speaker', [{ participantId: this.participantsSpeaking[this.participantsSpeaking.length - 1] - }] ); + }]); } - }, this.updateSpeakerInterval ); + }, this.updateSpeakerInterval); } getLocalParticipant() { return this.localParticipant; } - addEventListener( eventName, listener ) { - this.ee.addListener( eventName, listener ); + addEventListener(eventName, listener) { + this.ee.addListener(eventName, listener); } - emitEvent( eventName, eventsArray ) { - this.ee.emitEvent( eventName, eventsArray ); - } - - connect() { - - let joinParams = { - user: this.options.participantId, - room: this.options.sessionId, - dataChannels: false - } - - if ( this.localParticipant ) { - if ( Object.keys( this.localParticipant.getStreams() ).some( streamId => - this.streams[streamId].isDataChannelEnabled() ) ) { - joinParams.dataChannels = true; - } - } - - this.openVidu.sendRequest( 'joinRoom', joinParams, ( error, response ) => { - - if ( error ) { - - console.warn( 'Unable to join room', error ); - this.ee.emitEvent( 'error-room', [{ - error: error - }] ); - - } else { - - this.connected = true; - - let exParticipants = response.value; - - let roomEvent = { - participants: new Array(), - streams: new Array() - } - - let length = exParticipants.length; - for ( let i = 0; i < length; i++ ) { - - let participant = new Participant( this.openVidu, false, this, - exParticipants[i] ); - - this.participants[participant.getId()] = participant; - - roomEvent.participants.push( participant ); - - let streams = participant.getStreams(); - for ( let key in streams ) { - roomEvent.streams.push( streams[key] ); - if ( this.subscribeToStreams ) { - streams[key].subscribe(); - } - } - } - - this.ee.emitEvent( 'room-connected', [roomEvent] ); - - if ( this.subscribeToStreams ) { - for ( let stream of roomEvent.streams ) { - this.ee.emitEvent( 'stream-added', [{ stream }] ); - } - } - } - }); + emitEvent(eventName, eventsArray) { + this.ee.emitEvent(eventName, eventsArray); } @@ -161,6 +183,9 @@ export class Session { if ( this.subscribeToStreams ) { stream.subscribe(); this.ee.emitEvent( 'stream-added', [{ stream }] ); + + // Adding the remote stream to the OpenVidu object + this.openVidu.getRemoteStreams().push(stream); } } } @@ -201,6 +226,10 @@ export class Session { this.ee.emitEvent( 'stream-removed', [{ stream: streams[key] }] ); + + // Deleting the removed stream from the OpenVidu object + let index = this.openVidu.getRemoteStreams().indexOf(streams[key]); + this.openVidu.getRemoteStreams().splice(index, 1); } participant.dispose(); diff --git a/openvidu-browser/src/main/resources/ts/Stream.ts b/openvidu-browser/src/main/resources/ts/Stream.ts index 7e747907..acba9de7 100644 --- a/openvidu-browser/src/main/resources/ts/Stream.ts +++ b/openvidu-browser/src/main/resources/ts/Stream.ts @@ -69,6 +69,8 @@ export class Stream { private dataChannel: boolean; private dataChannelOpened = false; + private videoSrc: string; + constructor(private openVidu: OpenVidu, private local: boolean, private room: Session, options: StreamOptions) { if (options.id) { @@ -84,8 +86,32 @@ export class Stream { this.sendVideo = options.video; this.sendAudio = options.audio; this.mediaConstraints = options.mediaConstraints; + + this.addEventListener('src-added', (srcEvent) => { + this.videoSrc = srcEvent.src; + if (this.video) this.video.src = srcEvent.src; + console.warn("Videosrc [" + srcEvent.src + "] added to stream [" + this.getId() + "]"); + }); } + emitSrcEvent(wrstream) { + this.ee.emitEvent('src-added', [{ + src: URL.createObjectURL(wrstream) + }]); + } + + getVideoSrc() { + return this.videoSrc; + } + + removeVideo(parentElement) { + document.getElementById(parentElement)!.removeChild(this.video); + } + + + + + getRecvVideo() { return this.recvVideo; } @@ -108,6 +134,7 @@ export class Stream { this.localMirrored = true; if (wr) { this.wrStream = wr; + this.emitSrcEvent(this.wrStream); } } @@ -183,13 +210,7 @@ export class Stream { this.video.id = 'native-video-' + this.getId(); this.video.autoplay = true; this.video.controls = false; - if (this.wrStream) { - this.video.src = URL.createObjectURL(this.wrStream); - show(thumbnailId); - this.hideSpinner(); - } else { - console.log("No wrStream yet for", this.getId()); - } + this.video.src = this.videoSrc; this.videoElements.push({ thumb: thumbnailId, @@ -203,10 +224,10 @@ export class Stream { if (typeof parentElement === "string") { let parentElementDom = document.getElementById(parentElement); if (parentElementDom) { - parentElementDom.appendChild(this.video); + this.video = parentElementDom.appendChild(this.video); } } else { - parentElement.appendChild(this.video); + this.video = parentElement.appendChild(this.video); } return this.video; @@ -278,12 +299,14 @@ export class Stream { } }; - navigator.mediaDevices.getUserMedia(constraints) + navigator.mediaDevices.getUserMedia(constraints2) .then(userStream => { userStream.getAudioTracks()[0].enabled = this.sendAudio; userStream.getVideoTracks()[0].enabled = this.sendVideo; this.wrStream = userStream; + this.emitSrcEvent(this.wrStream); + callback(undefined, this); }) .catch(function (e) { @@ -438,6 +461,8 @@ export class Stream { if (this.wrStream != undefined) { + this.emitSrcEvent(this.wrStream); + this.speechEvent = kurentoUtils.WebRtcPeer.hark(this.wrStream, { threshold: this.room.thresholdSpeaker }); this.speechEvent.on('speaking', () => { @@ -460,8 +485,8 @@ export class Stream { video.src = URL.createObjectURL(this.wrStream); video.onplay = () => { console.log(this.getId() + ': ' + 'Video playing'); - show(thumbnailId); - this.hideSpinner(this.getId()); + //show(thumbnailId); + //this.hideSpinner(this.getId()); }; } this.room.emitEvent('stream-subscribed', [{