openreplay/frontend/app/player/web/assist/Call.ts

293 lines
No EOL
8.5 KiB
TypeScript

import type Peer from 'peerjs';
import type { MediaConnection } from 'peerjs';
import type { LocalStream } from './LocalStream';
import type { Socket } from './types'
import type { Store } from '../../common/types'
import appStore from 'App/store';
export enum CallingState {
NoCall,
Connecting,
Requesting,
Reconnecting,
OnCall,
}
export interface State {
calling: CallingState;
currentTab?: string;
}
export default class Call {
private assistVersion = 1
static readonly INITIAL_STATE: Readonly<State> = {
calling: CallingState.NoCall
}
private _peer: Peer | null = null
private connectionAttempts: number = 0
private callConnection: MediaConnection[] = []
private videoStreams: Record<string, MediaStreamTrack> = {}
constructor(
private store: Store<State>,
private socket: Socket,
private config: RTCIceServer[] | null,
private peerID: string,
private getAssistVersion: () => number
) {
socket.on('call_end', this.onRemoteCallEnd)
socket.on('videofeed', ({ streamId, enabled }) => {
console.log(streamId, enabled)
console.log(this.videoStreams)
if (this.videoStreams[streamId]) {
this.videoStreams[streamId].enabled = enabled
}
console.log(this.videoStreams)
})
let reconnecting = false
socket.on('SESSION_DISCONNECTED', () => {
if (this.store.get().calling === CallingState.OnCall) {
this.store.update({ calling: CallingState.Reconnecting })
reconnecting = true
} else if (this.store.get().calling === CallingState.Requesting){
this.store.update({ calling: CallingState.NoCall })
}
})
socket.on('messages', () => {
if (reconnecting) { // 'messages' come frequently, so it is better to have Reconnecting
this._callSessionPeer()
reconnecting = false
}
})
socket.on("disconnect", () => {
this.store.update({ calling: CallingState.NoCall })
})
this.assistVersion = this.getAssistVersion()
}
private getPeer(): Promise<Peer> {
if (this._peer && !this._peer.disconnected) { return Promise.resolve(this._peer) }
// @ts-ignore
const urlObject = new URL(window.env.API_EDP || window.location.origin)
// @ts-ignore TODO: set module in ts settings
return import('peerjs').then(({ default: Peer }) => {
if (this.cleaned) {return Promise.reject("Already cleaned")}
const peerOpts: Peer.PeerJSOption = {
host: urlObject.hostname,
path: '/assist',
port: urlObject.port === "" ? (location.protocol === 'https:' ? 443 : 80 ): parseInt(urlObject.port),
}
if (this.config) {
peerOpts['config'] = {
iceServers: this.config,
//@ts-ignore
sdpSemantics: 'unified-plan',
iceTransportPolicy: 'all',
};
}
const peer = this._peer = new Peer(peerOpts)
peer.on('call', call => {
console.log('getting call from', call.peer)
call.answer(this.callArgs.localStream.stream)
this.callConnection.push(call)
this.callArgs.localStream.onVideoTrack(vTrack => {
const sender = call.peerConnection.getSenders().find(s => s.track?.kind === "video")
if (!sender) {
console.warn("No video sender found")
return
}
sender.replaceTrack(vTrack)
})
call.on('stream', stream => {
this.videoStreams[call.peer] = stream.getVideoTracks()[0]
this.callArgs && this.callArgs.onStream(stream)
});
// call.peerConnection.addEventListener("track", e => console.log('newtrack',e.track))
call.on("close", this.onRemoteCallEnd)
call.on("error", (e) => {
console.error("PeerJS error (on call):", e)
this.initiateCallEnd();
this.callArgs && this.callArgs.onError && this.callArgs.onError();
});
})
peer.on('error', e => {
if (e.type === 'disconnected') {
return peer.reconnect()
} else if (e.type !== 'peer-unavailable') {
console.error(`PeerJS error (on peer). Type ${e.type}`, e);
}
// call-reconnection connected
// if (['peer-unavailable', 'network', 'webrtc'].includes(e.type)) {
// this.setStatus(this.connectionAttempts++ < MAX_RECONNECTION_COUNT
// ? ConnectionStatus.Connecting
// : ConnectionStatus.Disconnected);
// Reconnect...
})
return new Promise(resolve => {
peer.on("open", () => resolve(peer))
})
});
}
private handleCallEnd() {
this.callArgs && this.callArgs.onCallEnd()
this.callConnection[0] && this.callConnection[0].close()
this.store.update({ calling: CallingState.NoCall })
this.callArgs = null
// TODO: We have it separated, right? (check)
//this.toggleAnnotation(false)
}
private onRemoteCallEnd = () => {
if ([CallingState.Requesting, CallingState.Connecting].includes(this.store.get().calling)) {
this.callArgs && this.callArgs.onReject()
this.callConnection[0] && this.callConnection[0].close()
this.store.update({ calling: CallingState.NoCall })
this.callArgs = null
} else {
this.handleCallEnd()
}
}
initiateCallEnd = async () => {
this.emitData("call_end", appStore.getState().getIn([ 'user', 'account', 'name']))
this.handleCallEnd()
// TODO: We have it separated, right? (check)
// const remoteControl = this.store.get().remoteControl
// if (remoteControl === RemoteControlStatus.Enabled) {
// this.socket.emit("release_control")
// this.toggleRemoteControl(false)
// }
}
private emitData = (event: string, data?: any) => {
if (this.assistVersion === 1) {
this.socket?.emit(event, data)
} else {
this.socket?.emit(event, { meta: { tabId: this.store.get().currentTab }, data })
}
}
private callArgs: {
localStream: LocalStream,
onStream: (s: MediaStream)=>void,
onCallEnd: () => void,
onReject: () => void,
onError?: ()=> void,
} | null = null
setCallArgs(
localStream: LocalStream,
onStream: (s: MediaStream)=>void,
onCallEnd: () => void,
onReject: () => void,
onError?: (e?: any)=> void,
) {
this.callArgs = {
localStream,
onStream,
onCallEnd,
onReject,
onError,
}
}
call(thirdPartyPeers?: string[]): { end: () => void } {
if (thirdPartyPeers && thirdPartyPeers.length > 0) {
this.addPeerCall(thirdPartyPeers)
} else {
this._callSessionPeer()
}
return {
end: this.initiateCallEnd,
}
}
toggleVideoLocalStream(enabled: boolean) {
this.getPeer().then((peer) => {
this.emitData('videofeed', { streamId: peer.id, enabled })
})
}
/** Connecting to the other agents that are already
* in the call with the user
*/
addPeerCall(thirdPartyPeers: string[]) {
thirdPartyPeers.forEach(peer => this._peerConnection(peer))
}
/** Connecting to the app user */
private _callSessionPeer() {
if (![CallingState.NoCall, CallingState.Reconnecting].includes(this.store.get().calling)) { return }
this.store.update({ calling: CallingState.Connecting })
const tab = this.store.get().currentTab
if (!this.store.get().currentTab) {
console.warn('No tab data to connect to peer')
}
const peerId = this.assistVersion === 1 ? this.peerID : `${this.peerID}-${tab || Object.keys(this.store.get().tabs)[0]}`
void this._peerConnection(peerId);
this.emitData("_agent_name", appStore.getState().getIn([ 'user', 'account', 'name']))
}
private async _peerConnection(remotePeerId: string) {
try {
const peer = await this.getPeer();
const call = peer.call(remotePeerId, this.callArgs.localStream.stream)
this.callConnection.push(call)
this.callArgs.localStream.onVideoTrack(vTrack => {
const sender = call.peerConnection.getSenders().find(s => s.track?.kind === "video")
if (!sender) {
console.warn("No video sender found")
return
}
sender.replaceTrack(vTrack)
})
call.on('stream', stream => {
this.store.get().calling !== CallingState.OnCall && this.store.update({ calling: CallingState.OnCall })
this.videoStreams[call.peer] = stream.getVideoTracks()[0]
this.callArgs && this.callArgs.onStream(stream)
});
// call.peerConnection.addEventListener("track", e => console.log('newtrack',e.track))
call.on("close", this.onRemoteCallEnd)
call.on("error", (e) => {
console.error("PeerJS error (on call):", e)
this.initiateCallEnd();
this.callArgs && this.callArgs.onError && this.callArgs.onError();
});
} catch (e) {
console.error(e)
}
}
private cleaned: boolean = false
clean() {
this.cleaned = true // sometimes cleaned before modules loaded
this.initiateCallEnd()
if (this._peer) {
console.log("destroying peer...")
const peer = this._peer; // otherwise it calls reconnection on data chan close
this._peer = null;
peer.disconnect();
peer.destroy();
}
}
}