Removing listeners from MediaManager.
SimplePeer now reacts only to stores.
This commit is contained in:
David Négrier
parent
5295f923b5
commit
b7f1461405
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<rect x="257" y="-47.9" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 643.9641 283.6469)" class="st0" width="20.4" height="628.3"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M333.6,250.3c-52.6-43.9-105.1-87.9-157.7-131.8c0-17.9,0-35.8,0-53.6c6.5-38.6,40.3-67,79.3-66.8
|
||||
c38.6,0.2,71.9,28.5,78.4,66.8C333.6,126.7,333.6,188.5,333.6,250.3z"/>
|
||||
<path class="st0" d="M322.6,279.9c-48.9-53.8-97.8-107.6-146.6-161.4l0,0c52.6,43.9,105.1,87.9,157.7,131.8
|
||||
c-0.2,1.6-0.5,3.3-0.9,5C330.5,265.2,326.6,273.5,322.6,279.9z"/>
|
||||
</g>
|
||||
<path class="st0" d="M292.5,308.1c-2.3,1.2-39.5,20.3-76.7-1c-36.4-20.8-39.4-61.2-39.6-64.1c-0.1-21-0.1-42.1-0.2-63.1
|
||||
C214.8,222.6,253.6,265.3,292.5,308.1z"/>
|
||||
</g>
|
||||
<path class="st0" d="M431.6,238.5c-0.9-8.4-8.5-14.4-16.6-13.5c-7.9,0.9-13.9,8.1-13.2,16.3c-0.1,13.3-2.2,34.6-12.6,57.9
|
||||
c-6.3,14.2-14,25.2-20.6,33.1c6.8,7.5,13.6,14.9,20.3,22.4c9.5-10.9,23.4-29.7,32.8-56.3C430.3,273.9,431.8,252.5,431.6,238.5z"/>
|
||||
<line class="st0" x1="354.5" y1="347.2" x2="374.6" y2="369.4"/>
|
||||
<path class="st0" d="M338.5,359.9c6.8,7.4,13.5,14.9,20.3,22.3c-52.6,37.6-121.5,43.7-179.2,15.8c-60.3-29.1-98.9-90.7-99.3-158.2
|
||||
c0-8.2,6.8-15,15-15s15,6.8,15,15c0.1,13.5,2.4,54.4,32.4,91.6c4.2,5.2,45.1,54.1,113.3,54.1C297,385.6,326.7,367.9,338.5,359.9z"/>
|
||||
<rect x="241" y="409.6" class="st0" width="29.9" height="102.3"/>
|
||||
<path class="st0" d="M304.2,511.9h-97.1c-8-0.4-14.3-7.1-14.3-15c0-8.1,6.7-14.9,15-15c31.7,0,63.4,0.1,95.1,0.1
|
||||
c8.9-0.6,16.3,6.5,16.3,14.9C319.2,504.8,312.6,511.7,304.2,511.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -44,13 +44,11 @@ export type HelpCameraSettingsCallBack = () => void;
|
|||
|
||||
export class MediaManager {
|
||||
localStream: MediaStream|null = null;
|
||||
localScreenCapture: MediaStream|null = null;
|
||||
private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
|
||||
webrtcInAudio: HTMLAudioElement;
|
||||
//FIX ME SOUNDMETER: check stalability of sound meter calculation
|
||||
//mySoundMeterElement: HTMLDivElement;
|
||||
private webrtcOutAudio: HTMLAudioElement;
|
||||
updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
|
||||
startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
|
||||
stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
|
||||
showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
|
||||
|
|
@ -108,24 +106,8 @@ export class MediaManager {
|
|||
this.localStream = result.stream;
|
||||
//this.myCamVideo.srcObject = this.localStream;
|
||||
|
||||
// TODO: migrate all listeners to the store directly.
|
||||
this.triggerUpdatedLocalStreamCallbacks(result.stream);
|
||||
});
|
||||
|
||||
/*requestedCameraState.subscribe((enabled) => {
|
||||
if (enabled) {
|
||||
this.enableCameraStyle();
|
||||
} else {
|
||||
this.disableCameraStyle();
|
||||
}
|
||||
});
|
||||
requestedMicrophoneState.subscribe((enabled) => {
|
||||
if (enabled) {
|
||||
this.enableMicrophoneStyle();
|
||||
} else {
|
||||
this.disableMicrophoneStyle();
|
||||
}
|
||||
});*/
|
||||
//let screenSharingStream : MediaStream|null;
|
||||
screenSharingLocalStreamStore.subscribe((result) => {
|
||||
if (result.type === 'error') {
|
||||
|
|
@ -137,26 +119,13 @@ export class MediaManager {
|
|||
}
|
||||
|
||||
if (result.stream !== null) {
|
||||
//this.enableScreenSharingStyle();
|
||||
mediaManager.localScreenCapture = result.stream;
|
||||
|
||||
// TODO: migrate this out of MediaManager
|
||||
this.triggerStartedScreenSharingCallbacks(result.stream);
|
||||
|
||||
//screenSharingStream = result.stream;
|
||||
|
||||
this.addScreenSharingActiveVideo('me', DivImportance.Normal);
|
||||
HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
|
||||
} else {
|
||||
//this.disableScreenSharingStyle();
|
||||
this.removeActiveScreenSharingVideo('me');
|
||||
|
||||
// FIXME: we need the old stream that is being stopped!
|
||||
if (this.localScreenCapture) {
|
||||
this.triggerStoppedScreenSharingCallbacks(this.localScreenCapture);
|
||||
this.localScreenCapture = null;
|
||||
}
|
||||
|
||||
//screenSharingStream = null;
|
||||
}
|
||||
|
||||
|
|
@ -176,40 +145,6 @@ export class MediaManager {
|
|||
//this.updateSoudMeter();
|
||||
}
|
||||
|
||||
public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
|
||||
this.updatedLocalStreamCallBacks.add(callback);
|
||||
}
|
||||
|
||||
public onStartScreenSharing(callback: StartScreenSharingCallback): void {
|
||||
this.startScreenSharingCallBacks.add(callback);
|
||||
}
|
||||
|
||||
public onStopScreenSharing(callback: StopScreenSharingCallback): void {
|
||||
this.stopScreenSharingCallBacks.add(callback);
|
||||
}
|
||||
|
||||
removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void {
|
||||
this.updatedLocalStreamCallBacks.delete(callback);
|
||||
}
|
||||
|
||||
private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void {
|
||||
for (const callback of this.updatedLocalStreamCallBacks) {
|
||||
callback(stream);
|
||||
}
|
||||
}
|
||||
|
||||
private triggerStartedScreenSharingCallbacks(stream: MediaStream): void {
|
||||
for (const callback of this.startScreenSharingCallBacks) {
|
||||
callback(stream);
|
||||
}
|
||||
}
|
||||
|
||||
private triggerStoppedScreenSharingCallbacks(stream: MediaStream): void {
|
||||
for (const callback of this.stopScreenSharingCallBacks) {
|
||||
callback(stream);
|
||||
}
|
||||
}
|
||||
|
||||
public showGameOverlay(): void {
|
||||
const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
|
||||
gameOverlay.classList.add('active');
|
||||
|
|
@ -236,42 +171,6 @@ export class MediaManager {
|
|||
gameOverlayVisibilityStore.hideGameOverlay();
|
||||
}
|
||||
|
||||
/*private enableCameraStyle(){
|
||||
this.cinemaClose.style.display = "none";
|
||||
this.cinemaBtn.classList.remove("disabled");
|
||||
this.cinema.style.display = "block";
|
||||
}
|
||||
|
||||
private disableCameraStyle(){
|
||||
this.cinemaClose.style.display = "block";
|
||||
this.cinema.style.display = "none";
|
||||
this.cinemaBtn.classList.add("disabled");
|
||||
}
|
||||
|
||||
private enableMicrophoneStyle(){
|
||||
this.microphoneClose.style.display = "none";
|
||||
this.microphone.style.display = "block";
|
||||
this.microphoneBtn.classList.remove("disabled");
|
||||
}
|
||||
|
||||
private disableMicrophoneStyle(){
|
||||
this.microphoneClose.style.display = "block";
|
||||
this.microphone.style.display = "none";
|
||||
this.microphoneBtn.classList.add("disabled");
|
||||
}
|
||||
|
||||
private enableScreenSharingStyle(){
|
||||
this.monitorClose.style.display = "none";
|
||||
this.monitor.style.display = "block";
|
||||
this.monitorBtn.classList.add("enabled");
|
||||
}
|
||||
|
||||
private disableScreenSharingStyle(){
|
||||
this.monitorClose.style.display = "block";
|
||||
this.monitor.style.display = "none";
|
||||
this.monitorBtn.classList.remove("enabled");
|
||||
}*/
|
||||
|
||||
addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
|
||||
this.webrtcInAudio.play();
|
||||
const userId = ''+user.userId
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export class ScreenSharingPeer extends Peer {
|
|||
public _connected: boolean = false;
|
||||
private userId: number;
|
||||
|
||||
constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
|
||||
constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, stream: MediaStream | null) {
|
||||
super({
|
||||
initiator: initiator ? initiator : false,
|
||||
//reconnectTimer: 10000,
|
||||
|
|
@ -81,7 +81,9 @@ export class ScreenSharingPeer extends Peer {
|
|||
this._onFinish();
|
||||
});
|
||||
|
||||
this.pushScreenSharingToRemoteUser();
|
||||
if (stream) {
|
||||
this.addStream(stream);
|
||||
}
|
||||
}
|
||||
|
||||
private sendWebrtcScreenSharingSignal(data: unknown) {
|
||||
|
|
@ -141,16 +143,6 @@ export class ScreenSharingPeer extends Peer {
|
|||
}
|
||||
}
|
||||
|
||||
private pushScreenSharingToRemoteUser() {
|
||||
const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
|
||||
if(!localScreenCapture){
|
||||
return;
|
||||
}
|
||||
|
||||
this.addStream(localScreenCapture);
|
||||
return;
|
||||
}
|
||||
|
||||
public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
|
||||
this.removeStream(stream);
|
||||
this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true})));
|
||||
|
|
|
|||
|
|
@ -15,7 +15,10 @@ import {connectionManager} from "../Connexion/ConnectionManager";
|
|||
import {GameConnexionTypes} from "../Url/UrlManager";
|
||||
import {blackListManager} from "./BlackListManager";
|
||||
import {get} from "svelte/store";
|
||||
import {localStreamStore, obtainedMediaConstraintStore} from "../Stores/MediaStore";
|
||||
import {localStreamStore, LocalStreamStoreValue, obtainedMediaConstraintStore} from "../Stores/MediaStore";
|
||||
import {screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore";
|
||||
import {DivImportance, layoutManager} from "./LayoutManager";
|
||||
import {HtmlUtils} from "./HtmlUtils";
|
||||
|
||||
export interface UserSimplePeerInterface{
|
||||
userId: number;
|
||||
|
|
@ -39,9 +42,9 @@ export class SimplePeer {
|
|||
|
||||
private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
|
||||
private PeerConnectionArray: Map<number, VideoPeer> = new Map<number, VideoPeer>();
|
||||
private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
|
||||
private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
|
||||
private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
|
||||
private readonly unsubscribers: (() => void)[] = [];
|
||||
private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
|
||||
private readonly userId: number;
|
||||
private lastWebrtcUserName: string|undefined;
|
||||
|
|
@ -49,13 +52,32 @@ export class SimplePeer {
|
|||
|
||||
constructor(private Connection: RoomConnection, private enableReporting: boolean, private myName: string) {
|
||||
// We need to go through this weird bound function pointer in order to be able to "free" this reference later.
|
||||
this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
|
||||
this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
|
||||
this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
|
||||
|
||||
mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
|
||||
mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
|
||||
mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
|
||||
this.unsubscribers.push(localStreamStore.subscribe((streamResult) => {
|
||||
this.sendLocalVideoStream(streamResult);
|
||||
}));
|
||||
|
||||
let localScreenCapture: MediaStream|null = null;
|
||||
|
||||
this.unsubscribers.push(screenSharingLocalStreamStore.subscribe((streamResult) => {
|
||||
if (streamResult.type === 'error') {
|
||||
// Let's ignore screen sharing errors, we will deal with those in a different way.
|
||||
return;
|
||||
}
|
||||
|
||||
if (streamResult.stream !== null) {
|
||||
localScreenCapture = streamResult.stream;
|
||||
this.sendLocalScreenSharingStream(localScreenCapture);
|
||||
} else {
|
||||
if (localScreenCapture) {
|
||||
this.stopLocalScreenSharingStream(localScreenCapture);
|
||||
localScreenCapture = null;
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
this.userId = Connection.getUserId();
|
||||
this.initialise();
|
||||
}
|
||||
|
|
@ -155,8 +177,9 @@ export class SimplePeer {
|
|||
// When a connection is established to a video stream, and if a screen sharing is taking place,
|
||||
// the user sharing screen should also initiate a connection to the remote user!
|
||||
peer.on('connect', () => {
|
||||
if (mediaManager.localScreenCapture) {
|
||||
this.sendLocalScreenSharingStreamToUser(user.userId);
|
||||
const streamResult = get(screenSharingLocalStreamStore);
|
||||
if (streamResult.type === 'success' && streamResult.stream !== null) {
|
||||
this.sendLocalScreenSharingStreamToUser(user.userId, streamResult.stream);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -175,7 +198,7 @@ export class SimplePeer {
|
|||
/**
|
||||
* create peer connection to bind users
|
||||
*/
|
||||
private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{
|
||||
private createPeerScreenSharingConnection(user : UserSimplePeerInterface, stream: MediaStream | null) : ScreenSharingPeer | null{
|
||||
const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId);
|
||||
if(peerConnection){
|
||||
if(peerConnection.destroyed){
|
||||
|
|
@ -204,7 +227,7 @@ export class SimplePeer {
|
|||
user.webRtcPassword = this.lastWebrtcPassword;
|
||||
}
|
||||
|
||||
const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection);
|
||||
const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection, stream);
|
||||
this.PeerScreenSharingConnectionArray.set(user.userId, peer);
|
||||
|
||||
for (const peerConnectionListener of this.peerConnectionListeners) {
|
||||
|
|
@ -294,7 +317,9 @@ export class SimplePeer {
|
|||
* Unregisters any held event handler.
|
||||
*/
|
||||
public unregister() {
|
||||
mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback);
|
||||
for (const unsubscriber of this.unsubscribers) {
|
||||
unsubscriber();
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
|
@ -318,18 +343,26 @@ export class SimplePeer {
|
|||
private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
|
||||
if (blackListManager.isBlackListed(data.userId)) return;
|
||||
console.log("receiveWebrtcScreenSharingSignal", data);
|
||||
const streamResult = get(screenSharingLocalStreamStore);
|
||||
let stream : MediaStream | null = null;
|
||||
if (streamResult.type === 'success' && streamResult.stream !== null) {
|
||||
stream = streamResult.stream;
|
||||
}
|
||||
|
||||
try {
|
||||
//if offer type, create peer connection
|
||||
if(data.signal.type === "offer"){
|
||||
this.createPeerScreenSharingConnection(data);
|
||||
this.createPeerScreenSharingConnection(data, stream);
|
||||
}
|
||||
const peer = this.PeerScreenSharingConnectionArray.get(data.userId);
|
||||
if (peer !== undefined) {
|
||||
peer.signal(data.signal);
|
||||
} else {
|
||||
console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
|
||||
console.info('tentative to create new peer connexion');
|
||||
this.sendLocalScreenSharingStreamToUser(data.userId);
|
||||
console.info('Attempt to create new peer connexion');
|
||||
if (stream) {
|
||||
this.sendLocalScreenSharingStreamToUser(data.userId, stream);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`receiveWebrtcSignal => ${data.userId}`, e);
|
||||
|
|
@ -339,21 +372,19 @@ export class SimplePeer {
|
|||
}
|
||||
}
|
||||
|
||||
private pushVideoToRemoteUser(userId : number) {
|
||||
private pushVideoToRemoteUser(userId: number, streamResult: LocalStreamStoreValue) {
|
||||
try {
|
||||
const PeerConnection = this.PeerConnectionArray.get(userId);
|
||||
if (!PeerConnection) {
|
||||
throw new Error('While adding media, cannot find user with ID ' + userId);
|
||||
}
|
||||
|
||||
const result = get(localStreamStore);
|
||||
PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints})));
|
||||
|
||||
PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...result.constraints})));
|
||||
|
||||
if (result.type === 'error') {
|
||||
if (streamResult.type === 'error') {
|
||||
return;
|
||||
}
|
||||
const localStream: MediaStream | null = result.stream;
|
||||
const localStream: MediaStream | null = streamResult.stream;
|
||||
|
||||
if(!localStream){
|
||||
return;
|
||||
|
|
@ -370,15 +401,11 @@ export class SimplePeer {
|
|||
}
|
||||
}
|
||||
|
||||
private pushScreenSharingToRemoteUser(userId : number) {
|
||||
private pushScreenSharingToRemoteUser(userId: number, localScreenCapture: MediaStream) {
|
||||
const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
|
||||
if (!PeerConnection) {
|
||||
throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
|
||||
}
|
||||
const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
|
||||
if(!localScreenCapture){
|
||||
return;
|
||||
}
|
||||
|
||||
for (const track of localScreenCapture.getTracks()) {
|
||||
PeerConnection.addTrack(track, localScreenCapture);
|
||||
|
|
@ -386,23 +413,18 @@ export class SimplePeer {
|
|||
return;
|
||||
}
|
||||
|
||||
public sendLocalVideoStream(){
|
||||
public sendLocalVideoStream(streamResult: LocalStreamStoreValue){
|
||||
for (const user of this.Users) {
|
||||
this.pushVideoToRemoteUser(user.userId);
|
||||
this.pushVideoToRemoteUser(user.userId, streamResult);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Triggered locally when clicking on the screen sharing button
|
||||
*/
|
||||
public sendLocalScreenSharingStream() {
|
||||
if (!mediaManager.localScreenCapture) {
|
||||
console.error('Could not find localScreenCapture to share')
|
||||
return;
|
||||
}
|
||||
|
||||
public sendLocalScreenSharingStream(localScreenCapture: MediaStream) {
|
||||
for (const user of this.Users) {
|
||||
this.sendLocalScreenSharingStreamToUser(user.userId);
|
||||
this.sendLocalScreenSharingStreamToUser(user.userId, localScreenCapture);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -415,11 +437,11 @@ export class SimplePeer {
|
|||
}
|
||||
}
|
||||
|
||||
private sendLocalScreenSharingStreamToUser(userId: number): void {
|
||||
private sendLocalScreenSharingStreamToUser(userId: number, localScreenCapture: MediaStream): void {
|
||||
if (blackListManager.isBlackListed(userId)) return;
|
||||
// If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
|
||||
if (this.PeerScreenSharingConnectionArray.has(userId)) {
|
||||
this.pushScreenSharingToRemoteUser(userId);
|
||||
this.pushScreenSharingToRemoteUser(userId, localScreenCapture);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -427,7 +449,7 @@ export class SimplePeer {
|
|||
userId,
|
||||
initiator: true
|
||||
};
|
||||
const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser);
|
||||
const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser, localScreenCapture);
|
||||
if (!PeerConnectionScreenSharing) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue