mirror of https://github.com/OpenVidu/openvidu.git
openvidu-testapp main functions working 100%
pabloFuente
parent
8e6b5d0985
commit
ea78fe073a
|
|
@ -4,6 +4,5 @@
|
|||
}
|
||||
|
||||
main {
|
||||
padding: 50px;
|
||||
padding-top: 30px;
|
||||
padding: 30px 50px 30px 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,5 +29,9 @@ th {
|
|||
}
|
||||
|
||||
app-openvidu-instance {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin: 15px 25px 0 0;
|
||||
background-color: #797979;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
md-card {
|
||||
background-color: rgba(77, 77, 77, 0.05);
|
||||
margin: 20px 0 5px 0;
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
md-card.session-card {
|
||||
padding: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.session-form md-form-field {
|
||||
width: 130px;
|
||||
}
|
||||
|
|
@ -27,14 +32,52 @@ md-card {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#join-session-btn {
|
||||
#join-btn {
|
||||
margin: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
#leave-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
margin-top: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
md-radio-button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.video-container {
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
.session-card-header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.session-card-inner {
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.session-card-inner .session-title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.session-card-inner .session-actions {
|
||||
float: right;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.session-actions button {
|
||||
outline: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.session-actions button:hover {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,69 +1,81 @@
|
|||
<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start stretch">
|
||||
<div>
|
||||
<md-card class="join-card">
|
||||
|
||||
<div fxFlex="noshrink">
|
||||
<md-card class="join-card">
|
||||
|
||||
<md-card-content>
|
||||
<form class="session-form">
|
||||
<md-card-content>
|
||||
<form class="session-form">
|
||||
|
||||
<div>
|
||||
<md-form-field style="margin-right: 10px">
|
||||
<input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName">
|
||||
<input mdInput placeholder="Session name" name="sessionName" [(ngModel)]="sessionName" [disabled]="session">
|
||||
</md-form-field>
|
||||
|
||||
<md-form-field>
|
||||
<input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData">
|
||||
<input mdInput placeholder="Client data" name="clientData" [(ngModel)]="clientData" [disabled]="session">
|
||||
</md-form-field>
|
||||
</div>
|
||||
|
||||
<div class="inner-card" fxLayout="row" fxLayoutWrap="wrap">
|
||||
<div>
|
||||
<button id="join-btn" md-button (click)="joinSession()" [disabled]="session">JOIN</button>
|
||||
<md-checkbox [(ngModel)]="subscribeTo" name="subscribeTo" [disabled]="session">Subscribe</md-checkbox>
|
||||
<md-checkbox [(ngModel)]="publishTo" name="publishTo" (click)="toggleRadio()" [disabled]="session">Publish</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div fxFlex="60">
|
||||
<div class="inner-card" fxLayout="row" fxLayoutAlign="start start">
|
||||
|
||||
<div fxFlex="60">
|
||||
<div>
|
||||
<h4>Send</h4>
|
||||
<div>
|
||||
<h4>Send...</h4>
|
||||
<div>
|
||||
<md-checkbox id="send-audio-check" [(ngModel)]="sendAudio" name="sendAudio" class="input-right">Audio</md-checkbox>
|
||||
<md-checkbox id="send-video-check" [(ngModel)]="sendVideo" name="sendVideo" (click)="toggleRadio()">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 5px;">
|
||||
<h4>Enter with<br>active...</h4>
|
||||
<div>
|
||||
<md-checkbox id="active-audio-check" [(ngModel)]="activeAudio" name="activeAudio" [checked]="sendAudio" [disabled]="!sendAudio"
|
||||
class="input-right">Audio</md-checkbox>
|
||||
<md-checkbox id="active-video-check" [(ngModel)]="activeVideo" name="activeVideo" [checked]="sendVideo" [disabled]="!sendVideo">Video</md-checkbox>
|
||||
</div>
|
||||
<md-checkbox name="sendAudio" [(ngModel)]="sendAudio" [disabled]="!publishTo || session" [checked]="sendAudio && publishTo">Audio</md-checkbox>
|
||||
<md-checkbox name="sendVideo" [(ngModel)]="sendVideo" [disabled]="!publishTo || session" [checked]="sendVideo && publishTo"
|
||||
(click)="toggleRadio()">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxFlex="40">
|
||||
<md-radio-group [(ngModel)]="optionVideo" name="optionVideo" [disabled]="!sendVideo">
|
||||
<md-radio-button id="send-video-radio" value="video" [checked]="sendVideo || sendVideoRadio">Video</md-radio-button>
|
||||
<md-radio-button id="send-screen-radio" value="screen" [checked]="sendVideo && !sendVideoRadio" class="input-right">Screen</md-radio-button>
|
||||
</md-radio-group>
|
||||
<div style="padding-top: 5px;">
|
||||
<h4>Enter active</h4>
|
||||
<div>
|
||||
<md-checkbox name="activeAudio" [(ngModel)]="activeAudio" [disabled]="!sendAudio || !publishTo || session" [checked]="activeAudio && sendAudio && publishTo">Audio</md-checkbox>
|
||||
<md-checkbox name="activeVideo" [(ngModel)]="activeVideo" [disabled]="!sendVideo || !publishTo || session" [checked]="activeVideo && sendVideo && publishTo">Video</md-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</md-card-content>
|
||||
<div fxFlex="40">
|
||||
<md-radio-group [(ngModel)]="optionVideo" [disabled]="!sendVideo || !publishTo || session" [ngModelOptions]="{standalone: true}">
|
||||
<div>
|
||||
<md-radio-button value="video" [checked]="publishTo && sendVideo">Video</md-radio-button>
|
||||
</div>
|
||||
<div>
|
||||
<md-radio-button value="screen" [checked]="publishTo && sendVideo && optionVideo==='screen'">Screen</md-radio-button>
|
||||
</div>
|
||||
</md-radio-group>
|
||||
<md-checkbox class="subscribe-remote-check" name="subscribeToRemote" [(ngModel)]="subscribeToRemote" [disabled]="(!sendAudio && !sendVideo) || !publishTo || session"
|
||||
[checked]="(sendAudio || sendVideo) && publishTo && subscribeToRemote">Subscribe<br>to remote</md-checkbox>
|
||||
</div>
|
||||
|
||||
<md-card-actions>
|
||||
<button id="join-session-btn" md-button (click)="joinSession()" [disabled]="session">JOIN SESSION</button>
|
||||
</md-card-actions>
|
||||
</div>
|
||||
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div *ngIf="session" fxFlex>
|
||||
<md-card>
|
||||
{{sessionName}}
|
||||
<button md-mini-fab color="warn" (click)="leaveSession()">
|
||||
<md-icon class="md-24" aria-label="Leave icon">clear</md-icon>
|
||||
</button>
|
||||
<div *ngIf="session.connection" fxLayout>
|
||||
<div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div>
|
||||
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
|
||||
</div>
|
||||
</md-card>
|
||||
</div>
|
||||
</form>
|
||||
</md-card-content>
|
||||
|
||||
</md-card>
|
||||
</div>
|
||||
|
||||
<div *ngIf="session">
|
||||
<md-card class="session-card">
|
||||
<div class="session-card-header">
|
||||
<div class="session-card-inner">
|
||||
<div class="session-title">{{sessionName}}</div>
|
||||
<div class="session-actions">
|
||||
<button><md-icon class="md-24" aria-label="Mute video button" (click)="toggleVideo()">{{videoIcon}}</md-icon></button>
|
||||
<button><md-icon class="md-24" aria-label="Mute audio button" (click)="toggleAudio()">{{audioIcon}}</md-icon></button>
|
||||
<button><md-icon class="md-24" aria-label="Leave button" (click)="leaveSession()">clear</md-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="session.connection" fxLayout>
|
||||
<div [attr.id]="'local-vid-' + session.connection.connectionId" fxFlex="135px" class="video-container"></div>
|
||||
<div [attr.id]="'remote-vid-' + session.connection.connectionId" fxFlex="270px" class="video-container"></div>
|
||||
</div>
|
||||
</md-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { Component, Input, HostListener, ChangeDetectorRef, OnInit, OnDestroy } from '@angular/core';
|
||||
import { OpenVidu, Session, Subscriber, Stream } from 'openvidu-browser';
|
||||
import { OpenVidu, Session, Subscriber, Publisher, Stream } from 'openvidu-browser';
|
||||
|
||||
declare var $: any;
|
||||
|
||||
|
|
@ -16,12 +16,15 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
@Input()
|
||||
openviduSecret: string;
|
||||
|
||||
subscribeTo = true;
|
||||
publishTo = true;
|
||||
sendAudio = true;
|
||||
sendVideo = true;
|
||||
optionVideo = 'video';
|
||||
activeAudio = true;
|
||||
activeVideo = true;
|
||||
optionVideo = 'video';
|
||||
sendVideoRadio = true;
|
||||
subscribeToRemote = false;
|
||||
|
||||
// Join form
|
||||
clientData: string;
|
||||
|
|
@ -30,6 +33,12 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
// OpenVidu objects
|
||||
OV: OpenVidu;
|
||||
session: Session;
|
||||
publisher: Publisher;
|
||||
|
||||
audioMuted = false;
|
||||
videoMuted = false;
|
||||
audioIcon = 'mic';
|
||||
videoIcon = 'videocam';
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef) {
|
||||
this.generateSessionInfo();
|
||||
|
|
@ -71,12 +80,14 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
|
||||
this.changeDetector.detectChanges();
|
||||
|
||||
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
|
||||
subscriber.on('videoElementCreated', (e) => {
|
||||
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
|
||||
});
|
||||
subscriber.on('videoPlaying', (e) => {
|
||||
});
|
||||
if (this.subscribeTo) {
|
||||
const subscriber: Subscriber = this.session.subscribe(event.stream, 'remote-vid-' + this.session.connection.connectionId);
|
||||
subscriber.on('videoElementCreated', (e) => {
|
||||
this.appendUserData(e.element, subscriber.stream.connection.data, subscriber.stream.connection);
|
||||
});
|
||||
subscriber.on('videoPlaying', (e) => {
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.session.on('streamDestroyed', (event) => {
|
||||
|
|
@ -89,22 +100,32 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
|
||||
this.session.connect(null, this.clientData, (error) => {
|
||||
if (!error) {
|
||||
if (this.publishTo) {
|
||||
|
||||
const publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
|
||||
audio: true,
|
||||
video: true,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
this.audioMuted = !this.activeAudio;
|
||||
this.videoMuted = !this.activeVideo;
|
||||
this.updateAudioIcon();
|
||||
this.updateVideoIcon();
|
||||
|
||||
publisher.on('videoElementCreated', (event) => {
|
||||
this.appendUserData(event.element, this.clientData, null);
|
||||
});
|
||||
this.publisher = OV.initPublisher('local-vid-' + this.session.connection.connectionId, {
|
||||
audio: this.activeAudio,
|
||||
video: this.activeVideo,
|
||||
quality: 'MEDIUM'
|
||||
});
|
||||
|
||||
publisher.on('videoPlaying', (e) => {
|
||||
});
|
||||
this.publisher.on('videoElementCreated', (event) => {
|
||||
});
|
||||
|
||||
this.session.publish(publisher);
|
||||
this.publisher.on('videoPlaying', (e) => {
|
||||
});
|
||||
|
||||
if (this.subscribeToRemote) {
|
||||
this.publisher.subscribeToRemote();
|
||||
}
|
||||
|
||||
this.session.publish(this.publisher);
|
||||
|
||||
}
|
||||
} else {
|
||||
console.log('There was an error connecting to the session:', error.code, error.message);
|
||||
}
|
||||
|
|
@ -118,30 +139,44 @@ export class OpenviduInstanceComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
this.session = null;
|
||||
this.OV = null;
|
||||
this.removeAllUserData();
|
||||
}
|
||||
|
||||
private toggleAudio() {
|
||||
this.publisher.publishAudio(this.audioMuted);
|
||||
this.audioMuted = !this.audioMuted;
|
||||
this.updateAudioIcon();
|
||||
}
|
||||
|
||||
private updateAudioIcon() {
|
||||
this.audioMuted ? this.audioIcon = 'mic_off' : this.audioIcon = 'mic';
|
||||
}
|
||||
|
||||
private toggleVideo() {
|
||||
this.publisher.publishVideo(this.videoMuted);
|
||||
this.videoMuted = !this.videoMuted;
|
||||
this.updateVideoIcon();
|
||||
}
|
||||
|
||||
private updateVideoIcon() {
|
||||
this.videoMuted ? this.videoIcon = 'videocam_off' : this.videoIcon = 'videocam';
|
||||
}
|
||||
|
||||
private appendUserData(videoElement, data, connection): void {
|
||||
/*const dataNode = document.createElement('div');
|
||||
const dataNode = document.createElement('div');
|
||||
dataNode.className = 'data-node';
|
||||
dataNode.id = 'data-' + (connection ? connection.connectionId : data);
|
||||
dataNode.innerHTML = '<p>' + data + '</p>';
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);*/
|
||||
videoElement.parentNode.insertBefore(dataNode, videoElement.nextSibling);
|
||||
}
|
||||
|
||||
private removeUserData(connection): void {
|
||||
/*$('#data-' + connection.connectionId).remove();*/
|
||||
}
|
||||
|
||||
private removeAllUserData() {
|
||||
/*const nicknameElements = $('.data-node');
|
||||
while (nicknameElements[0]) {
|
||||
nicknameElements[0].remove();
|
||||
}*/
|
||||
$('#remote-vid-' + this.session.connection.connectionId).find('#data-' + connection.connectionId).remove();
|
||||
}
|
||||
|
||||
private toggleRadio(): void {
|
||||
this.sendVideoRadio = !this.sendVideo;
|
||||
if (this.publishTo && this.sendVideo) {
|
||||
this.optionVideo = 'video';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ ul {
|
|||
|
||||
video {
|
||||
max-width: 125px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -32,4 +31,29 @@ button {
|
|||
|
||||
.session-form label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-remote-check .mat-checkbox-label {
|
||||
line-height: 15px !important;
|
||||
}
|
||||
|
||||
.video-container video {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.video-container div {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: -46%;
|
||||
margin-top: -5%;
|
||||
}
|
||||
|
||||
.video-container p {
|
||||
background: #ffffff;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
color: #4d4d4d;
|
||||
font-weight: 100;
|
||||
font-size: 14px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue