angular-openvidu v0.8.0

openvidu-template

Table of contents

• About
• Selector
• Properties
• Methods
• Events
• Create your own layout
• Example

About

openvidu-template is a directive which provides most of the logic behind AngularOpenVidu. It exports properties, methods and events to let you implement your own videochat layout.

Selector

• openvidu-template

Properties

Methods

To call these methods, use the exported API named openviduApi.

Events

These events are coming from openvidu-browser, AngularOpenVidu uses them to implement the logic.

These are the events AngularOpenVidu exposes for the user of the module.

Create your own layout

First, follow the installation steps at this README. Then continue with these steps:

1. Add openvidu-template with the required properties to your current app template:

   <openvidu-template
   	[wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId">
   	...
   </openvidu-template>

2. You can now build your template between the openvidu-template tags.

   <openvidu-template
   	[wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId"
   	(onRoomConnected)="myRoomConnectedHandler($event)">
   
   	<mat-toolbar>My app</mat-toolbar>
   
   	<my-custom-stream *ngFor="let s of streams" [stream]="s"></my-custom-stream>
   
   </openvidu-template>

   NOTE:

   When starting to create your own layout, keep in mind that you will need to show streams (videos) of the participants.

   To do this, the clean way is to create a new component to display each stream (with a separate stylesheet).

   You can get a WebRTC URL pointing to the participant's stream like this:

   let videoURL = URL.createObjectURL(this.streamObject.getWrStream())

   To display it, just insert that videoURL as src attribute in an HTML video tag.

   You can take a look at how OpenViduHangoutsComponent does it.

3. Use the openviduApi in your template or in your code to implement your logic. For example:

   <openvidu-template
   	#openviduApi="openviduApi"
   	[wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId"
   	(onRoomConnected)="myRoomConnectedHandler($event)">
   	...
   	<button (click)="openvdiuApi.micEnabled = !openviduApu.micEnabled">
   		<span [hidden]="!openviduApi.micEnabled">Mute mic</span>
   		<span [hidden]="openviduApi.micEnabled">Unmute mic</span>
   	</button>
   	...
   </openvidu-template>

   or

   import { OpenViduDirective } from 'angular-openvidu';
   
   export class MyComponent {
   	...
   	// OpenVidu api
   	@ViewChild('openviduApi') openviduApi: OpenViduDirective;
   
   	toggleMic() {
   		this.openvdiuApi.micEnabled = !this.openviduApu.micEnabled;
   	}
   	...
   }

For a real-world implementation of a custom component, take a look at the source for the OpenViduHangoutsComponent.

Example

This is an example of a template:

<openvidu-template
	#openviduApi="openviduApi"
	[wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId"
	(eventName)="myEventHandler($event)">

	<mat-toolbar>My app</mat-toolbar>

	<my-custom-stream *ngFor="let s of streams" [stream]="s"></my-custom-stream>

	<button (click)="openvdiuApi.micEnabled = !openviduApu.micEnabled">
		<span [hidden]="!openviduApi.micEnabled">Mute mic</span>
		<span [hidden]="openviduApi.micEnabled">Unmute mic</span>
	</button>

</openvidu-template>