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

| Name | Type | Optional | Description | |---|---|---|---| | wsUrl | String | required | Websocket URL pointing to your [OpenVidu Server][openvidu-server] | | sessionId | String | required | An id for a session | | participantId | String | required | An id for the current participant joining the session | | micEnabled | Boolean | optional | A boolean to enable/disable the current participant's microphone | | camEnabled | Boolean | optional | A boolean to enable/disable the current participant's camera |

Methods

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

| Name | Params | Description | |---|---|---| | sendMessage | (text: string) | Broadcast a text message to all participants (including the sender) | | leaveRoom | () | Disconnect from the room |

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.

| Name | Params | Description | |---|---|---| | onRoomConnected | ({session: Session}) | triggers when the client has established a session with the server | | onErrorRoom | ({error: any}) | triggers when there's an error, like a "time out" with the server | | onLeaveRoom | No params | triggers when the current user leaves the room | | onErrorMedia | ({error: any}) | triggers when an error occurs while trying to retrieve some media | | onLostConnection | No params | triggers when you can't establish a connection to the server | | onNewMessage | ({session: Session, participant: Participant, message: string}) | triggers when a message from a participant is received | | onParticipantJoined | ({participant: Participant}) | triggers when a participant has joined your room | | onParticipantLeft | ({participant: Participant}) | triggers when a participant has left your room | | onRoomClosed | No params | triggers when the admin closes the room | | onParticipantEvicted | ({participant: Participant}) | triggers when a participant is evicted | | onParticipantPublished | ({participant: Participant}) | triggers when a participant has published | | onStreamAdded | ({stream: Stream}) | triggers when a new stream has been added to the room | | onStreamRemoved | ({stream: Stream}) | triggers when a stream has been removed from the room | | onUpdateMainSpeaker | ({stream: Stream}) | triggers when a participant is set to be the main speaker, based on the audio | | onCustomNotification | (customObject) | triggers when a custom notification from a participant is received | | onServerConnected | No params | triggers when a the client has established a connection with the server | | onErrorServer | ({error: any}) | triggers when the client couldn't establish a connection with the server | | onCameraAccessChange | ({access: boolean, camera?: Stream, error?: any) | triggers when the access to the camera of the client has change. access is true if we have permissions to access the user's camera. If yes then camera will be sent. If not, error will be set with an object Error and camera will be null. |

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>