
Security News
Knip Hits 500 Releases with v5.62.0, Improving TypeScript Config Detection and Plugin Integrations
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.
ngx-webrtc
Advanced tools
> :fire: **Important** > This package is currently under development and the api is unstable.
:fire: Important
This package is currently under development and the api is unstable.
Full featured example client with group video chats, screen sharing and more: https://github.com/lotterfriends/ngx-webrtc/tree/main/apps/demo-video-chat-client
To install this library, run:
$ npm install ngx-webrtc --save
Add library to your Angular AppModule
:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import your library
import { NgxWebrtcModule } from 'ngx-webrtc';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Specify your library as an import
NgxWebrtcModule.forRoot({
userIdentifier: 'id'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
:bulb: Note: Normally you communicate over a connection layer to establish a peer connection between two devices. This is a simple example of when two connection objects can communicate directly with each other.
<button (click)="initConnection()">start</button>
<video id="videoStreamNodePeer1" playsinline #videoStreamNodePeer1></video>
<video id="videoStreamNodePeer2" playsinline #videoStreamNodePeer2></video>
import { Component, ElementRef, ViewChild } from '@angular/core';
import { CallService, PeerConnectionClientSettings, StreamService } from 'ngx-webrtc';
@Component({
selector: 'ngx-webrtc-root',
templateUrl: './app.component.html',
styles: []
})
export class AppComponent {
@ViewChild('videoStreamNodePeer1', { static: false }) videoStreamNodePeer1!: ElementRef;
@ViewChild('videoStreamNodePeer2', { static: false }) videoStreamNodePeer2!: ElementRef;
constructor(
private callService: CallService,
private streamService: StreamService
) {}
async initConnection() {
const stream = await this.streamService.tryGetUserMedia();
const settings: PeerConnectionClientSettings = {
peerConnectionConfig: {
iceServers: this.callService.defaultServers,
}
};
const pclient1 = await this.callService.createPeerClient(settings);
const pclient2 = await this.callService.createPeerClient(settings);
pclient1.addStream(stream);
pclient2.addStream(stream);
pclient1.signalingMessage.subscribe(m => {
pclient2.receiveSignalingMessage(m);
});
pclient2.signalingMessage.subscribe(m => {
pclient1.receiveSignalingMessage(m);
});
pclient1.remoteStreamAdded.subscribe(stream => {
this.streamService.setStreamInNode(this.videoStreamNodePeer1.nativeElement, stream.track);
});
pclient2.remoteStreamAdded.subscribe(stream => {
this.streamService.setStreamInNode(this.videoStreamNodePeer2.nativeElement, stream.track);
});
pclient2.startAsCallee();
pclient1.startAsCaller();
}
}
the directive add there attached node the class enabled/disabled dependent on there state. This directives are available:
Usage in templates
<button ngxWebrtcToggleAudioSelf class="toggle-audio">
<span class="on-enabled">Mute Audio</span>
<span class="on-disabled">Unmute Audio</span>
</button>
<button ngxWebrtcToggleVideoSelf class="toggle-video">
<span class="on-enabled">Mute Video</span>
<span class="on-disabled">Unmute Video</span>
</button>
<button ngxWebrtcShareScreen>
<span class="on-enabled">Stop Share Screen</span>
<span class="on-disabled">Share Screen</span>
</button>
<ul>
<li *ngFor="let user of callService.users$ | async">
<span *ngIf="user.hasMic || user.hasCam">
<button *ngIf="user.hasMic" [ngxWebrtcToggleAudioUser]="user">mute for all</button>
<button *ngIf="user.hasCam" [ngxWebrtcToggleVideoUser]="user">disable video for all</button>
</span>
</li>
</ul>
You need a link layer so that remote devices can communicate with each other. The communication takes place via events such as See Candidates, Send Connection Data, etc. The communication can be done e.g. via WebSockets, SSE, Polling, or similar. If you want to connect more than two candidates you have to make sure that the events for one candidate only arrive at this candidate, you can realize this with server and client side filters or private channels.
It must be ensured that old, already processed messages are not processed a 2nd time.
The library provides a CallService in which the status of the connected users is noted. The status contains, for example, whether a user has a camera and this is currently active. To determine a user, a user identifier is passed to the library.
• Const
NGX_WEBRTC_STORAGE: InjectionToken
<"localStorage"
| "sessionStorage"
>
• Const
NGX_WEBRTC_STORAGE_PREFIX: InjectionToken
<string
>
lib/ngx-webrtc-storage-prefix.ts:3
Run nx test ngx-webrtc
to execute the unit tests.
FAQs
> :fire: **Important** > This package is currently under development and the api is unstable.
The npm package ngx-webrtc receives a total of 6 weekly downloads. As such, ngx-webrtc popularity was classified as not popular.
We found that ngx-webrtc 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.
Security News
Knip hits 500 releases with v5.62.0, refining TypeScript config detection and updating plugins as monthly npm downloads approach 12M.
Security News
The EU Cyber Resilience Act is prompting compliance requests that open source maintainers may not be obligated or equipped to handle.
Security News
Crates.io adds Trusted Publishing support, enabling secure GitHub Actions-based crate releases without long-lived API tokens.