Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
angular-openvidu
Advanced tools
Readme
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.
openvidu-template
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 |
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 |
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 . |
First, follow the installation steps at this README. Then continue with these steps:
Add openvidu-template
with the required properties to your current app template:
<openvidu-template
[wsUrl]="wsUrl" [sessionId]="sessionId" [participantId]="participantId">
...
</openvidu-template>
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.
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.
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>
FAQs
Simple, robust, OpenVidu room videochat component for Angular
The npm package angular-openvidu receives a total of 23 weekly downloads. As such, angular-openvidu popularity was classified as not popular.
We found that angular-openvidu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.