ran prettier
This commit is contained in:
@@ -127,12 +127,14 @@ export default class PeerConnection implements IPeerConnectionOperations {
|
||||
this._iceConnectionState.value = peerConnection.iceConnectionState;
|
||||
};
|
||||
|
||||
this._disposables.add(new Disposable(() => {
|
||||
peerConnection.oniceconnectionstatechange = null;
|
||||
peerConnection.onicegatheringstatechange = null;
|
||||
peerConnection.onconnectionstatechange = null;
|
||||
peerConnection.onsignalingstatechange = null;
|
||||
}));
|
||||
this._disposables.add(
|
||||
new Disposable(() => {
|
||||
peerConnection.oniceconnectionstatechange = null;
|
||||
peerConnection.onicegatheringstatechange = null;
|
||||
peerConnection.onconnectionstatechange = null;
|
||||
peerConnection.onsignalingstatechange = null;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private setPeerConnectionEventListeners(peerConnection: RTCPeerConnection): void {
|
||||
@@ -157,10 +159,12 @@ export default class PeerConnection implements IPeerConnectionOperations {
|
||||
peerConnection.onicecandidate = iceCandidateHandler;
|
||||
peerConnection.ontrack = trackHandler;
|
||||
|
||||
this._disposables.add(new Disposable(() => {
|
||||
peerConnection.onicecandidate = null;
|
||||
peerConnection.ontrack = null;
|
||||
}));
|
||||
this._disposables.add(
|
||||
new Disposable(() => {
|
||||
peerConnection.onicecandidate = null;
|
||||
peerConnection.ontrack = null;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private initialize(): void {
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
import type { ICandidateMessage, IAnswerMessage, IOfferMessage, IMessage } from "./messaging/IMessage";
|
||||
import { MessageKind } from "./messaging/MessageKind";
|
||||
import type { ISignalingClient } from "./interfaces/ISignalingClient";
|
||||
import type {ICandidateMessage, IAnswerMessage, IOfferMessage, IMessage} from './messaging/IMessage';
|
||||
import {MessageKind} from './messaging/MessageKind';
|
||||
import type {ISignalingClient} from './interfaces/ISignalingClient';
|
||||
|
||||
export default class SignalingServer implements ISignalingClient {
|
||||
private readonly _webSocket: WebSocket;
|
||||
private readonly _webSocket: WebSocket;
|
||||
|
||||
constructor(webSocket: WebSocket) {
|
||||
this._webSocket = webSocket;
|
||||
}
|
||||
constructor(webSocket: WebSocket) {
|
||||
this._webSocket = webSocket;
|
||||
}
|
||||
|
||||
public on<T>(kind: MessageKind, callback: (message: IMessage<T>) => Promise<void>): void {
|
||||
this._webSocket.addEventListener('message', (event) => {
|
||||
const message = JSON.parse(event.data) as IMessage<T>;
|
||||
public on<T>(kind: MessageKind, callback: (message: IMessage<T>) => Promise<void>): void {
|
||||
this._webSocket.addEventListener('message', event => {
|
||||
const message = JSON.parse(event.data) as IMessage<T>;
|
||||
|
||||
if (message.type === kind) {
|
||||
callback(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (message.type === kind) {
|
||||
callback(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public async sendOffer(offer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const message: IOfferMessage = {
|
||||
type: MessageKind.Offer,
|
||||
payload: offer
|
||||
};
|
||||
public async sendOffer(offer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const message: IOfferMessage = {
|
||||
type: MessageKind.Offer,
|
||||
payload: offer
|
||||
};
|
||||
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
public async sendAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const message: IAnswerMessage = {
|
||||
type: MessageKind.Answer,
|
||||
payload: answer
|
||||
};
|
||||
public async sendAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
|
||||
const message: IAnswerMessage = {
|
||||
type: MessageKind.Answer,
|
||||
payload: answer
|
||||
};
|
||||
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
|
||||
public async sendCandidate(candidate: RTCIceCandidateInit): Promise<void> {
|
||||
const message: ICandidateMessage = {
|
||||
type: MessageKind.Candidate,
|
||||
payload: candidate
|
||||
};
|
||||
public async sendCandidate(candidate: RTCIceCandidateInit): Promise<void> {
|
||||
const message: ICandidateMessage = {
|
||||
type: MessageKind.Candidate,
|
||||
payload: candidate
|
||||
};
|
||||
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
this._webSocket.send(JSON.stringify(message));
|
||||
}
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import type {ILogger} from '@techniker-me/logger';
|
||||
import {LoggerFactory} from '@techniker-me/logger';
|
||||
import {ReadOnlySubject, Subject, type IEvent} from '@techniker-me/tools';
|
||||
import type { IPeerConnectionOperations } from './interfaces/IPeerConnectionOperations';
|
||||
import type { ISignalingClient } from './interfaces/ISignalingClient';
|
||||
import type {IPeerConnectionOperations} from './interfaces/IPeerConnectionOperations';
|
||||
import type {ISignalingClient} from './interfaces/ISignalingClient';
|
||||
|
||||
/**
|
||||
* User class - manages local and remote media streams
|
||||
@@ -10,71 +10,71 @@ import type { ISignalingClient } from './interfaces/ISignalingClient';
|
||||
* Follows Dependency Inversion Principle - depends on abstractions (interfaces)
|
||||
*/
|
||||
export default class User {
|
||||
private readonly _logger: ILogger = LoggerFactory.getLogger('User');
|
||||
private readonly _localVideoElement: HTMLVideoElement;
|
||||
private readonly _remoteVideoElement: HTMLVideoElement;
|
||||
private readonly _peerConnection: IPeerConnectionOperations;
|
||||
private readonly _signalingClient: ISignalingClient;
|
||||
private readonly _mediaStream: Subject<MediaStream | null> = new Subject(null);
|
||||
private readonly _readOnlyMediaStream: ReadOnlySubject<MediaStream | null> = new ReadOnlySubject(this._mediaStream);
|
||||
private readonly _logger: ILogger = LoggerFactory.getLogger('User');
|
||||
private readonly _localVideoElement: HTMLVideoElement;
|
||||
private readonly _remoteVideoElement: HTMLVideoElement;
|
||||
private readonly _peerConnection: IPeerConnectionOperations;
|
||||
private readonly _signalingClient: ISignalingClient;
|
||||
private readonly _mediaStream: Subject<MediaStream | null> = new Subject(null);
|
||||
private readonly _readOnlyMediaStream: ReadOnlySubject<MediaStream | null> = new ReadOnlySubject(this._mediaStream);
|
||||
|
||||
constructor(localVideoElement: HTMLVideoElement, remoteVideoElement: HTMLVideoElement, peerConnection: IPeerConnectionOperations, signalingClient: ISignalingClient) {
|
||||
this._localVideoElement = localVideoElement;
|
||||
this._remoteVideoElement = remoteVideoElement;
|
||||
this._peerConnection = peerConnection;
|
||||
this._signalingClient = signalingClient;
|
||||
this.initialize();
|
||||
}
|
||||
constructor(localVideoElement: HTMLVideoElement, remoteVideoElement: HTMLVideoElement, peerConnection: IPeerConnectionOperations, signalingClient: ISignalingClient) {
|
||||
this._localVideoElement = localVideoElement;
|
||||
this._remoteVideoElement = remoteVideoElement;
|
||||
this._peerConnection = peerConnection;
|
||||
this._signalingClient = signalingClient;
|
||||
this.initialize();
|
||||
}
|
||||
|
||||
get videoElement(): HTMLVideoElement {
|
||||
return this._localVideoElement;
|
||||
}
|
||||
get videoElement(): HTMLVideoElement {
|
||||
return this._localVideoElement;
|
||||
}
|
||||
|
||||
get peerConnection(): IPeerConnectionOperations {
|
||||
return this._peerConnection;
|
||||
}
|
||||
get peerConnection(): IPeerConnectionOperations {
|
||||
return this._peerConnection;
|
||||
}
|
||||
|
||||
get mediaStream(): ReadOnlySubject<MediaStream | null> {
|
||||
return this._readOnlyMediaStream;
|
||||
}
|
||||
get mediaStream(): ReadOnlySubject<MediaStream | null> {
|
||||
return this._readOnlyMediaStream;
|
||||
}
|
||||
|
||||
public async startLocalMedia(): Promise<void> {
|
||||
const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
|
||||
public async startLocalMedia(): Promise<void> {
|
||||
const mediaStream = await navigator.mediaDevices.getUserMedia({audio: true, video: true});
|
||||
|
||||
this._peerConnection.addMediaStream(mediaStream);
|
||||
this._peerConnection.addMediaStream(mediaStream);
|
||||
|
||||
this._mediaStream.value = mediaStream;
|
||||
this._localVideoElement.srcObject = mediaStream;
|
||||
this._logger.info('Local media started');
|
||||
}
|
||||
this._mediaStream.value = mediaStream;
|
||||
this._localVideoElement.srcObject = mediaStream;
|
||||
this._logger.info('Local media started');
|
||||
}
|
||||
|
||||
public async stopLocalMedia(): Promise<void> {
|
||||
this._mediaStream.value?.getTracks().forEach(track => {
|
||||
track.stop();
|
||||
});
|
||||
this._mediaStream.value = null;
|
||||
this._localVideoElement.srcObject = null;
|
||||
}
|
||||
public async stopLocalMedia(): Promise<void> {
|
||||
this._mediaStream.value?.getTracks().forEach(track => {
|
||||
track.stop();
|
||||
});
|
||||
this._mediaStream.value = null;
|
||||
this._localVideoElement.srcObject = null;
|
||||
}
|
||||
|
||||
private initialize(): void {
|
||||
this._peerConnection.on<RTCPeerConnectionIceEvent>('icecandidate', (event: IEvent<RTCPeerConnectionIceEvent>) => {
|
||||
// Only send candidate if it exists (null means ICE gathering is complete)
|
||||
if (event.payload?.candidate) {
|
||||
this._signalingClient.sendCandidate(event.payload.candidate);
|
||||
}
|
||||
});
|
||||
this._peerConnection.on<RTCTrackEvent>('track', (event: IEvent<RTCTrackEvent>) => {
|
||||
if (!event.payload) {
|
||||
return;
|
||||
}
|
||||
private initialize(): void {
|
||||
this._peerConnection.on<RTCPeerConnectionIceEvent>('icecandidate', (event: IEvent<RTCPeerConnectionIceEvent>) => {
|
||||
// Only send candidate if it exists (null means ICE gathering is complete)
|
||||
if (event.payload?.candidate) {
|
||||
this._signalingClient.sendCandidate(event.payload.candidate);
|
||||
}
|
||||
});
|
||||
this._peerConnection.on<RTCTrackEvent>('track', (event: IEvent<RTCTrackEvent>) => {
|
||||
if (!event.payload) {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Track event', event);
|
||||
console.log('Track event', event);
|
||||
|
||||
if (event.payload.streams?.length === 0) {
|
||||
return;
|
||||
}
|
||||
if (event.payload.streams?.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._remoteVideoElement.srcObject = event.payload.streams[0];
|
||||
});
|
||||
}
|
||||
this._remoteVideoElement.srcObject = event.payload.streams[0];
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Caller } from './Caller';
|
||||
import { Callee } from './Callee';
|
||||
import type { ISignalingClient } from '../interfaces/ISignalingClient';
|
||||
import type { IPeerConnectionOperations } from '../interfaces/IPeerConnectionOperations';
|
||||
import { MessageKind } from '../messaging/MessageKind';
|
||||
import type { IMessage } from '../messaging/IMessage';
|
||||
import type { ILogger } from '@techniker-me/logger';
|
||||
import { LoggerFactory } from '@techniker-me/logger';
|
||||
import {Caller} from './Caller';
|
||||
import {Callee} from './Callee';
|
||||
import type {ISignalingClient} from '../interfaces/ISignalingClient';
|
||||
import type {IPeerConnectionOperations} from '../interfaces/IPeerConnectionOperations';
|
||||
import {MessageKind} from '../messaging/MessageKind';
|
||||
import type {IMessage} from '../messaging/IMessage';
|
||||
import type {ILogger} from '@techniker-me/logger';
|
||||
import {LoggerFactory} from '@techniker-me/logger';
|
||||
|
||||
/**
|
||||
* CallCoordinator - coordinates between Caller and Callee roles
|
||||
@@ -20,10 +20,7 @@ export class CallCoordinator {
|
||||
private readonly _peerConnection: IPeerConnectionOperations;
|
||||
private _lastReceivedOffer: RTCSessionDescriptionInit | null = null;
|
||||
|
||||
constructor(
|
||||
signalingClient: ISignalingClient,
|
||||
peerConnection: IPeerConnectionOperations
|
||||
) {
|
||||
constructor(signalingClient: ISignalingClient, peerConnection: IPeerConnectionOperations) {
|
||||
this._signalingClient = signalingClient;
|
||||
this._peerConnection = peerConnection;
|
||||
this._caller = new Caller(signalingClient, peerConnection);
|
||||
@@ -81,40 +78,33 @@ export class CallCoordinator {
|
||||
// Handle incoming offers (when acting as callee)
|
||||
// Only set remote description - don't automatically create/send answer
|
||||
// The answer will be sent when the user clicks the "Send Answer" button
|
||||
this._signalingClient.on<RTCSessionDescriptionInit>(
|
||||
MessageKind.Offer,
|
||||
async (message: IMessage<RTCSessionDescriptionInit>) => {
|
||||
// Only handle offer if we're not the caller (don't have local offer)
|
||||
const currentState = this._peerConnection.getSignalingState();
|
||||
if (currentState === 'have-local-offer' || currentState === 'have-local-pranswer') {
|
||||
this._logger.info('Already have local offer, ignoring incoming offer');
|
||||
return;
|
||||
}
|
||||
|
||||
this._logger.info('Received offer, setting remote description (waiting for manual answer)');
|
||||
this._lastReceivedOffer = message.payload;
|
||||
|
||||
// Only set the remote description - don't create/send answer yet
|
||||
// This allows the callee to manually click "Send Answer" button
|
||||
await this._peerConnection.setRemoteDescription(message.payload);
|
||||
this._signalingClient.on<RTCSessionDescriptionInit>(MessageKind.Offer, async (message: IMessage<RTCSessionDescriptionInit>) => {
|
||||
// Only handle offer if we're not the caller (don't have local offer)
|
||||
const currentState = this._peerConnection.getSignalingState();
|
||||
if (currentState === 'have-local-offer' || currentState === 'have-local-pranswer') {
|
||||
this._logger.info('Already have local offer, ignoring incoming offer');
|
||||
return;
|
||||
}
|
||||
);
|
||||
|
||||
this._logger.info('Received offer, setting remote description (waiting for manual answer)');
|
||||
this._lastReceivedOffer = message.payload;
|
||||
|
||||
// Only set the remote description - don't create/send answer yet
|
||||
// This allows the callee to manually click "Send Answer" button
|
||||
await this._peerConnection.setRemoteDescription(message.payload);
|
||||
});
|
||||
|
||||
// Handle incoming answers (when acting as caller)
|
||||
this._signalingClient.on<RTCSessionDescriptionInit>(
|
||||
MessageKind.Answer,
|
||||
async (message: IMessage<RTCSessionDescriptionInit>) => {
|
||||
// Only handle answer if we're the caller (have local offer)
|
||||
const currentState = this._peerConnection.getSignalingState();
|
||||
if (currentState !== 'have-local-offer' && currentState !== 'have-local-pranswer') {
|
||||
this._logger.info('Not in caller state, ignoring incoming answer');
|
||||
return;
|
||||
}
|
||||
|
||||
this._logger.info('Received answer, acting as caller');
|
||||
await this._caller.handleAnswer(message.payload);
|
||||
this._signalingClient.on<RTCSessionDescriptionInit>(MessageKind.Answer, async (message: IMessage<RTCSessionDescriptionInit>) => {
|
||||
// Only handle answer if we're the caller (have local offer)
|
||||
const currentState = this._peerConnection.getSignalingState();
|
||||
if (currentState !== 'have-local-offer' && currentState !== 'have-local-pranswer') {
|
||||
this._logger.info('Not in caller state, ignoring incoming answer');
|
||||
return;
|
||||
}
|
||||
);
|
||||
|
||||
this._logger.info('Received answer, acting as caller');
|
||||
await this._caller.handleAnswer(message.payload);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ISignalingClient } from '../interfaces/ISignalingClient';
|
||||
import type { IPeerConnectionOperations } from '../interfaces/IPeerConnectionOperations';
|
||||
import type { ILogger } from '@techniker-me/logger';
|
||||
import { LoggerFactory } from '@techniker-me/logger';
|
||||
import type {ISignalingClient} from '../interfaces/ISignalingClient';
|
||||
import type {IPeerConnectionOperations} from '../interfaces/IPeerConnectionOperations';
|
||||
import type {ILogger} from '@techniker-me/logger';
|
||||
import {LoggerFactory} from '@techniker-me/logger';
|
||||
|
||||
/**
|
||||
* Callee class - responsible for receiving and responding to WebRTC calls
|
||||
@@ -13,10 +13,7 @@ export class Callee {
|
||||
private readonly _signalingClient: ISignalingClient;
|
||||
private readonly _peerConnection: IPeerConnectionOperations;
|
||||
|
||||
constructor(
|
||||
signalingClient: ISignalingClient,
|
||||
peerConnection: IPeerConnectionOperations
|
||||
) {
|
||||
constructor(signalingClient: ISignalingClient, peerConnection: IPeerConnectionOperations) {
|
||||
this._signalingClient = signalingClient;
|
||||
this._peerConnection = peerConnection;
|
||||
}
|
||||
@@ -54,4 +51,3 @@ export class Callee {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import type { ISignalingClient } from '../interfaces/ISignalingClient';
|
||||
import type { IPeerConnectionOperations } from '../interfaces/IPeerConnectionOperations';
|
||||
import type { ILogger } from '@techniker-me/logger';
|
||||
import { LoggerFactory } from '@techniker-me/logger';
|
||||
import type {ISignalingClient} from '../interfaces/ISignalingClient';
|
||||
import type {IPeerConnectionOperations} from '../interfaces/IPeerConnectionOperations';
|
||||
import type {ILogger} from '@techniker-me/logger';
|
||||
import {LoggerFactory} from '@techniker-me/logger';
|
||||
|
||||
/**
|
||||
* Caller class - responsible for initiating WebRTC calls
|
||||
@@ -13,10 +13,7 @@ export class Caller {
|
||||
private readonly _signalingClient: ISignalingClient;
|
||||
private readonly _peerConnection: IPeerConnectionOperations;
|
||||
|
||||
constructor(
|
||||
signalingClient: ISignalingClient,
|
||||
peerConnection: IPeerConnectionOperations
|
||||
) {
|
||||
constructor(signalingClient: ISignalingClient, peerConnection: IPeerConnectionOperations) {
|
||||
this._signalingClient = signalingClient;
|
||||
this._peerConnection = peerConnection;
|
||||
}
|
||||
@@ -64,4 +61,3 @@ export class Caller {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { IEvent, IDisposable } from '@techniker-me/tools';
|
||||
import type {IEvent, IDisposable} from '@techniker-me/tools';
|
||||
|
||||
/**
|
||||
* Interface for peer connection operations
|
||||
@@ -44,4 +44,3 @@ export interface IPeerConnectionOperations {
|
||||
*/
|
||||
on<T>(event: string, callback: (event: IEvent<T>) => void | Promise<void>): IDisposable;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { IMessage } from '../messaging/IMessage';
|
||||
import { MessageKind } from '../messaging/MessageKind';
|
||||
import type {IMessage} from '../messaging/IMessage';
|
||||
import {MessageKind} from '../messaging/MessageKind';
|
||||
|
||||
/**
|
||||
* Interface for signaling client operations
|
||||
@@ -26,4 +26,3 @@ export interface ISignalingClient {
|
||||
*/
|
||||
sendCandidate(candidate: RTCIceCandidateInit): Promise<void>;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import PeerConnection from './PeerConnection';
|
||||
import User from './User';
|
||||
import SignalingServer from './SignalingServer';
|
||||
import { CallCoordinator } from './call/CallCoordinator';
|
||||
import { MessageKind } from './messaging/MessageKind';
|
||||
import type { IMessage } from './messaging/IMessage';
|
||||
import type { ISignalingClient } from './interfaces/ISignalingClient';
|
||||
import {CallCoordinator} from './call/CallCoordinator';
|
||||
import {MessageKind} from './messaging/MessageKind';
|
||||
import type {IMessage} from './messaging/IMessage';
|
||||
import type {ISignalingClient} from './interfaces/ISignalingClient';
|
||||
|
||||
type Elements = {
|
||||
localVideo: HTMLVideoElement;
|
||||
@@ -16,7 +16,7 @@ type Elements = {
|
||||
iceConnectionStateValue: HTMLSpanElement;
|
||||
iceGatheringStateValue: HTMLSpanElement;
|
||||
connectionStateValue: HTMLSpanElement;
|
||||
}
|
||||
};
|
||||
|
||||
const elements: Elements = {
|
||||
localVideo: document.getElementById('local-video') as HTMLVideoElement,
|
||||
@@ -28,7 +28,7 @@ const elements: Elements = {
|
||||
iceConnectionStateValue: document.getElementById('ice-connection-state-value') as HTMLSpanElement,
|
||||
iceGatheringStateValue: document.getElementById('ice-gathering-state-value') as HTMLSpanElement,
|
||||
connectionStateValue: document.getElementById('connection-state-value') as HTMLSpanElement
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize WebSocket and signaling server
|
||||
const websocket = new WebSocket(`ws://${window.location.hostname}:3000/ws`);
|
||||
@@ -57,7 +57,7 @@ signalingServer.on<RTCIceCandidateInit>(MessageKind.Candidate, async (message: I
|
||||
});
|
||||
|
||||
// Setup UI state subscriptions
|
||||
peerConnection.signalingState.subscribe((state) => {
|
||||
peerConnection.signalingState.subscribe(state => {
|
||||
elements.signalingStateValue.textContent = state;
|
||||
|
||||
// Enable send answer button when remote offer is received
|
||||
@@ -68,15 +68,15 @@ peerConnection.signalingState.subscribe((state) => {
|
||||
}
|
||||
});
|
||||
|
||||
peerConnection.iceConnectionState.subscribe((state) => {
|
||||
peerConnection.iceConnectionState.subscribe(state => {
|
||||
elements.iceConnectionStateValue.textContent = state;
|
||||
});
|
||||
|
||||
peerConnection.iceGatheringState.subscribe((state) => {
|
||||
peerConnection.iceGatheringState.subscribe(state => {
|
||||
elements.iceGatheringStateValue.textContent = state;
|
||||
});
|
||||
|
||||
peerConnection.connectionState.subscribe((state) => {
|
||||
peerConnection.connectionState.subscribe(state => {
|
||||
elements.connectionStateValue.textContent = state;
|
||||
});
|
||||
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
import type {MessageType} from './MessageKind';
|
||||
|
||||
export interface IMessage<T> {
|
||||
type: MessageType;
|
||||
payload: T;
|
||||
type: MessageType;
|
||||
payload: T;
|
||||
}
|
||||
|
||||
|
||||
export type IOfferMessage = {
|
||||
type: 'offer';
|
||||
payload: RTCSessionDescriptionInit;
|
||||
}
|
||||
type: 'offer';
|
||||
payload: RTCSessionDescriptionInit;
|
||||
};
|
||||
|
||||
export type IAnswerMessage = {
|
||||
type: 'answer';
|
||||
payload: RTCSessionDescriptionInit;
|
||||
}
|
||||
type: 'answer';
|
||||
payload: RTCSessionDescriptionInit;
|
||||
};
|
||||
|
||||
export type ICandidateMessage = {
|
||||
type: 'candidate';
|
||||
payload: RTCIceCandidateInit;
|
||||
}
|
||||
type: 'candidate';
|
||||
payload: RTCIceCandidateInit;
|
||||
};
|
||||
|
||||
export type Message = IOfferMessage | IAnswerMessage | ICandidateMessage;
|
||||
@@ -1,32 +1,32 @@
|
||||
export enum MessageKind {
|
||||
Offer = 0,
|
||||
Answer = 1,
|
||||
Candidate = 2
|
||||
Offer = 0,
|
||||
Answer = 1,
|
||||
Candidate = 2
|
||||
}
|
||||
|
||||
export type MessageKindType = 'offer' | 'answer' | 'candidate';
|
||||
export type MessageType = MessageKindType;
|
||||
|
||||
export class MessageKindMapping {
|
||||
public static convertMessageKindToMessageType(messageKind: MessageKind): MessageType {
|
||||
switch (messageKind) {
|
||||
case MessageKind.Offer:
|
||||
return 'offer';
|
||||
case MessageKind.Answer:
|
||||
return 'answer';
|
||||
case MessageKind.Candidate:
|
||||
return 'candidate';
|
||||
}
|
||||
public static convertMessageKindToMessageType(messageKind: MessageKind): MessageType {
|
||||
switch (messageKind) {
|
||||
case MessageKind.Offer:
|
||||
return 'offer';
|
||||
case MessageKind.Answer:
|
||||
return 'answer';
|
||||
case MessageKind.Candidate:
|
||||
return 'candidate';
|
||||
}
|
||||
}
|
||||
|
||||
public static convertMessageTypeToMessageKind(messageType: MessageType): MessageKind {
|
||||
switch (messageType) {
|
||||
case 'offer':
|
||||
return MessageKind.Offer;
|
||||
case 'answer':
|
||||
return MessageKind.Answer;
|
||||
case 'candidate':
|
||||
return MessageKind.Candidate;
|
||||
}
|
||||
public static convertMessageTypeToMessageKind(messageType: MessageType): MessageKind {
|
||||
switch (messageType) {
|
||||
case 'offer':
|
||||
return MessageKind.Offer;
|
||||
case 'answer':
|
||||
return MessageKind.Answer;
|
||||
case 'candidate':
|
||||
return MessageKind.Candidate;
|
||||
}
|
||||
}
|
||||
}
|
||||
5686
package-lock.json
generated
5686
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
16
package.json
16
package.json
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "webrtc-real-time-ip-phone",
|
||||
"workspaces": [
|
||||
"./frontend-web-vanilla",
|
||||
"./signaling"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "concurrently \"cd frontend-web-vanilla && bun run dev\" \"cd signaling && bun run dev\""
|
||||
}
|
||||
"name": "webrtc-real-time-ip-phone",
|
||||
"workspaces": [
|
||||
"./frontend-web-vanilla",
|
||||
"./signaling"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "concurrently \"cd frontend-web-vanilla && bun run dev\" \"cd signaling && bun run dev\""
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +1,106 @@
|
||||
import type { Server, ServerWebSocket } from "bun";
|
||||
import {LoggerFactory, type ILogger} from '@techniker-me/logger';
|
||||
import { LoggerFactory, type ILogger } from "@techniker-me/logger";
|
||||
import { MessageKindMapping } from "./messaging/MessageKind";
|
||||
|
||||
export default class SignalingServer {
|
||||
private readonly _logger: ILogger = LoggerFactory.getLogger('SignalingServer');
|
||||
private readonly _port: number;
|
||||
private readonly _hostname: string;
|
||||
private readonly _development: boolean;
|
||||
private readonly _clients: Set<ServerWebSocket<undefined>> = new Set();
|
||||
private readonly _logger: ILogger =
|
||||
LoggerFactory.getLogger("SignalingServer");
|
||||
private readonly _port: number;
|
||||
private readonly _hostname: string;
|
||||
private readonly _development: boolean;
|
||||
private readonly _clients: Set<ServerWebSocket<undefined>> = new Set();
|
||||
|
||||
constructor(port: number, hostname: string = '0.0.0.0', development: boolean = false) {
|
||||
this._port = port;
|
||||
this._hostname = hostname;
|
||||
this._development = development;
|
||||
}
|
||||
constructor(
|
||||
port: number,
|
||||
hostname: string = "0.0.0.0",
|
||||
development: boolean = false,
|
||||
) {
|
||||
this._port = port;
|
||||
this._hostname = hostname;
|
||||
this._development = development;
|
||||
}
|
||||
|
||||
get port(): number {
|
||||
return this._port;
|
||||
}
|
||||
get port(): number {
|
||||
return this._port;
|
||||
}
|
||||
|
||||
get hostname(): string {
|
||||
return this._hostname;
|
||||
}
|
||||
get hostname(): string {
|
||||
return this._hostname;
|
||||
}
|
||||
|
||||
get development(): boolean {
|
||||
return this._development;
|
||||
}
|
||||
get development(): boolean {
|
||||
return this._development;
|
||||
}
|
||||
|
||||
get websocket() {
|
||||
return {
|
||||
open: this.handleWebSocketOpen.bind(this),
|
||||
message: this.handleWebSocketMessage.bind(this),
|
||||
close: this.handleWebSocketClose.bind(this),
|
||||
drain: this.handleWebSocketDrain.bind(this),
|
||||
error: this.handleWebSocketError.bind(this),
|
||||
perMessageDeflate: true,
|
||||
maxPayloadLength: 10 * 1024
|
||||
};
|
||||
}
|
||||
get websocket() {
|
||||
return {
|
||||
open: this.handleWebSocketOpen.bind(this),
|
||||
message: this.handleWebSocketMessage.bind(this),
|
||||
close: this.handleWebSocketClose.bind(this),
|
||||
drain: this.handleWebSocketDrain.bind(this),
|
||||
error: this.handleWebSocketError.bind(this),
|
||||
perMessageDeflate: true,
|
||||
maxPayloadLength: 10 * 1024,
|
||||
};
|
||||
}
|
||||
|
||||
get fetch() {
|
||||
return (req: Request, server: Server<undefined>) => {
|
||||
this._logger.info(`Fetch request received [${req.url}] from [${server.requestIP(req)?.address}:${server.requestIP(req)?.port}]`);
|
||||
const url = new URL(req.url);
|
||||
get fetch() {
|
||||
return (req: Request, server: Server<undefined>) => {
|
||||
this._logger.info(
|
||||
`Fetch request received [${req.url}] from [${server.requestIP(req)?.address}:${server.requestIP(req)?.port}]`,
|
||||
);
|
||||
const url = new URL(req.url);
|
||||
|
||||
if (url.pathname.endsWith('/ws')) {
|
||||
this._logger.info('Upgrading to WebSocket');
|
||||
server.upgrade(req)
|
||||
if (url.pathname.endsWith("/ws")) {
|
||||
this._logger.info("Upgrading to WebSocket");
|
||||
server.upgrade(req);
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
return new Response('Hello World');
|
||||
};
|
||||
}
|
||||
return new Response("Hello World");
|
||||
};
|
||||
}
|
||||
|
||||
private handleWebSocketOpen(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info('WebSocket opened');
|
||||
this._clients.add(ws);
|
||||
}
|
||||
private handleWebSocketOpen(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info("WebSocket opened");
|
||||
this._clients.add(ws);
|
||||
}
|
||||
|
||||
private handleWebSocketMessage(ws: ServerWebSocket<undefined>, message: string | Buffer): void {
|
||||
const messageString = typeof message === 'string' ? message : message.toString();
|
||||
const jsonMessage = JSON.parse(messageString);
|
||||
this._logger.info(`WebSocket message received [${MessageKindMapping.convertMessageKindToMessageType(jsonMessage.type)}]`);
|
||||
private handleWebSocketMessage(
|
||||
ws: ServerWebSocket<undefined>,
|
||||
message: string | Buffer,
|
||||
): void {
|
||||
const messageString =
|
||||
typeof message === "string" ? message : message.toString();
|
||||
const jsonMessage = JSON.parse(messageString);
|
||||
this._logger.info(
|
||||
`WebSocket message received [${MessageKindMapping.convertMessageKindToMessageType(jsonMessage.type)}]`,
|
||||
);
|
||||
|
||||
// Forward message to all other clients (following sequence diagram)
|
||||
// This allows the signaling server to relay offers/answers between caller and callee
|
||||
this._clients.forEach(client => {
|
||||
if (client !== ws && client.readyState === 1) { // 1 = OPEN
|
||||
client.send(messageString);
|
||||
}
|
||||
});
|
||||
}
|
||||
// Forward message to all other clients (following sequence diagram)
|
||||
// This allows the signaling server to relay offers/answers between caller and callee
|
||||
this._clients.forEach((client) => {
|
||||
if (client !== ws && client.readyState === 1) {
|
||||
// 1 = OPEN
|
||||
client.send(messageString);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private handleWebSocketClose(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info('WebSocket closed');
|
||||
this._clients.delete(ws);
|
||||
}
|
||||
private handleWebSocketClose(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info("WebSocket closed");
|
||||
this._clients.delete(ws);
|
||||
}
|
||||
|
||||
private handleWebSocketError(ws: ServerWebSocket<undefined>, error: Error): void {
|
||||
this._logger.error('WebSocket error', error);
|
||||
}
|
||||
private handleWebSocketError(
|
||||
ws: ServerWebSocket<undefined>,
|
||||
error: Error,
|
||||
): void {
|
||||
this._logger.error("WebSocket error", error);
|
||||
}
|
||||
|
||||
private handleWebSocketDrain(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info('WebSocket drained');
|
||||
}
|
||||
private handleWebSocketDrain(ws: ServerWebSocket<undefined>): void {
|
||||
this._logger.info("WebSocket drained");
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,9 @@
|
||||
import SignalingServer from "./SignalingServer";
|
||||
|
||||
const signalingServer = new SignalingServer(3000, '0.0.0.0', true);
|
||||
const signalingServer = new SignalingServer(3000, "0.0.0.0", true);
|
||||
|
||||
Bun.serve(signalingServer);
|
||||
|
||||
console.log(`Signaling server started on [${signalingServer.hostname}:${signalingServer.port}]`);
|
||||
console.log(
|
||||
`Signaling server started on [${signalingServer.hostname}:${signalingServer.port}]`,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user