ambiser
/
openvidu
mirror of https://github.com/OpenVidu/openvidu.git
8
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Simplify testapp with a simple OpenVidu browser API

pull/1/head
Micael Gallego 2016-10-15 02:08:23 +02:00
parent 31389e683c
commit 47b6a979bd
9 changed files with 348 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
openvidu-browser/src/main/resources/static/ts/Main.ts
View File

@ -1,4 +1,4 @@
export { Room } from './Room'; export { Session } from './Session';
export { Participant } from './Participant'; export { Participant } from './Participant';
export { Stream } from './Stream'; export { Stream } from './Stream';
export { OpenVidu } from './OpenVidu'; export { OpenVidu } from './OpenVidu';

72
openvidu-browser/src/main/resources/static/ts/OpenVidu.ts
View File

@ -15,25 +15,32 @@
* *
*/ */
import { Room } from './Room'; import { Session, SessionOptions } from './Session';
import { Stream } from './Stream'; import { Stream } from './Stream';
declare var RpcBuilder: any; declare var RpcBuilder: any;
type Callback<T> = ( error?: any, openVidu?: T ) => void; export type Callback<T> = ( error?: any, openVidu?: T ) => void;
export class OpenVidu { export class OpenVidu {
private room: Room; private session: Session;
private userName: string;
private jsonRpcClient: any; private jsonRpcClient: any;
private rpcParams: any; private rpcParams: any;
private callback: Callback<OpenVidu>; private callback: Callback<OpenVidu>;
private camera: Stream;
constructor( private wsUri: string ) { } constructor( private wsUri: string ) {
if(this.wsUri.charAt(wsUri.length-1) != '/'){
this.wsUri = '/';
}
this.wsUri += 'room';
this.session = new Session(this);
}
getRoom() { getRoom() {
return this.room; return this.session;
} }
connect( callback: Callback<OpenVidu> ): void { connect( callback: Callback<OpenVidu> ): void {
@ -77,7 +84,7 @@ export class OpenVidu {
private customNotification( params ) { private customNotification( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.emitEvent( "custom-message-received", [{ params: params }] ); this.session.emitEvent( "custom-message-received", [{ params: params }] );
} }
} }
@ -90,7 +97,7 @@ export class OpenVidu {
} }
private isRoomAvailable() { private isRoomAvailable() {
if ( this.room !== undefined && this.room instanceof Room ) { if ( this.session !== undefined && this.session instanceof Session ) {
return true; return true;
} else { } else {
console.warn( 'Room instance not found' ); console.warn( 'Room instance not found' );
@ -101,7 +108,7 @@ export class OpenVidu {
private disconnectCallback() { private disconnectCallback() {
console.log( 'Websocket connection lost' ); console.log( 'Websocket connection lost' );
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onLostConnection(); this.session.onLostConnection();
} else { } else {
alert( 'Connection error. Please reload page.' ); alert( 'Connection error. Please reload page.' );
} }
@ -110,7 +117,7 @@ export class OpenVidu {
private reconnectingCallback() { private reconnectingCallback() {
console.log( 'Websocket connection lost (reconnecting)' ); console.log( 'Websocket connection lost (reconnecting)' );
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onLostConnection(); this.session.onLostConnection();
} else { } else {
alert( 'Connection error. Please reload page.' ); alert( 'Connection error. Please reload page.' );
} }
@ -122,49 +129,49 @@ export class OpenVidu {
private onParticipantJoined( params ) { private onParticipantJoined( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onParticipantJoined( params ); this.session.onParticipantJoined( params );
} }
} }
private onParticipantPublished( params ) { private onParticipantPublished( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onParticipantPublished( params ); this.session.onParticipantPublished( params );
} }
} }
private onParticipantLeft( params ) { private onParticipantLeft( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onParticipantLeft( params ); this.session.onParticipantLeft( params );
} }
} }
private onParticipantEvicted( params ) { private onParticipantEvicted( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onParticipantEvicted( params ); this.session.onParticipantEvicted( params );
} }
} }
private onNewMessage( params ) { private onNewMessage( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onNewMessage( params ); this.session.onNewMessage( params );
} }
} }
private iceCandidateEvent( params ) { private iceCandidateEvent( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.recvIceCandidate( params ); this.session.recvIceCandidate( params );
} }
} }
private onRoomClosed( params ) { private onRoomClosed( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onRoomClosed( params ); this.session.onRoomClosed( params );
} }
} }
private onMediaError( params ) { private onMediaError( params ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.onMediaError( params ); this.session.onMediaError( params );
} }
} }
@ -198,17 +205,21 @@ export class OpenVidu {
close( forced ) { close( forced ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.leave( forced, this.jsonRpcClient ); this.session.leave( forced, this.jsonRpcClient );
} }
}; };
disconnectParticipant( stream ) { disconnectParticipant( stream ) {
if ( this.isRoomAvailable() ) { if ( this.isRoomAvailable() ) {
this.room.disconnect( stream ); this.session.disconnect( stream );
} }
} }
Stream( room, options ) { getCamera(options?) {
if(this.camera){
return this.camera;
}
options = options || { options = options || {
audio: true, audio: true,
@ -216,13 +227,22 @@ export class OpenVidu {
data: true data: true
} }
options.participant = room.getLocalParticipant(); options.participant = this.session.getLocalParticipant();
return new Stream( this, true, room, options ); this.camera = new Stream( this, true, this.session, options );
return this.camera;
}; };
Room( options ) { joinSession(options: SessionOptions, callback: Callback<Session>) {
let room = new Room( this, options );
return room; this.session.configure(options);
this.session.connect();
this.session.addEventListener('room-connected', roomEvent => callback(undefined,this.session));
this.session.addEventListener('error-room', error => callback(error));
return this.session;
}; };
//CHAT //CHAT

21
openvidu-browser/src/main/resources/static/ts/Participant.ts
View File

@ -1,7 +1,7 @@
// Participant -------------------------------- // Participant --------------------------------
import { Stream, StreamOptions } from './Stream'; import { Stream, StreamOptions } from './Stream';
import { OpenVidu } from './OpenVidu'; import { OpenVidu } from './OpenVidu';
import { Room } from './Room'; import { Session } from './Session';
type ObjMap<T> = { [s: string]: T; } type ObjMap<T> = { [s: string]: T; }
@ -16,7 +16,9 @@ export class Participant {
private streams: ObjMap<Stream> = {}; private streams: ObjMap<Stream> = {};
private streamsOpts: StreamOptions[] = []; private streamsOpts: StreamOptions[] = [];
constructor( private openVidu: OpenVidu, private local: boolean, private room: Room, private options: ParticipantOptions ) { constructor( private openVidu: OpenVidu, private local: boolean, private room: Session, private options?: ParticipantOptions ) {
if ( options ) {
this.id = options.id; this.id = options.id;
@ -39,20 +41,19 @@ export class Participant {
this.streamsOpts.push( streamOpts ); this.streamsOpts.push( streamOpts );
} }
} }
}
console.log( "New " + ( local ? "local " : "remote " ) + "participant " + this.id console.log( "New " + ( local ? "local " : "remote " ) + "participant " + this.id
+ ", streams opts: ", this.streamsOpts ); + ", streams opts: ", this.streamsOpts );
} }
setId( newId ) { setId( newId ) {
this.id = newId; this.id = newId;
} }
addStream( stream ) { addStream( stream: Stream ) {
this.streams[stream.getID()] = stream; this.streams[stream.getIdInParticipant()] = stream;
this.room.getStreams()[stream.getID()] = stream; this.room.getStreams()[stream.getIdInParticipant()] = stream;
} }
getStreams() { getStreams() {
@ -65,17 +66,17 @@ export class Participant {
} }
} }
getID() { getId() {
return this.id; return this.id;
} }
sendIceCandidate( candidate ) { sendIceCandidate( candidate ) {
console.debug(( this.local ? "Local" : "Remote" ), "candidate for", console.debug(( this.local ? "Local" : "Remote" ), "candidate for",
this.getID(), JSON.stringify( candidate ) ); this.getId(), JSON.stringify( candidate ) );
this.openVidu.sendRequest( "onIceCandidate", { this.openVidu.sendRequest( "onIceCandidate", {
endpointName: this.getID(), endpointName: this.getId(),
candidate: candidate.candidate, candidate: candidate.candidate,
sdpMid: candidate.sdpMid, sdpMid: candidate.sdpMid,
sdpMLineIndex: candidate.sdpMLineIndex sdpMLineIndex: candidate.sdpMLineIndex

76
openvidu-browser/src/main/resources/static/ts/Room.ts → openvidu-browser/src/main/resources/static/ts/Session.ts
View File

@ -4,37 +4,43 @@ import { Participant, ParticipantOptions } from './Participant';
declare let EventEmitter; declare let EventEmitter;
export interface RoomOptions { export interface SessionOptions {
room: string; sessionId: string;
user: string; participantId: string;
subscribeToStreams: boolean; subscribeToStreams?: boolean;
updateSpeakerInterval: number; updateSpeakerInterval?: number;
thresholdSpeaker: number; thresholdSpeaker?: number;
} }
export class Room { export class Session {
private name: string; private id: string;
private ee = new EventEmitter(); private ee = new EventEmitter();
private streams = {}; private streams = {};
private participants = {}; private participants = {};
private participantsSpeaking: Participant[] = []; private participantsSpeaking: Participant[] = [];
private connected = false; private connected = false;
private localParticipant; private localParticipant: Participant;
private subscribeToStreams: boolean; private subscribeToStreams: boolean;
private updateSpeakerInterval: number; private updateSpeakerInterval: number;
public thresholdSpeaker: number; public thresholdSpeaker: number;
private options: SessionOptions
constructor( private openVidu: OpenVidu, private options: RoomOptions ) { constructor( private openVidu: OpenVidu ) {
this.localParticipant = new Participant( this.openVidu, true, this );
}
this.name = options.room; configure( options: SessionOptions ) {
this.options = options;
this.id = options.sessionId;
this.subscribeToStreams = options.subscribeToStreams || true; this.subscribeToStreams = options.subscribeToStreams || true;
this.updateSpeakerInterval = options.updateSpeakerInterval || 1500; this.updateSpeakerInterval = options.updateSpeakerInterval || 1500;
this.thresholdSpeaker = options.thresholdSpeaker || -50; this.thresholdSpeaker = options.thresholdSpeaker || -50;
this.localParticipant.setId( options.participantId );
this.activateUpdateMainSpeaker(); this.activateUpdateMainSpeaker();
this.localParticipant = new Participant(openVidu, true, this, { id: options.user });
this.participants[options.user] = this.localParticipant; this.participants[options.participantId] = this.localParticipant;
} }
private activateUpdateMainSpeaker() { private activateUpdateMainSpeaker() {
@ -63,8 +69,8 @@ export class Room {
connect() { connect() {
let joinParams = { let joinParams = {
user: this.options.user, user: this.options.participantId,
room: this.options.room, room: this.options.sessionId,
dataChannels: false dataChannels: false
} }
@ -101,7 +107,7 @@ export class Room {
let participant = new Participant( this.openVidu, false, this, let participant = new Participant( this.openVidu, false, this,
exParticipants[i] ); exParticipants[i] );
this.participants[participant.getID()] = participant; this.participants[participant.getId()] = participant;
roomEvent.participants.push( participant ); roomEvent.participants.push( participant );
@ -115,6 +121,12 @@ export class Room {
} }
this.ee.emitEvent( 'room-connected', [roomEvent] ); this.ee.emitEvent( 'room-connected', [roomEvent] );
if ( this.subscribeToStreams ) {
for ( let stream of roomEvent.streams ) {
this.ee.emitEvent( 'stream-added', [{ stream }] );
}
}
} }
}); });
} }
@ -128,7 +140,7 @@ export class Room {
let participant = new Participant( this.openVidu, false, this, options ); let participant = new Participant( this.openVidu, false, this, options );
let pid = participant.getID(); let pid = participant.getId();
if ( !( pid in this.participants ) ) { if ( !( pid in this.participants ) ) {
console.info( "Publisher not found in participants list by its id", pid ); console.info( "Publisher not found in participants list by its id", pid );
} else { } else {
@ -137,9 +149,7 @@ export class Room {
//replacing old participant (this one has streams) //replacing old participant (this one has streams)
this.participants[pid] = participant; this.participants[pid] = participant;
this.ee.emitEvent( 'participant-published', [{ this.ee.emitEvent( 'participant-published', [{ participant }] );
participant: participant
}] );
let streams = participant.getStreams(); let streams = participant.getStreams();
for ( let key in streams ) { for ( let key in streams ) {
@ -147,9 +157,7 @@ export class Room {
if ( this.subscribeToStreams ) { if ( this.subscribeToStreams ) {
stream.subscribe(); stream.subscribe();
this.ee.emitEvent( 'stream-added', [{ this.ee.emitEvent( 'stream-added', [{ stream }] );
stream: stream
}] );
} }
} }
} }
@ -158,7 +166,7 @@ export class Room {
let participant = new Participant( this.openVidu, false, this, msg ); let participant = new Participant( this.openVidu, false, this, msg );
let pid = participant.getID(); let pid = participant.getId();
if ( !( pid in this.participants ) ) { if ( !( pid in this.participants ) ) {
console.log( "New participant to participants list with id", pid ); console.log( "New participant to participants list with id", pid );
this.participants[pid] = participant; this.participants[pid] = participant;
@ -274,10 +282,10 @@ export class Room {
return; return;
} }
console.log( 'Lost connection in room ' + this.name ); console.log( 'Lost connection in room ' + this.id );
let room = this.name; let room = this.id;
if ( room !== undefined ) { if ( room !== undefined ) {
this.ee.emitEvent( 'lost-connection', [{room}] ); this.ee.emitEvent( 'lost-connection', [{ room }] );
} else { } else {
console.error( 'Room undefined when lost connection' ); console.error( 'Room undefined when lost connection' );
} }
@ -324,7 +332,7 @@ export class Room {
} }
} }
disconnect( stream ) { disconnect( stream: Stream ) {
let participant = stream.getParticipant(); let participant = stream.getParticipant();
if ( !participant ) { if ( !participant ) {
@ -332,12 +340,12 @@ export class Room {
return; return;
} }
delete this.participants[participant.getID()]; delete this.participants[participant.getId()];
participant.dispose(); participant.dispose();
if ( participant === this.localParticipant ) { if ( participant === this.localParticipant ) {
console.log( "Unpublishing my media (I'm " + participant.getID() + ")" ); console.log( "Unpublishing my media (I'm " + participant.getId() + ")" );
delete this.localParticipant; delete this.localParticipant;
this.openVidu.sendRequest( 'unpublishVideo', function( error, response ) { this.openVidu.sendRequest( 'unpublishVideo', function( error, response ) {
if ( error ) { if ( error ) {
@ -349,15 +357,15 @@ export class Room {
} else { } else {
console.log( "Unsubscribing from " + stream.getGlobalID() ); console.log( "Unsubscribing from " + stream.getId() );
this.openVidu.sendRequest( 'unsubscribeFromVideo', { this.openVidu.sendRequest( 'unsubscribeFromVideo', {
sender: stream.getGlobalID() sender: stream.getId()
}, },
function( error, response ) { function( error, response ) {
if ( error ) { if ( error ) {
console.error( error ); console.error( error );
} else { } else {
console.info( "Unsubscribed correctly from " + stream.getGlobalID() ); console.info( "Unsubscribed correctly from " + stream.getId() );
} }
}); });
} }

61
openvidu-browser/src/main/resources/static/ts/Stream.ts
View File

@ -6,8 +6,8 @@
* stream.hasAudio(); stream.hasVideo(); stream.hasData(); * stream.hasAudio(); stream.hasVideo(); stream.hasData();
*/ */
import { Participant } from './Participant'; import { Participant } from './Participant';
import { Room } from './Room'; import { Session } from './Session';
import { OpenVidu } from './OpenVidu'; import { OpenVidu, Callback } from './OpenVidu';
declare type JQuery = any; declare type JQuery = any;
declare var $: JQuery; declare var $: JQuery;
@ -54,7 +54,7 @@ export class Stream {
private dataChannel: boolean; private dataChannel: boolean;
private dataChannelOpened = false; private dataChannelOpened = false;
constructor( private openVidu: OpenVidu, private local: boolean, private room: Room, options: StreamOptions ) { constructor( private openVidu: OpenVidu, private local: boolean, private room: Session, options: StreamOptions ) {
if ( options.id ) { if ( options.id ) {
this.id = options.id; this.id = options.id;
@ -98,7 +98,7 @@ export class Stream {
} }
getChannelName() { getChannelName() {
return this.getGlobalID() + '_' + this.chanId++; return this.getId() + '_' + this.chanId++;
} }
@ -146,7 +146,7 @@ export class Stream {
showSpinner( spinnerParentId: string ) { showSpinner( spinnerParentId: string ) {
let progress = document.createElement( 'div' ); let progress = document.createElement( 'div' );
progress.id = 'progress-' + this.getGlobalID(); progress.id = 'progress-' + this.getId();
progress.style.background = "center transparent url('img/spinner.gif') no-repeat"; progress.style.background = "center transparent url('img/spinner.gif') no-repeat";
let spinnerParent = document.getElementById( spinnerParentId ); let spinnerParent = document.getElementById( spinnerParentId );
if(spinnerParent){ if(spinnerParent){
@ -155,14 +155,14 @@ export class Stream {
} }
hideSpinner( spinnerId?: string ) { hideSpinner( spinnerId?: string ) {
spinnerId = ( spinnerId === undefined ) ? this.getGlobalID() : spinnerId; spinnerId = ( spinnerId === undefined ) ? this.getId() : spinnerId;
$( jq( 'progress-' + spinnerId ) ).hide(); $( jq( 'progress-' + spinnerId ) ).hide();
} }
playOnlyVideo( parentElement, thumbnailId ) { playOnlyVideo( parentElement, thumbnailId ) {
this.video = document.createElement( 'video' ); this.video = document.createElement( 'video' );
this.video.id = 'native-video-' + this.getGlobalID(); this.video.id = 'native-video-' + this.getId();
this.video.autoplay = true; this.video.autoplay = true;
this.video.controls = false; this.video.controls = false;
if ( this.wrStream ) { if ( this.wrStream ) {
@ -170,7 +170,7 @@ export class Stream {
$( jq( thumbnailId ) ).show(); $( jq( thumbnailId ) ).show();
this.hideSpinner(); this.hideSpinner();
} else { } else {
console.log( "No wrStream yet for", this.getGlobalID() ); console.log( "No wrStream yet for", this.getId() );
} }
this.videoElements.push( { this.videoElements.push( {
@ -198,7 +198,7 @@ export class Stream {
let container = document.createElement( 'div' ); let container = document.createElement( 'div' );
container.className = "participant"; container.className = "participant";
container.id = this.getGlobalID(); container.id = this.getId();
let thumbnail = document.getElementById( thumbnailId ); let thumbnail = document.getElementById( thumbnailId );
if(thumbnail){ if(thumbnail){
thumbnail.appendChild( container ); thumbnail.appendChild( container );
@ -208,21 +208,21 @@ export class Stream {
let name = document.createElement( 'div' ); let name = document.createElement( 'div' );
container.appendChild( name ); container.appendChild( name );
let userName = this.getGlobalID().replace( '_webcam', '' ); let userName = this.getId().replace( '_webcam', '' );
if ( userName.length >= 16 ) { if ( userName.length >= 16 ) {
userName = userName.substring( 0, 16 ) + "..."; userName = userName.substring( 0, 16 ) + "...";
} }
name.appendChild( document.createTextNode( userName ) ); name.appendChild( document.createTextNode( userName ) );
name.id = "name-" + this.getGlobalID(); name.id = "name-" + this.getId();
name.className = "name"; name.className = "name";
name.title = this.getGlobalID(); name.title = this.getId();
this.showSpinner( thumbnailId ); this.showSpinner( thumbnailId );
return this.playOnlyVideo( container, thumbnailId ); return this.playOnlyVideo( container, thumbnailId );
} }
getID() { getIdInParticipant() {
return this.id; return this.id;
} }
@ -230,15 +230,15 @@ export class Stream {
return this.participant; return this.participant;
} }
getGlobalID() { getId() {
if ( this.participant ) { if ( this.participant ) {
return this.participant.getID() + "_" + this.id; return this.participant.getId() + "_" + this.id;
} else { } else {
return this.id + "_webcam"; return this.id + "_webcam";
} }
} }
init() { requestCameraAccess(callback: Callback<Stream>) {
this.participant.addStream( this ); this.participant.addStream( this );
@ -256,21 +256,22 @@ export class Stream {
getUserMedia( constraints, userStream => { getUserMedia( constraints, userStream => {
this.wrStream = userStream; this.wrStream = userStream;
this.ee.emitEvent( 'access-accepted', null ); callback(undefined, this);
}, error => { }, error => {
console.error( "Access denied", error ); console.error( "Access denied", error );
this.ee.emitEvent( 'access-denied', null ); callback(error, undefined);
}); });
} }
publishVideoCallback( error, sdpOfferParam, wp ) { publishVideoCallback( error, sdpOfferParam, wp ) {
if ( error ) { if ( error ) {
return console.error( "(publish) SDP offer error: " return console.error( "(publish) SDP offer error: "
+ JSON.stringify( error ) ); + JSON.stringify( error ) );
} }
console.log( "Sending SDP offer to publish as " console.log( "Sending SDP offer to publish as "
+ this.getGlobalID(), sdpOfferParam ); + this.getId(), sdpOfferParam );
this.openVidu.sendRequest( "publishVideo", { this.openVidu.sendRequest( "publishVideo", {
sdpOffer: sdpOfferParam, sdpOffer: sdpOfferParam,
@ -293,9 +294,9 @@ export class Stream {
+ JSON.stringify( error ) ); + JSON.stringify( error ) );
} }
console.log( "Sending SDP offer to subscribe to " console.log( "Sending SDP offer to subscribe to "
+ this.getGlobalID(), sdpOfferParam ); + this.getId(), sdpOfferParam );
this.openVidu.sendRequest( "receiveVideoFrom", { this.openVidu.sendRequest( "receiveVideoFrom", {
sender: this.getGlobalID(), sender: this.getId(),
sdpOffer: sdpOfferParam sdpOffer: sdpOfferParam
}, ( error, response ) => { }, ( error, response ) => {
if ( error ) { if ( error ) {
@ -359,7 +360,7 @@ export class Stream {
}); });
} }
console.log( "Waiting for SDP offer to be generated (" console.log( "Waiting for SDP offer to be generated ("
+ ( this.local ? "local" : "remote" ) + " peer: " + this.getGlobalID() + ")" ); + ( this.local ? "local" : "remote" ) + " peer: " + this.getId() + ")" );
} }
publish() { publish() {
@ -389,9 +390,9 @@ export class Stream {
type: 'answer', type: 'answer',
sdp: sdpAnswer, sdp: sdpAnswer,
}); });
console.log( this.getGlobalID() + ": set peer connection with recvd SDP answer", console.log( this.getId() + ": set peer connection with recvd SDP answer",
sdpAnswer ); sdpAnswer );
let participantId = this.getGlobalID(); let participantId = this.getId();
let pc = this.wp.peerConnection; let pc = this.wp.peerConnection;
pc.setRemoteDescription( answer, () => { pc.setRemoteDescription( answer, () => {
// Avoids to subscribe to your own stream remotely // Avoids to subscribe to your own stream remotely
@ -423,9 +424,9 @@ export class Stream {
let video = videoElement.video; let video = videoElement.video;
video.src = URL.createObjectURL( this.wrStream ); video.src = URL.createObjectURL( this.wrStream );
video.onplay = () => { video.onplay = () => {
console.log( this.getGlobalID() + ': ' + 'Video playing' ); console.log( this.getId() + ': ' + 'Video playing' );
$( jq( thumbnailId ) ).show(); $( jq( thumbnailId ) ).show();
this.hideSpinner( this.getGlobalID() ); this.hideSpinner( this.getId() );
}; };
} }
this.room.emitEvent( 'stream-subscribed', [{ this.room.emitEvent( 'stream-subscribed', [{
@ -433,7 +434,7 @@ export class Stream {
}] ); }] );
} }
}, error => { }, error => {
console.error( this.getGlobalID() + ": Error setting SDP to the peer connection: " console.error( this.getId() + ": Error setting SDP to the peer connection: "
+ JSON.stringify( error ) ); + JSON.stringify( error ) );
}); });
} }
@ -456,7 +457,7 @@ export class Stream {
this.speechEvent.stop(); this.speechEvent.stop();
} }
console.log( this.getGlobalID() + ": Stream '" + this.id + "' unpublished" ); console.log( this.getId() + ": Stream '" + this.id + "' unpublished" );
} }
dispose() { dispose() {
@ -471,7 +472,7 @@ export class Stream {
this.videoElements.forEach( ve => disposeElement( ve ) ); this.videoElements.forEach( ve => disposeElement( ve ) );
disposeElement( "progress-" + this.getGlobalID() ); disposeElement( "progress-" + this.getId() );
if ( this.wp ) { if ( this.wp ) {
this.wp.dispose(); this.wp.dispose();
@ -490,6 +491,6 @@ export class Stream {
this.speechEvent.stop(); this.speechEvent.stop();
} }
console.log( this.getGlobalID() + ": Stream '" + this.id + "' disposed" ); console.log( this.getId() + ": Stream '" + this.id + "' disposed" );
} }
} }

238
openvidu-browser/src/main/resources/static/ts_js/OpenVidu.js
View File

@ -14,15 +14,15 @@
* limitations under the License. * limitations under the License.
* *
*/ */
System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) { System.register("OpenVidu", ["Session", "Stream"], function(exports_1, context_1) {
"use strict"; "use strict";
var __moduleName = context_1 && context_1.id; var __moduleName = context_1 && context_1.id;
var Room_1, Stream_1; var Session_1, Stream_1;
var OpenVidu; var OpenVidu;
return { return {
setters:[ setters:[
function (Room_1_1) { function (Session_1_1) {
Room_1 = Room_1_1; Session_1 = Session_1_1;
}, },
function (Stream_1_1) { function (Stream_1_1) {
Stream_1 = Stream_1_1; Stream_1 = Stream_1_1;
@ -31,9 +31,14 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
OpenVidu = (function () { OpenVidu = (function () {
function OpenVidu(wsUri) { function OpenVidu(wsUri) {
this.wsUri = wsUri; this.wsUri = wsUri;
if (this.wsUri.charAt(wsUri.length - 1) != '/') {
this.wsUri = '/';
}
this.wsUri += 'room';
this.session = new Session_1.Session(this);
} }
OpenVidu.prototype.getRoom = function () { OpenVidu.prototype.getRoom = function () {
return this.room; return this.session;
}; };
OpenVidu.prototype.connect = function (callback) { OpenVidu.prototype.connect = function (callback) {
this.callback = callback; this.callback = callback;
@ -69,7 +74,7 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
}; };
OpenVidu.prototype.customNotification = function (params) { OpenVidu.prototype.customNotification = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.emitEvent("custom-message-received", [{ params: params }]); this.session.emitEvent("custom-message-received", [{ params: params }]);
} }
}; };
OpenVidu.prototype.connectCallback = function (error) { OpenVidu.prototype.connectCallback = function (error) {
@ -81,7 +86,7 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
} }
}; };
OpenVidu.prototype.isRoomAvailable = function () { OpenVidu.prototype.isRoomAvailable = function () {
if (this.room !== undefined && this.room instanceof Room_1.Room) { if (this.session !== undefined && this.session instanceof Session_1.Session) {
return true; return true;
} }
else { else {
@ -92,7 +97,7 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
OpenVidu.prototype.disconnectCallback = function () { OpenVidu.prototype.disconnectCallback = function () {
console.log('Websocket connection lost'); console.log('Websocket connection lost');
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onLostConnection(); this.session.onLostConnection();
} }
else { else {
alert('Connection error. Please reload page.'); alert('Connection error. Please reload page.');
@ -101,7 +106,7 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
OpenVidu.prototype.reconnectingCallback = function () { OpenVidu.prototype.reconnectingCallback = function () {
console.log('Websocket connection lost (reconnecting)'); console.log('Websocket connection lost (reconnecting)');
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onLostConnection(); this.session.onLostConnection();
} }
else { else {
alert('Connection error. Please reload page.'); alert('Connection error. Please reload page.');
@ -112,42 +117,42 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
}; };
OpenVidu.prototype.onParticipantJoined = function (params) { OpenVidu.prototype.onParticipantJoined = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onParticipantJoined(params); this.session.onParticipantJoined(params);
} }
}; };
OpenVidu.prototype.onParticipantPublished = function (params) { OpenVidu.prototype.onParticipantPublished = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onParticipantPublished(params); this.session.onParticipantPublished(params);
} }
}; };
OpenVidu.prototype.onParticipantLeft = function (params) { OpenVidu.prototype.onParticipantLeft = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onParticipantLeft(params); this.session.onParticipantLeft(params);
} }
}; };
OpenVidu.prototype.onParticipantEvicted = function (params) { OpenVidu.prototype.onParticipantEvicted = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onParticipantEvicted(params); this.session.onParticipantEvicted(params);
} }
}; };
OpenVidu.prototype.onNewMessage = function (params) { OpenVidu.prototype.onNewMessage = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onNewMessage(params); this.session.onNewMessage(params);
} }
}; };
OpenVidu.prototype.iceCandidateEvent = function (params) { OpenVidu.prototype.iceCandidateEvent = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.recvIceCandidate(params); this.session.recvIceCandidate(params);
} }
}; };
OpenVidu.prototype.onRoomClosed = function (params) { OpenVidu.prototype.onRoomClosed = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onRoomClosed(params); this.session.onRoomClosed(params);
} }
}; };
OpenVidu.prototype.onMediaError = function (params) { OpenVidu.prototype.onMediaError = function (params) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.onMediaError(params); this.session.onMediaError(params);
} }
}; };
OpenVidu.prototype.setRpcParams = function (params) { OpenVidu.prototype.setRpcParams = function (params) {
@ -172,28 +177,36 @@ System.register("OpenVidu", ["Room", "Stream"], function(exports_1, context_1) {
}; };
OpenVidu.prototype.close = function (forced) { OpenVidu.prototype.close = function (forced) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.leave(forced, this.jsonRpcClient); this.session.leave(forced, this.jsonRpcClient);
} }
}; };
; ;
OpenVidu.prototype.disconnectParticipant = function (stream) { OpenVidu.prototype.disconnectParticipant = function (stream) {
if (this.isRoomAvailable()) { if (this.isRoomAvailable()) {
this.room.disconnect(stream); this.session.disconnect(stream);
} }
}; };
OpenVidu.prototype.Stream = function (room, options) { OpenVidu.prototype.getCamera = function (options) {
if (this.camera) {
return this.camera;
}
options = options || { options = options || {
audio: true, audio: true,
video: true, video: true,
data: true data: true
}; };
options.participant = room.getLocalParticipant(); options.participant = this.session.getLocalParticipant();
return new Stream_1.Stream(this, true, room, options); this.camera = new Stream_1.Stream(this, true, this.session, options);
return this.camera;
}; };
; ;
OpenVidu.prototype.Room = function (options) { OpenVidu.prototype.joinSession = function (options, callback) {
var room = new Room_1.Room(this, options); var _this = this;
return room; this.session.configure(options);
this.session.connect();
this.session.addEventListener('room-connected', function (roomEvent) { return callback(undefined, _this.session); });
this.session.addEventListener('error-room', function (error) { return callback(error); });
return this.session;
}; };
; ;
//CHAT //CHAT
@ -238,6 +251,7 @@ System.register("Participant", ["Stream"], function(exports_2, context_2) {
this.options = options; this.options = options;
this.streams = {}; this.streams = {};
this.streamsOpts = []; this.streamsOpts = [];
if (options) {
this.id = options.id; this.id = options.id;
if (options.streams) { if (options.streams) {
for (var _i = 0, _a = options.streams; _i < _a.length; _i++) { for (var _i = 0, _a = options.streams; _i < _a.length; _i++) {
@ -256,6 +270,7 @@ System.register("Participant", ["Stream"], function(exports_2, context_2) {
this.streamsOpts.push(streamOpts); this.streamsOpts.push(streamOpts);
} }
} }
}
console.log("New " + (local ? "local " : "remote ") + "participant " + this.id console.log("New " + (local ? "local " : "remote ") + "participant " + this.id
+ ", streams opts: ", this.streamsOpts); + ", streams opts: ", this.streamsOpts);
} }
@ -263,8 +278,8 @@ System.register("Participant", ["Stream"], function(exports_2, context_2) {
this.id = newId; this.id = newId;
}; };
Participant.prototype.addStream = function (stream) { Participant.prototype.addStream = function (stream) {
this.streams[stream.getID()] = stream; this.streams[stream.getIdInParticipant()] = stream;
this.room.getStreams()[stream.getID()] = stream; this.room.getStreams()[stream.getIdInParticipant()] = stream;
}; };
Participant.prototype.getStreams = function () { Participant.prototype.getStreams = function () {
return this.streams; return this.streams;
@ -274,13 +289,13 @@ System.register("Participant", ["Stream"], function(exports_2, context_2) {
this.streams[key].dispose(); this.streams[key].dispose();
} }
}; };
Participant.prototype.getID = function () { Participant.prototype.getId = function () {
return this.id; return this.id;
}; };
Participant.prototype.sendIceCandidate = function (candidate) { Participant.prototype.sendIceCandidate = function (candidate) {
console.debug((this.local ? "Local" : "Remote"), "candidate for", this.getID(), JSON.stringify(candidate)); console.debug((this.local ? "Local" : "Remote"), "candidate for", this.getId(), JSON.stringify(candidate));
this.openVidu.sendRequest("onIceCandidate", { this.openVidu.sendRequest("onIceCandidate", {
endpointName: this.getID(), endpointName: this.getId(),
candidate: candidate.candidate, candidate: candidate.candidate,
sdpMid: candidate.sdpMid, sdpMid: candidate.sdpMid,
sdpMLineIndex: candidate.sdpMLineIndex sdpMLineIndex: candidate.sdpMLineIndex
@ -353,7 +368,7 @@ System.register("Stream", [], function(exports_3, context_3) {
return this.localMirrored; return this.localMirrored;
}; };
Stream.prototype.getChannelName = function () { Stream.prototype.getChannelName = function () {
return this.getGlobalID() + '_' + this.chanId++; return this.getId() + '_' + this.chanId++;
}; };
Stream.prototype.isDataChannelEnabled = function () { Stream.prototype.isDataChannelEnabled = function () {
return this.dataChannel; return this.dataChannel;
@ -390,7 +405,7 @@ System.register("Stream", [], function(exports_3, context_3) {
}; };
Stream.prototype.showSpinner = function (spinnerParentId) { Stream.prototype.showSpinner = function (spinnerParentId) {
var progress = document.createElement('div'); var progress = document.createElement('div');
progress.id = 'progress-' + this.getGlobalID(); progress.id = 'progress-' + this.getId();
progress.style.background = "center transparent url('img/spinner.gif') no-repeat"; progress.style.background = "center transparent url('img/spinner.gif') no-repeat";
var spinnerParent = document.getElementById(spinnerParentId); var spinnerParent = document.getElementById(spinnerParentId);
if (spinnerParent) { if (spinnerParent) {
@ -398,12 +413,12 @@ System.register("Stream", [], function(exports_3, context_3) {
} }
}; };
Stream.prototype.hideSpinner = function (spinnerId) { Stream.prototype.hideSpinner = function (spinnerId) {
spinnerId = (spinnerId === undefined) ? this.getGlobalID() : spinnerId; spinnerId = (spinnerId === undefined) ? this.getId() : spinnerId;
$(jq('progress-' + spinnerId)).hide(); $(jq('progress-' + spinnerId)).hide();
}; };
Stream.prototype.playOnlyVideo = function (parentElement, thumbnailId) { Stream.prototype.playOnlyVideo = function (parentElement, thumbnailId) {
this.video = document.createElement('video'); this.video = document.createElement('video');
this.video.id = 'native-video-' + this.getGlobalID(); this.video.id = 'native-video-' + this.getId();
this.video.autoplay = true; this.video.autoplay = true;
this.video.controls = false; this.video.controls = false;
if (this.wrStream) { if (this.wrStream) {
@ -412,7 +427,7 @@ System.register("Stream", [], function(exports_3, context_3) {
this.hideSpinner(); this.hideSpinner();
} }
else { else {
console.log("No wrStream yet for", this.getGlobalID()); console.log("No wrStream yet for", this.getId());
} }
this.videoElements.push({ this.videoElements.push({
thumb: thumbnailId, thumb: thumbnailId,
@ -435,7 +450,7 @@ System.register("Stream", [], function(exports_3, context_3) {
Stream.prototype.playThumbnail = function (thumbnailId) { Stream.prototype.playThumbnail = function (thumbnailId) {
var container = document.createElement('div'); var container = document.createElement('div');
container.className = "participant"; container.className = "participant";
container.id = this.getGlobalID(); container.id = this.getId();
var thumbnail = document.getElementById(thumbnailId); var thumbnail = document.getElementById(thumbnailId);
if (thumbnail) { if (thumbnail) {
thumbnail.appendChild(container); thumbnail.appendChild(container);
@ -443,32 +458,32 @@ System.register("Stream", [], function(exports_3, context_3) {
this.elements.push(container); this.elements.push(container);
var name = document.createElement('div'); var name = document.createElement('div');
container.appendChild(name); container.appendChild(name);
var userName = this.getGlobalID().replace('_webcam', ''); var userName = this.getId().replace('_webcam', '');
if (userName.length >= 16) { if (userName.length >= 16) {
userName = userName.substring(0, 16) + "..."; userName = userName.substring(0, 16) + "...";
} }
name.appendChild(document.createTextNode(userName)); name.appendChild(document.createTextNode(userName));
name.id = "name-" + this.getGlobalID(); name.id = "name-" + this.getId();
name.className = "name"; name.className = "name";
name.title = this.getGlobalID(); name.title = this.getId();
this.showSpinner(thumbnailId); this.showSpinner(thumbnailId);
return this.playOnlyVideo(container, thumbnailId); return this.playOnlyVideo(container, thumbnailId);
}; };
Stream.prototype.getID = function () { Stream.prototype.getIdInParticipant = function () {
return this.id; return this.id;
}; };
Stream.prototype.getParticipant = function () { Stream.prototype.getParticipant = function () {
return this.participant; return this.participant;
}; };
Stream.prototype.getGlobalID = function () { Stream.prototype.getId = function () {
if (this.participant) { if (this.participant) {
return this.participant.getID() + "_" + this.id; return this.participant.getId() + "_" + this.id;
} }
else { else {
return this.id + "_webcam"; return this.id + "_webcam";
} }
}; };
Stream.prototype.init = function () { Stream.prototype.requestCameraAccess = function (callback) {
var _this = this; var _this = this;
this.participant.addStream(this); this.participant.addStream(this);
var constraints = { var constraints = {
@ -484,10 +499,10 @@ System.register("Stream", [], function(exports_3, context_3) {
}; };
getUserMedia(constraints, function (userStream) { getUserMedia(constraints, function (userStream) {
_this.wrStream = userStream; _this.wrStream = userStream;
_this.ee.emitEvent('access-accepted', null); callback(undefined, _this);
}, function (error) { }, function (error) {
console.error("Access denied", error); console.error("Access denied", error);
_this.ee.emitEvent('access-denied', null); callback(error, undefined);
}); });
}; };
Stream.prototype.publishVideoCallback = function (error, sdpOfferParam, wp) { Stream.prototype.publishVideoCallback = function (error, sdpOfferParam, wp) {
@ -497,7 +512,7 @@ System.register("Stream", [], function(exports_3, context_3) {
+ JSON.stringify(error)); + JSON.stringify(error));
} }
console.log("Sending SDP offer to publish as " console.log("Sending SDP offer to publish as "
+ this.getGlobalID(), sdpOfferParam); + this.getId(), sdpOfferParam);
this.openVidu.sendRequest("publishVideo", { this.openVidu.sendRequest("publishVideo", {
sdpOffer: sdpOfferParam, sdpOffer: sdpOfferParam,
doLoopback: this.displayMyRemote() || false doLoopback: this.displayMyRemote() || false
@ -520,9 +535,9 @@ System.register("Stream", [], function(exports_3, context_3) {
+ JSON.stringify(error)); + JSON.stringify(error));
} }
console.log("Sending SDP offer to subscribe to " console.log("Sending SDP offer to subscribe to "
+ this.getGlobalID(), sdpOfferParam); + this.getId(), sdpOfferParam);
this.openVidu.sendRequest("receiveVideoFrom", { this.openVidu.sendRequest("receiveVideoFrom", {
sender: this.getGlobalID(), sender: this.getId(),
sdpOffer: sdpOfferParam sdpOffer: sdpOfferParam
}, function (error, response) { }, function (error, response) {
if (error) { if (error) {
@ -585,7 +600,7 @@ System.register("Stream", [], function(exports_3, context_3) {
}); });
} }
console.log("Waiting for SDP offer to be generated (" console.log("Waiting for SDP offer to be generated ("
+ (this.local ? "local" : "remote") + " peer: " + this.getGlobalID() + ")"); + (this.local ? "local" : "remote") + " peer: " + this.getId() + ")");
}; };
Stream.prototype.publish = function () { Stream.prototype.publish = function () {
// FIXME: Throw error when stream is not local // FIXME: Throw error when stream is not local
@ -606,8 +621,8 @@ System.register("Stream", [], function(exports_3, context_3) {
type: 'answer', type: 'answer',
sdp: sdpAnswer, sdp: sdpAnswer,
}); });
console.log(this.getGlobalID() + ": set peer connection with recvd SDP answer", sdpAnswer); console.log(this.getId() + ": set peer connection with recvd SDP answer", sdpAnswer);
var participantId = this.getGlobalID(); var participantId = this.getId();
var pc = this.wp.peerConnection; var pc = this.wp.peerConnection;
pc.setRemoteDescription(answer, function () { pc.setRemoteDescription(answer, function () {
// Avoids to subscribe to your own stream remotely // Avoids to subscribe to your own stream remotely
@ -635,9 +650,9 @@ System.register("Stream", [], function(exports_3, context_3) {
var video = videoElement.video; var video = videoElement.video;
video.src = URL.createObjectURL(_this.wrStream); video.src = URL.createObjectURL(_this.wrStream);
video.onplay = function () { video.onplay = function () {
console.log(_this.getGlobalID() + ': ' + 'Video playing'); console.log(_this.getId() + ': ' + 'Video playing');
$(jq(thumbnailId)).show(); $(jq(thumbnailId)).show();
_this.hideSpinner(_this.getGlobalID()); _this.hideSpinner(_this.getId());
}; };
}; };
for (var _i = 0, _a = _this.videoElements; _i < _a.length; _i++) { for (var _i = 0, _a = _this.videoElements; _i < _a.length; _i++) {
@ -649,7 +664,7 @@ System.register("Stream", [], function(exports_3, context_3) {
}]); }]);
} }
}, function (error) { }, function (error) {
console.error(_this.getGlobalID() + ": Error setting SDP to the peer connection: " console.error(_this.getId() + ": Error setting SDP to the peer connection: "
+ JSON.stringify(error)); + JSON.stringify(error));
}); });
}; };
@ -670,7 +685,7 @@ System.register("Stream", [], function(exports_3, context_3) {
if (this.speechEvent) { if (this.speechEvent) {
this.speechEvent.stop(); this.speechEvent.stop();
} }
console.log(this.getGlobalID() + ": Stream '" + this.id + "' unpublished"); console.log(this.getId() + ": Stream '" + this.id + "' unpublished");
}; };
Stream.prototype.dispose = function () { Stream.prototype.dispose = function () {
function disposeElement(element) { function disposeElement(element) {
@ -680,7 +695,7 @@ System.register("Stream", [], function(exports_3, context_3) {
} }
this.elements.forEach(function (e) { return disposeElement(e); }); this.elements.forEach(function (e) { return disposeElement(e); });
this.videoElements.forEach(function (ve) { return disposeElement(ve); }); this.videoElements.forEach(function (ve) { return disposeElement(ve); });
disposeElement("progress-" + this.getGlobalID()); disposeElement("progress-" + this.getId());
if (this.wp) { if (this.wp) {
this.wp.dispose(); this.wp.dispose();
} }
@ -697,7 +712,7 @@ System.register("Stream", [], function(exports_3, context_3) {
if (this.speechEvent) { if (this.speechEvent) {
this.speechEvent.stop(); this.speechEvent.stop();
} }
console.log(this.getGlobalID() + ": Stream '" + this.id + "' disposed"); console.log(this.getId() + ": Stream '" + this.id + "' disposed");
}; };
return Stream; return Stream;
}()); }());
@ -705,35 +720,38 @@ System.register("Stream", [], function(exports_3, context_3) {
} }
} }
}); });
System.register("Room", ["Participant"], function(exports_4, context_4) { System.register("Session", ["Participant"], function(exports_4, context_4) {
"use strict"; "use strict";
var __moduleName = context_4 && context_4.id; var __moduleName = context_4 && context_4.id;
var Participant_1; var Participant_1;
var Room; var Session;
return { return {
setters:[ setters:[
function (Participant_1_1) { function (Participant_1_1) {
Participant_1 = Participant_1_1; Participant_1 = Participant_1_1;
}], }],
execute: function() { execute: function() {
Room = (function () { Session = (function () {
function Room(openVidu, options) { function Session(openVidu) {
this.openVidu = openVidu; this.openVidu = openVidu;
this.options = options;
this.ee = new EventEmitter(); this.ee = new EventEmitter();
this.streams = {}; this.streams = {};
this.participants = {}; this.participants = {};
this.participantsSpeaking = []; this.participantsSpeaking = [];
this.connected = false; this.connected = false;
this.name = options.room; this.localParticipant = new Participant_1.Participant(this.openVidu, true, this);
}
Session.prototype.configure = function (options) {
this.options = options;
this.id = options.sessionId;
this.subscribeToStreams = options.subscribeToStreams || true; this.subscribeToStreams = options.subscribeToStreams || true;
this.updateSpeakerInterval = options.updateSpeakerInterval || 1500; this.updateSpeakerInterval = options.updateSpeakerInterval || 1500;
this.thresholdSpeaker = options.thresholdSpeaker || -50; this.thresholdSpeaker = options.thresholdSpeaker || -50;
this.localParticipant.setId(options.participantId);
this.activateUpdateMainSpeaker(); this.activateUpdateMainSpeaker();
this.localParticipant = new Participant_1.Participant(openVidu, true, this, { id: options.user }); this.participants[options.participantId] = this.localParticipant;
this.participants[options.user] = this.localParticipant; };
} Session.prototype.activateUpdateMainSpeaker = function () {
Room.prototype.activateUpdateMainSpeaker = function () {
var _this = this; var _this = this;
setInterval(function () { setInterval(function () {
if (_this.participantsSpeaking.length > 0) { if (_this.participantsSpeaking.length > 0) {
@ -743,20 +761,20 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
} }
}, this.updateSpeakerInterval); }, this.updateSpeakerInterval);
}; };
Room.prototype.getLocalParticipant = function () { Session.prototype.getLocalParticipant = function () {
return this.localParticipant; return this.localParticipant;
}; };
Room.prototype.addEventListener = function (eventName, listener) { Session.prototype.addEventListener = function (eventName, listener) {
this.ee.addListener(eventName, listener); this.ee.addListener(eventName, listener);
}; };
Room.prototype.emitEvent = function (eventName, eventsArray) { Session.prototype.emitEvent = function (eventName, eventsArray) {
this.ee.emitEvent(eventName, eventsArray); this.ee.emitEvent(eventName, eventsArray);
}; };
Room.prototype.connect = function () { Session.prototype.connect = function () {
var _this = this; var _this = this;
var joinParams = { var joinParams = {
user: this.options.user, user: this.options.participantId,
room: this.options.room, room: this.options.sessionId,
dataChannels: false dataChannels: false
}; };
if (this.localParticipant) { if (this.localParticipant) {
@ -783,7 +801,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
var length_1 = exParticipants.length; var length_1 = exParticipants.length;
for (var i = 0; i < length_1; i++) { for (var i = 0; i < length_1; i++) {
var participant = new Participant_1.Participant(_this.openVidu, false, _this, exParticipants[i]); var participant = new Participant_1.Participant(_this.openVidu, false, _this, exParticipants[i]);
_this.participants[participant.getID()] = participant; _this.participants[participant.getId()] = participant;
roomEvent.participants.push(participant); roomEvent.participants.push(participant);
var streams = participant.getStreams(); var streams = participant.getStreams();
for (var key in streams) { for (var key in streams) {
@ -794,15 +812,21 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
} }
} }
_this.ee.emitEvent('room-connected', [roomEvent]); _this.ee.emitEvent('room-connected', [roomEvent]);
if (_this.subscribeToStreams) {
for (var _i = 0, _a = roomEvent.streams; _i < _a.length; _i++) {
var stream = _a[_i];
_this.ee.emitEvent('stream-added', [{ stream: stream }]);
}
}
} }
}); });
}; };
Room.prototype.subscribe = function (stream) { Session.prototype.subscribe = function (stream) {
stream.subscribe(); stream.subscribe();
}; };
Room.prototype.onParticipantPublished = function (options) { Session.prototype.onParticipantPublished = function (options) {
var participant = new Participant_1.Participant(this.openVidu, false, this, options); var participant = new Participant_1.Participant(this.openVidu, false, this, options);
var pid = participant.getID(); var pid = participant.getId();
if (!(pid in this.participants)) { if (!(pid in this.participants)) {
console.info("Publisher not found in participants list by its id", pid); console.info("Publisher not found in participants list by its id", pid);
} }
@ -811,23 +835,19 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
} }
//replacing old participant (this one has streams) //replacing old participant (this one has streams)
this.participants[pid] = participant; this.participants[pid] = participant;
this.ee.emitEvent('participant-published', [{ this.ee.emitEvent('participant-published', [{ participant: participant }]);
participant: participant
}]);
var streams = participant.getStreams(); var streams = participant.getStreams();
for (var key in streams) { for (var key in streams) {
var stream = streams[key]; var stream = streams[key];
if (this.subscribeToStreams) { if (this.subscribeToStreams) {
stream.subscribe(); stream.subscribe();
this.ee.emitEvent('stream-added', [{ this.ee.emitEvent('stream-added', [{ stream: stream }]);
stream: stream
}]);
} }
} }
}; };
Room.prototype.onParticipantJoined = function (msg) { Session.prototype.onParticipantJoined = function (msg) {
var participant = new Participant_1.Participant(this.openVidu, false, this, msg); var participant = new Participant_1.Participant(this.openVidu, false, this, msg);
var pid = participant.getID(); var pid = participant.getId();
if (!(pid in this.participants)) { if (!(pid in this.participants)) {
console.log("New participant to participants list with id", pid); console.log("New participant to participants list with id", pid);
this.participants[pid] = participant; this.participants[pid] = participant;
@ -842,7 +862,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
participant: participant participant: participant
}]); }]);
}; };
Room.prototype.onParticipantLeft = function (msg) { Session.prototype.onParticipantLeft = function (msg) {
var participant = this.participants[msg.name]; var participant = this.participants[msg.name];
if (participant !== undefined) { if (participant !== undefined) {
delete this.participants[msg.name]; delete this.participants[msg.name];
@ -864,13 +884,13 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
} }
}; };
; ;
Room.prototype.onParticipantEvicted = function (msg) { Session.prototype.onParticipantEvicted = function (msg) {
this.ee.emitEvent('participant-evicted', [{ this.ee.emitEvent('participant-evicted', [{
localParticipant: this.localParticipant localParticipant: this.localParticipant
}]); }]);
}; };
; ;
Room.prototype.onNewMessage = function (msg) { Session.prototype.onNewMessage = function (msg) {
console.log("New message: " + JSON.stringify(msg)); console.log("New message: " + JSON.stringify(msg));
var room = msg.room; var room = msg.room;
var user = msg.user; var user = msg.user;
@ -886,7 +906,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
console.error("User undefined in new message:", msg); console.error("User undefined in new message:", msg);
} }
}; };
Room.prototype.recvIceCandidate = function (msg) { Session.prototype.recvIceCandidate = function (msg) {
var candidate = { var candidate = {
candidate: msg.candidate, candidate: msg.candidate,
sdpMid: msg.sdpMid, sdpMid: msg.sdpMid,
@ -913,7 +933,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
_loop_2(key); _loop_2(key);
} }
}; };
Room.prototype.onRoomClosed = function (msg) { Session.prototype.onRoomClosed = function (msg) {
console.log("Room closed: " + JSON.stringify(msg)); console.log("Room closed: " + JSON.stringify(msg));
var room = msg.room; var room = msg.room;
if (room !== undefined) { if (room !== undefined) {
@ -925,13 +945,13 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
console.error("Room undefined in on room closed", msg); console.error("Room undefined in on room closed", msg);
} }
}; };
Room.prototype.onLostConnection = function () { Session.prototype.onLostConnection = function () {
if (!this.connected) { if (!this.connected) {
console.warn('Not connected to room, ignoring lost connection notification'); console.warn('Not connected to room, ignoring lost connection notification');
return; return;
} }
console.log('Lost connection in room ' + this.name); console.log('Lost connection in room ' + this.id);
var room = this.name; var room = this.id;
if (room !== undefined) { if (room !== undefined) {
this.ee.emitEvent('lost-connection', [{ room: room }]); this.ee.emitEvent('lost-connection', [{ room: room }]);
} }
@ -939,7 +959,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
console.error('Room undefined when lost connection'); console.error('Room undefined when lost connection');
} }
}; };
Room.prototype.onMediaError = function (params) { Session.prototype.onMediaError = function (params) {
console.error("Media error: " + JSON.stringify(params)); console.error("Media error: " + JSON.stringify(params));
var error = params.error; var error = params.error;
if (error) { if (error) {
@ -954,7 +974,7 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
/* /*
* forced means the user was evicted, no need to send the 'leaveRoom' request * forced means the user was evicted, no need to send the 'leaveRoom' request
*/ */
Room.prototype.leave = function (forced, jsonRpcClient) { Session.prototype.leave = function (forced, jsonRpcClient) {
forced = !!forced; forced = !!forced;
console.log("Leaving room (forced=" + forced + ")"); console.log("Leaving room (forced=" + forced + ")");
if (this.connected && !forced) { if (this.connected && !forced) {
@ -976,16 +996,16 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
} }
} }
}; };
Room.prototype.disconnect = function (stream) { Session.prototype.disconnect = function (stream) {
var participant = stream.getParticipant(); var participant = stream.getParticipant();
if (!participant) { if (!participant) {
console.error("Stream to disconnect has no participant", stream); console.error("Stream to disconnect has no participant", stream);
return; return;
} }
delete this.participants[participant.getID()]; delete this.participants[participant.getId()];
participant.dispose(); participant.dispose();
if (participant === this.localParticipant) { if (participant === this.localParticipant) {
console.log("Unpublishing my media (I'm " + participant.getID() + ")"); console.log("Unpublishing my media (I'm " + participant.getId() + ")");
delete this.localParticipant; delete this.localParticipant;
this.openVidu.sendRequest('unpublishVideo', function (error, response) { this.openVidu.sendRequest('unpublishVideo', function (error, response) {
if (error) { if (error) {
@ -997,26 +1017,26 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
}); });
} }
else { else {
console.log("Unsubscribing from " + stream.getGlobalID()); console.log("Unsubscribing from " + stream.getId());
this.openVidu.sendRequest('unsubscribeFromVideo', { this.openVidu.sendRequest('unsubscribeFromVideo', {
sender: stream.getGlobalID() sender: stream.getId()
}, function (error, response) { }, function (error, response) {
if (error) { if (error) {
console.error(error); console.error(error);
} }
else { else {
console.info("Unsubscribed correctly from " + stream.getGlobalID()); console.info("Unsubscribed correctly from " + stream.getId());
} }
}); });
} }
}; };
Room.prototype.getStreams = function () { Session.prototype.getStreams = function () {
return this.streams; return this.streams;
}; };
Room.prototype.addParticipantSpeaking = function (participantId) { Session.prototype.addParticipantSpeaking = function (participantId) {
this.participantsSpeaking.push(participantId); this.participantsSpeaking.push(participantId);
}; };
Room.prototype.removeParticipantSpeaking = function (participantId) { Session.prototype.removeParticipantSpeaking = function (participantId) {
var pos = -1; var pos = -1;
for (var i = 0; i < this.participantsSpeaking.length; i++) { for (var i = 0; i < this.participantsSpeaking.length; i++) {
if (this.participantsSpeaking[i] == participantId) { if (this.participantsSpeaking[i] == participantId) {
@ -1028,20 +1048,20 @@ System.register("Room", ["Participant"], function(exports_4, context_4) {
this.participantsSpeaking.splice(pos, 1); this.participantsSpeaking.splice(pos, 1);
} }
}; };
return Room; return Session;
}()); }());
exports_4("Room", Room); exports_4("Session", Session);
} }
} }
}); });
System.register("Main", ["Room", "Participant", "Stream", "OpenVidu"], function(exports_5, context_5) { System.register("Main", ["Session", "Participant", "Stream", "OpenVidu"], function(exports_5, context_5) {
"use strict"; "use strict";
var __moduleName = context_5 && context_5.id; var __moduleName = context_5 && context_5.id;
return { return {
setters:[ setters:[
function (Room_2_1) { function (Session_2_1) {
exports_5({ exports_5({
"Room": Room_2_1["Room"] "Session": Session_2_1["Session"]
}); });
}, },
function (Participant_2_1) { function (Participant_2_1) {

2
openvidu-browser/src/main/resources/static/ts_js/OpenVidu.js.map
View File

File diff suppressed because one or more lines are too long

10
openvidu-testapp/src/main/resources/static/index.html
View File

@ -18,7 +18,7 @@
<script src="./js/stats.js"></script> <script src="./js/stats.js"></script>
<script> <script>
System.import('Main').then(function(m){ Main = m; }, console.error.bind(console)); System.import('Main').then(function(m){ OpenVidu = m.OpenVidu; }, console.error.bind(console));
</script> </script>
</head> </head>
@ -27,13 +27,13 @@
<div id="wrapper"> <div id="wrapper">
<div id="join" class="animate join"> <div id="join" class="animate join">
<h1>Join a Room</h1> <h1>Join a Room</h1>
<form onsubmit="register(); return false;" accept-charset="UTF-8"> <form onsubmit="joinRoom(); return false;" accept-charset="UTF-8">
<p> <p>
<input type="text" name="name" value="" id="name" <input type="text" name="user" value="" id="userId"
placeholder="Username" required> placeholder="User" required>
</p> </p>
<p> <p>
<input type="text" name="room" value="" id="roomName" <input type="text" name="room" value="" id="roomId"
placeholder="Room" required> placeholder="Room" required>
</p> </p>
<p class="submit"> <p class="submit">

83
openvidu-testapp/src/main/resources/static/js/testapp.js
View File

@ -15,15 +15,15 @@
* *
*/ */
var openVidu; var openVidu;
var room; var session;
window.onload = function() { window.onload = function() {
console = new Console('console', console); console = new Console('console', console);
} }
function playVideo(stream) { function addVideoTag(stream) {
var elementId = "video-" + stream.getGlobalID(); var elementId = "video-" + stream.getId();
var div = document.createElement('div'); var div = document.createElement('div');
div.setAttribute("id", elementId); div.setAttribute("id", elementId);
document.getElementById("participants").appendChild(div); document.getElementById("participants").appendChild(div);
@ -32,69 +32,69 @@ function playVideo(stream) {
// Check color // Check color
var videoTag = document.getElementById("native-" + elementId); var videoTag = document.getElementById("native-" + elementId);
var userId = stream.getGlobalID(); var userId = stream.getId();
var canvas = document.createElement('CANVAS'); var canvas = document.createElement('CANVAS');
checkColor(videoTag, canvas, userId); checkColor(videoTag, canvas, userId);
} }
function register() { function removeVideoTag(stream){
var userId = document.getElementById('name').value; var elementId = "video-" + stream.getId();
var roomId = document.getElementById('roomName').value; var element = document.getElementById(elementId);
if (element) {
element.parentNode.removeChild(element);
}
}
var wsUri = 'wss://' + location.host + '/room'; function joinRoom() {
openVidu = new Main.OpenVidu(wsUri); var sessionId = document.getElementById('roomId').value;
var participantId = document.getElementById('userId').value;
openVidu = new OpenVidu('wss://' + location.host + '/');
openVidu.connect(function(error, openVidu) { openVidu.connect(function(error, openVidu) {
if (error) if (error)
return console.log(error); return console.log(error);
room = openVidu.Room({ var camera = openVidu.getCamera();
room : roomId,
user : userId,
subscribeToStreams : true
});
var camera = openVidu.Stream(room); camera.requestCameraAccess(function(error, camera) {
camera.addEventListener("access-accepted", function() { if (error)
return console.log(error);
room.addEventListener("room-connected", function(roomEvent) { var sessionOptions = {
sessionId : sessionId,
participantId : participantId
}
openVidu.joinSession(sessionOptions, function(error, session) {
if (error)
return console.log(error);
document.getElementById('room-header').innerText = 'ROOM \"' document.getElementById('room-header').innerText = 'ROOM \"'
+ room.name + '\"'; + session.name + '\"';
document.getElementById('join').style.display = 'none'; document.getElementById('join').style.display = 'none';
document.getElementById('room').style.display = 'block'; document.getElementById('room').style.display = 'block';
addVideoTag(camera);
camera.publish(); camera.publish();
var streams = roomEvent.streams; session.addEventListener("stream-added", function(streamEvent) {
for (var i = 0; i < streams.length; i++) { addVideoTag(streamEvent.stream);
playVideo(streams[i]);
}
}); });
room.addEventListener("stream-added", function(streamEvent) { session.addEventListener("stream-removed", function(streamEvent) {
playVideo(streamEvent.stream); removeVideoTag(streamEvent.stream);
}); });
room.addEventListener("stream-removed", function(streamEvent) {
var element = document.getElementById("video-"
+ streamEvent.stream.getGlobalID());
if (element !== undefined) {
element.parentNode.removeChild(element);
}
}); });
playVideo(camera);
room.connect();
}); });
camera.init();
}); });
} }
@ -103,15 +103,6 @@ function leaveRoom() {
document.getElementById('join').style.display = 'block'; document.getElementById('join').style.display = 'block';
document.getElementById('room').style.display = 'none'; document.getElementById('room').style.display = 'none';
var streams = room.getStreams();
for (var index in streams) {
var stream = streams[index];
var element = document.getElementById("video-" + stream.getGlobalID());
if (element) {
element.parentNode.removeChild(element);
}
}
openVidu.close(); openVidu.close();
} }