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

TokBox Tutorial 100% compatible

pull/3/head
pabloFuente 2017-04-12 11:45:08 +02:00
parent 471fca15ac
commit 9f41599afd
7 changed files with 203 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,9 +58,7 @@ export class OpenVidu {
console.log("Error accessing the camera");
}
else {
this.camera.playOnlyVideo(parentId, null);
this.camera.isReady = true;
this.camera.emitStreamReadyEvent();
this.cameraReady(camera!, parentId);
}
});
return this.camera;
@ -70,7 +68,7 @@ export class OpenVidu {
callback(error);
}
else {
this.camera.playOnlyVideo(parentId, null);
this.cameraReady(camera!, parentId);
callback(undefined);
}
});
@ -78,6 +76,13 @@ export class OpenVidu {
}
}
cameraReady(camera: Stream, parentId: string) {
this.camera = camera;
this.camera.playOnlyVideo(parentId, null);
this.camera.isReady = true;
this.camera.emitStreamReadyEvent();
}
initPublisher(cameraOptions: any, callback) {
console.log("Publisher initialized!");
@ -286,7 +291,11 @@ export class OpenVidu {
options = options || {
audio: true,
video: true,
data: true
data: true,
mediaConstraints: {
audio: true,
video: { width: { ideal: 1280 } }
}
}
options.participant = this.session.getLocalParticipant();

2
openvidu-browser/src/main/resources/ts/OpenVidu/Stream.ts
View File

@ -434,7 +434,7 @@ export class Stream {
if (this.isReady) {
this.initWebRtcPeer(this.publishVideoCallback);
} else {
this.addEventListener('stream-ready', streamEvent => {
this.ee.once('stream-ready', streamEvent => {
this.publish();
});
}

19
openvidu-browser/src/main/resources/ts/OpenViduTokBox/OpenViduTokBox.ts
View File

@ -38,8 +38,23 @@ export class OpenViduTokBox {
}
}
initPublisher(parentId: string, cameraOptions: any): PublisherTokBox {
return new PublisherTokBox(this.openVidu.initPublisherTagged(parentId, cameraOptions));
initPublisher(parentId: string, cameraOptions: any): PublisherTokBox;
initPublisher(parentId: string, cameraOptions: any, callback: any): PublisherTokBox;
initPublisher(parentId: string, cameraOptions: any, callback?): PublisherTokBox {
if (!("audio" in cameraOptions && "data" in cameraOptions && "mediaConstraints" in cameraOptions &&
"video" in cameraOptions && (Object.keys(cameraOptions).length === 4))) {
cameraOptions = {
audio: true,
video: true,
data: true,
mediaConstraints: {
audio: true,
video: { width: { ideal: 1280 } }
}
}
}
return new PublisherTokBox(this.openVidu.initPublisherTagged(parentId, cameraOptions, callback));
}
}

8
openvidu-browser/src/main/resources/ts/OpenViduTokBox/PublisherTokBox.ts
View File

@ -17,4 +17,12 @@ export class PublisherTokBox {
this.stream = stream;
}
publishAudio(value: boolean) {
this.stream.getWebRtcPeer().audioEnabled = value;
}
publishVideo(value: boolean) {
this.stream.getWebRtcPeer().videoEnabled = value;
}
}

4
openvidu-sample-app/src/main/resources/frontend/src/app/components/video-session/video-session.component.html
View File

@ -5,5 +5,5 @@
<md-icon class="right-btn" (click)="toggleLocalAudio()" [title]="'Toggle audio'">{{audioIcon}}</md-icon>
<h1>{{lesson?.title}}</h1>
</div>
<div id="local-stream"></div>
<div id="remote-streams"></div>
<div id="publisher"></div>
<div id="subscriber"></div>

82
openvidu-sample-app/src/main/resources/frontend/src/app/components/video-session/video-session.component.ts
View File

@ -18,13 +18,12 @@ export class VideoSessionComponent implements OnInit {
OV: OpenViduTokBox;
session: SessionTokBox;
publisher: PublisherTokBox;
sessionId: string;
token: string;
cameraOptions: any;
localParentId: string = 'local-stream';
remoteParentId: string = 'remote-streams';
localVideoActivated: boolean;
localAudioActivated: boolean;
@ -45,29 +44,37 @@ export class VideoSessionComponent implements OnInit {
// 1) Initialize OpenVidu and your Session
this.OV = new OpenViduTokBox("wss://" + location.hostname + ":8443/");
this.session = this.OV.initSession(this.sessionId);
this.session = this.OV.initSession("apikey", this.sessionId);
// 2) Specify the actions when events take place
this.session.on('streamCreated', (event) => {
console.warn("Stream created:");
console.warn(event.stream);
this.session.subscribe(event.stream, this.remoteParentId);
this.session.subscribe(event.stream, 'subscriber', {
insertMode: 'append',
width: '100%',
height: '100%'
});
});
// 3) Connect to the session
this.session.connect(this.token, (error) => {
if (!error) {
// 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so
let publisher = this.OV.initPublisher(this.localParentId, this.cameraOptions);
// 5) Publish your stream
this.session.publish(publisher);
}
else {
return console.log("There was an error: " + error);
}
// If the connection is successful, initialize a publisher and publish to the session
if (!error) {
// 4) Get your own camera stream with the desired resolution and publish it, only if the user is supposed to do so
this.publisher = this.OV.initPublisher('publisher', {
insertMode: 'append',
width: '100%',
height: '100%'
});
// 5) Publish your stream
this.session.publish(this.publisher);
} else {
console.log('There was an error connecting to the session:', error.code, error.message);
}
});
}
@ -142,6 +149,51 @@ export class VideoSessionComponent implements OnInit {
content.style.overflow = scroll;
}
toggleLocalVideo() {
this.localVideoActivated = !this.localVideoActivated;
this.publisher.publishVideo(this.localVideoActivated);
this.videoIcon = this.localVideoActivated ? 'videocam' : 'videocam_off';
}
toggleLocalAudio() {
this.localAudioActivated = !this.localAudioActivated;
this.publisher.publishAudio(this.localAudioActivated);
this.audioIcon = this.localAudioActivated ? 'mic' : 'mic_off';
}
toggleFullScreen() {
let document: any = window.document;
let fs = document.getElementsByTagName('html')[0];
if (!document.fullscreenElement &&
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement) {
console.log("enter FULLSCREEN!");
this.fullscreenIcon = 'fullscreen_exit';
if (fs.requestFullscreen) {
fs.requestFullscreen();
} else if (fs.msRequestFullscreen) {
fs.msRequestFullscreen();
} else if (fs.mozRequestFullScreen) {
fs.mozRequestFullScreen();
} else if (fs.webkitRequestFullscreen) {
fs.webkitRequestFullscreen();
}
} else {
console.log("exit FULLSCREEN!");
this.fullscreenIcon = 'fullscreen';
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
exitFullScreen() {
let document: any = window.document;
let fs = document.getElementsByTagName('html')[0];

8
openvidu-sample-app/src/main/resources/frontend/src/styles.css
View File

@ -66,21 +66,21 @@ md-icon:hover {
display: inline-block;
}
#local-stream {
#publisher {
position: absolute;
width: 100%;
}
#local-stream video {
#publisher video {
width: 100%;
}
#remote-streams {
#subscriber {
position: absolute;
bottom: 0;
}
#remote-streams video {
#subscriber video {
width: 350px;
}