2021-05-12 09:13:25 +02:00
|
|
|
import type * as SimplePeerNamespace from "simple-peer";
|
2021-06-25 18:14:40 +02:00
|
|
|
import type { RoomConnection } from "../Connexion/RoomConnection";
|
|
|
|
import { MESSAGE_TYPE_CONSTRAINT, PeerStatus } from "./VideoPeer";
|
|
|
|
import type { UserSimplePeerInterface } from "./SimplePeer";
|
2022-01-28 18:33:42 +01:00
|
|
|
import { Readable, readable, writable, Writable } from "svelte/store";
|
2021-07-15 11:26:04 +02:00
|
|
|
import { getIceServersConfig } from "../Components/Video/utils";
|
2022-01-05 10:27:40 +01:00
|
|
|
import { highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
|
|
|
|
import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils";
|
2020-08-20 16:56:10 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
|
2020-08-20 16:56:10 +02:00
|
|
|
|
|
|
|
/**
|
|
|
|
* A peer connection used to transmit video / audio signals between 2 peers.
|
|
|
|
*/
|
|
|
|
export class ScreenSharingPeer extends Peer {
|
2020-08-21 22:53:17 +02:00
|
|
|
/**
|
|
|
|
* Whether this connection is currently receiving a video stream from a remote user.
|
|
|
|
*/
|
2021-06-25 18:14:40 +02:00
|
|
|
private isReceivingStream: boolean = false;
|
2020-10-20 20:39:33 +02:00
|
|
|
public toClose: boolean = false;
|
|
|
|
public _connected: boolean = false;
|
2021-06-11 11:29:36 +02:00
|
|
|
public readonly userId: number;
|
|
|
|
public readonly uniqueId: string;
|
|
|
|
public readonly streamStore: Readable<MediaStream | null>;
|
2022-01-28 18:33:42 +01:00
|
|
|
public readonly statusStore: Writable<PeerStatus>;
|
2020-08-21 22:53:17 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
constructor(
|
|
|
|
user: UserSimplePeerInterface,
|
|
|
|
initiator: boolean,
|
|
|
|
public readonly userName: string,
|
|
|
|
private connection: RoomConnection,
|
|
|
|
stream: MediaStream | null
|
|
|
|
) {
|
2020-08-20 16:56:10 +02:00
|
|
|
super({
|
2021-07-15 11:26:04 +02:00
|
|
|
initiator,
|
2020-08-20 16:56:10 +02:00
|
|
|
config: {
|
2021-07-15 11:26:04 +02:00
|
|
|
iceServers: getIceServersConfig(user),
|
2021-06-25 18:14:40 +02:00
|
|
|
},
|
2020-08-20 16:56:10 +02:00
|
|
|
});
|
|
|
|
|
2021-02-16 11:08:03 +01:00
|
|
|
this.userId = user.userId;
|
2021-06-25 18:14:40 +02:00
|
|
|
this.uniqueId = "screensharing_" + this.userId;
|
2021-06-11 11:29:36 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.streamStore = readable<MediaStream | null>(null, (set) => {
|
|
|
|
const onStream = (stream: MediaStream | null) => {
|
2022-01-05 10:27:40 +01:00
|
|
|
highlightedEmbedScreen.highlight({
|
|
|
|
type: "streamable",
|
|
|
|
embed: this,
|
|
|
|
});
|
2021-06-11 11:29:36 +02:00
|
|
|
set(stream);
|
|
|
|
};
|
|
|
|
const onData = (chunk: Buffer) => {
|
|
|
|
// We unfortunately need to rely on an event to let the other party know a stream has stopped.
|
|
|
|
// It seems there is no native way to detect that.
|
|
|
|
// TODO: we might rely on the "ended" event: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
|
2021-06-25 18:14:40 +02:00
|
|
|
const message = JSON.parse(chunk.toString("utf8"));
|
2021-06-11 11:29:36 +02:00
|
|
|
if (message.streamEnded !== true) {
|
2021-06-25 18:14:40 +02:00
|
|
|
console.error("Unexpected message on screen sharing peer connection");
|
2021-06-11 11:29:36 +02:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
set(null);
|
2021-06-25 18:14:40 +02:00
|
|
|
};
|
2021-06-11 11:29:36 +02:00
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("stream", onStream);
|
|
|
|
this.on("data", onData);
|
2021-06-11 11:29:36 +02:00
|
|
|
|
|
|
|
return () => {
|
2021-06-25 18:14:40 +02:00
|
|
|
this.off("stream", onStream);
|
|
|
|
this.off("data", onData);
|
2021-06-11 11:29:36 +02:00
|
|
|
};
|
|
|
|
});
|
|
|
|
|
2022-01-28 18:33:42 +01:00
|
|
|
this.statusStore = writable<PeerStatus>("connecting", (set) => {
|
2021-06-11 11:29:36 +02:00
|
|
|
const onConnect = () => {
|
2021-06-25 18:14:40 +02:00
|
|
|
set("connected");
|
2021-06-11 11:29:36 +02:00
|
|
|
};
|
|
|
|
const onError = () => {
|
2021-06-25 18:14:40 +02:00
|
|
|
set("error");
|
2021-06-11 11:29:36 +02:00
|
|
|
};
|
|
|
|
const onClose = () => {
|
2021-06-25 18:14:40 +02:00
|
|
|
set("closed");
|
2021-06-11 11:29:36 +02:00
|
|
|
};
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("connect", onConnect);
|
|
|
|
this.on("error", onError);
|
|
|
|
this.on("close", onClose);
|
2021-06-11 11:29:36 +02:00
|
|
|
|
|
|
|
return () => {
|
2021-06-25 18:14:40 +02:00
|
|
|
this.off("connect", onConnect);
|
|
|
|
this.off("error", onError);
|
|
|
|
this.off("close", onClose);
|
2021-06-11 11:29:36 +02:00
|
|
|
};
|
|
|
|
});
|
2021-02-16 11:08:03 +01:00
|
|
|
|
2020-08-20 16:56:10 +02:00
|
|
|
//start listen signal for the peer connection
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("signal", (data: unknown) => {
|
2020-08-20 16:56:10 +02:00
|
|
|
this.sendWebrtcScreenSharingSignal(data);
|
|
|
|
});
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("stream", (stream: MediaStream) => {
|
2020-08-20 16:56:10 +02:00
|
|
|
this.stream(stream);
|
|
|
|
});
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("close", () => {
|
2020-10-20 20:39:33 +02:00
|
|
|
this._connected = false;
|
|
|
|
this.toClose = true;
|
2020-08-20 22:23:22 +02:00
|
|
|
this.destroy();
|
2020-08-20 16:56:10 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("error", (err: any) => {
|
2020-08-20 16:56:10 +02:00
|
|
|
console.error(`screen sharing error => ${this.userId} => ${err.code}`, err);
|
|
|
|
});
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.on("connect", () => {
|
2020-10-20 20:39:33 +02:00
|
|
|
this._connected = true;
|
2020-08-20 16:56:10 +02:00
|
|
|
console.info(`connect => ${this.userId}`);
|
|
|
|
});
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
this.once("finish", () => {
|
2020-10-20 20:39:33 +02:00
|
|
|
this._onFinish();
|
|
|
|
});
|
|
|
|
|
2021-05-29 22:04:08 +02:00
|
|
|
if (stream) {
|
|
|
|
this.addStream(stream);
|
|
|
|
}
|
2020-08-20 16:56:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
private sendWebrtcScreenSharingSignal(data: unknown) {
|
|
|
|
try {
|
|
|
|
this.connection.sendWebrtcScreenSharingSignal(data, this.userId);
|
2021-06-25 18:14:40 +02:00
|
|
|
} catch (e) {
|
2020-08-20 16:56:10 +02:00
|
|
|
console.error(`sendWebrtcScreenSharingSignal => ${this.userId}`, e);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Sends received stream to screen.
|
|
|
|
*/
|
|
|
|
private stream(stream?: MediaStream) {
|
2021-06-25 18:14:40 +02:00
|
|
|
if (!stream) {
|
2020-08-21 22:53:17 +02:00
|
|
|
this.isReceivingStream = false;
|
2020-08-20 16:56:10 +02:00
|
|
|
} else {
|
2022-01-28 18:42:48 +01:00
|
|
|
//Check if the peer connection is already connected status. In this case, the status store must be set to 'connected'.
|
|
|
|
//In the case or player A send stream and player B send a stream, it's same peer connection, also the status must be changed to connect.
|
|
|
|
//TODO add event listening when the stream is ready for displaying and change the status
|
2022-01-28 18:33:42 +01:00
|
|
|
if (this._connected) {
|
|
|
|
this.statusStore.set("connected");
|
|
|
|
}
|
2020-08-21 22:53:17 +02:00
|
|
|
this.isReceivingStream = true;
|
2020-08-20 16:56:10 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-21 22:53:17 +02:00
|
|
|
public isReceivingScreenSharingStream(): boolean {
|
|
|
|
return this.isReceivingStream;
|
|
|
|
}
|
|
|
|
|
2020-08-20 22:23:22 +02:00
|
|
|
public destroy(error?: Error): void {
|
2020-08-20 16:56:10 +02:00
|
|
|
try {
|
2021-06-25 18:14:40 +02:00
|
|
|
this._connected = false;
|
|
|
|
if (!this.toClose) {
|
2020-10-20 20:39:33 +02:00
|
|
|
return;
|
|
|
|
}
|
2020-08-20 16:56:10 +02:00
|
|
|
// FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray"
|
|
|
|
// I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel.
|
|
|
|
//console.log('Closing connection with '+userId);
|
2020-08-20 22:23:22 +02:00
|
|
|
super.destroy(error);
|
2020-08-20 16:56:10 +02:00
|
|
|
//console.log('Nb users in peerConnectionArray '+this.PeerConnectionArray.size);
|
|
|
|
} catch (err) {
|
2021-06-25 18:14:40 +02:00
|
|
|
console.error("ScreenSharingPeer::destroy", err);
|
2020-08-20 16:56:10 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-06-25 18:14:40 +02:00
|
|
|
_onFinish() {
|
|
|
|
if (this.destroyed) return;
|
2020-10-20 20:39:33 +02:00
|
|
|
const destroySoon = () => {
|
|
|
|
this.destroy();
|
2021-06-25 18:14:40 +02:00
|
|
|
};
|
2020-10-20 20:39:33 +02:00
|
|
|
if (this._connected) {
|
|
|
|
destroySoon();
|
|
|
|
} else {
|
2021-06-25 18:14:40 +02:00
|
|
|
this.once("connect", destroySoon);
|
2020-10-20 20:39:33 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-08-21 22:53:17 +02:00
|
|
|
public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
|
|
|
|
this.removeStream(stream);
|
2021-08-10 22:35:26 +02:00
|
|
|
this.write(
|
2022-01-05 10:27:40 +01:00
|
|
|
new Buffer(
|
|
|
|
JSON.stringify({
|
|
|
|
type: MESSAGE_TYPE_CONSTRAINT,
|
|
|
|
streamEnded: true,
|
|
|
|
isMobile: isMediaBreakpointUp("md"),
|
|
|
|
})
|
|
|
|
)
|
2021-08-10 22:35:26 +02:00
|
|
|
);
|
2020-08-21 22:53:17 +02:00
|
|
|
}
|
2020-08-20 16:56:10 +02:00
|
|
|
}
|