ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - add hideMe button

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2023-03-31 20:31:51 +02:00
الأصل d2d63bf405
التزام fd103211a5
6 ملفات معدلة مع 158 إضافات و78 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

12
public/js/Room.js
عرض الملف

@@ -78,6 +78,7 @@ let notify = getNotify();
let peer_geo = null;
let peer_info = null;
let isHideMeActive = false;
let isPitchBarEnabled = true;
let isSoundEnabled = true;
let isLobbyEnabled = false;
@@ -124,6 +125,7 @@ let initStream = null;
function initClient() {
if (!DetectRTC.isMobileDevice) {
setTippy('shareButton', 'Share room', 'right');
setTippy('hideMeButton', 'Toggle hide me', 'right');
setTippy('startAudioButton', 'Start the audio', 'right');
setTippy('stopAudioButton', 'Stop the audio', 'right');
setTippy('startVideoButton', 'Start the video', 'right');
@@ -729,6 +731,7 @@ function roomIsReady() {
setTheme('dark');
BUTTONS.main.exitButton && show(exitButton);
BUTTONS.main.shareButton && show(shareButton);
BUTTONS.main.hideMeButton && show(hideMeButton);
if (BUTTONS.settings.tabRecording) {
show(startRecButton);
} else {
@@ -888,6 +891,9 @@ function handleButtons() {
shareButton.onclick = () => {
shareRoom(true);
};
hideMeButton.onclick = (e) => {
rc.handleHideMe();
};
settingsButton.onclick = () => {
rc.toggleMySettings();
};
@@ -995,11 +1001,13 @@ function handleButtons() {
startVideoButton.onclick = () => {
setVideoButtonsDisabled(true);
if (!isEnumerateVideoDevices) initEnumerateVideoDevices();
if (isHideMeActive) rc.handleHideMe();
rc.produce(RoomClient.mediaType.video, videoSelect.value);
// rc.resumeProducer(RoomClient.mediaType.video);
};
stopVideoButton.onclick = () => {
setVideoButtonsDisabled(true);
if (isHideMeActive) rc.handleHideMe();
rc.closeProducer(RoomClient.mediaType.video);
// rc.pauseProducer(RoomClient.mediaType.video);
};
@@ -1464,10 +1472,6 @@ function handleRoomClientEvents() {
console.log('Room Client stop screen');
hide(stopScreenButton);
show(startScreenButton);
if (initStream) {
stopTracks(initStream);
hide(initVideo);
}
});
rc.on(RoomClient.EVENTS.roomLock, () => {
console.log('Room Client lock room');

202
public/js/RoomClient.js
عرض الملف

@@ -20,6 +20,8 @@ const cfg = {
const html = {
newline: '<br />',
hideMeOn: 'fas fa-user-slash',
hideMeOff: 'fas fa-user',
audioOn: 'fas fa-microphone',
audioOff: 'fas fa-microphone-slash',
videoOn: 'fas fa-video',
@@ -191,6 +193,7 @@ class RoomClient {
this.showPeerInfo = false;
this.videoProducerId = null;
this.screenProducerId = null;
this.audioProducerId = null;
this.audioConsumers = new Map();
@@ -782,7 +785,8 @@ class RoomClient {
let elem, au;
if (!audio) {
this.localVideoStream = stream;
this.videoProducerId = producer.id;
if (type == mediaType.video) this.videoProducerId = producer.id;
if (type == mediaType.screen) this.screenProducerId = producer.id;
elem = await this.handleProducer(producer.id, type, stream);
//if (!screen && !isEnumerateDevices) enumerateVideoDevices(stream);
} else {
@@ -875,74 +879,9 @@ class RoomClient {
}
}
async produceScreenAudio(stream) {
try {
this.stopMyAudio();
if (this.producerLabel.has(mediaType.audio)) {
return console.log('Producer already exists for this type ' + mediaType.audio);
}
const track = stream.getAudioTracks()[0];
const params = {
track,
appData: {
mediaType: mediaType.audio,
},
};
const producerSa = await this.producerTransport.produce(params);
console.log('PRODUCER SCREEN AUDIO', producerSa);
this.producers.set(producerSa.id, producerSa);
const sa = await this.handleProducer(producerSa.id, mediaType.audio, stream);
producerSa.on('trackended', () => {
this.closeProducer(mediaType.audio);
this.startMyAudio();
});
producerSa.on('transportclose', () => {
console.log('Producer Screen audio transport close');
sa.srcObject.getTracks().forEach(function (track) {
track.stop();
});
sa.parentNode.removeChild(sa);
console.log('[transportClose] audio-element-count', this.localAudioEl.childElementCount);
this.producers.delete(producerSa.id);
});
producerSa.on('close', () => {
console.log('Closing Screen audio producer');
sa.srcObject.getTracks().forEach(function (track) {
track.stop();
});
sa.parentNode.removeChild(sa);
console.log('[closingProducer] audio-element-count', this.localAudioEl.childElementCount);
this.producers.delete(producerSa.id);
});
this.producerLabel.set(mediaType.audio, producerSa.id);
} catch (err) {
console.error('Produce error:', err);
}
}
startMyAudio() {
startAudioButton.click();
this.setIsAudio(this.peer_id, true);
this.event(_EVENTS.startAudio);
setAudioButtonsDisabled(false);
}
stopMyAudio() {
stopAudioButton.click();
this.setIsAudio(this.peer_id, false);
this.event(_EVENTS.stopAudio);
setAudioButtonsDisabled(true);
}
// ####################################################
// AUDIO/VIDEO CONSTRAINTS
// ####################################################
getAudioConstraints(deviceId) {
return {
@@ -1093,6 +1032,10 @@ class RoomClient {
};
}
// ####################################################
// WEBCAM ENCODING
// ####################################################
getWebCamEncoding() {
let encodings;
let codec;
@@ -1160,6 +1103,10 @@ class RoomClient {
return { encodings, codec };
}
// ####################################################
// SCREEN ENCODING
// ####################################################
getScreenEncoding() {
let encodings;
let codec;
@@ -1231,6 +1178,36 @@ class RoomClient {
return { encodings, codec };
}
// ####################################################
// PRODUCER
// ####################################################
handleHideMe() {
isHideMeActive = !isHideMeActive;
//const myScreenWrap = this.getId(this.screenProducerId + '__video');
const myVideoWrap = this.getId(this.videoProducerId + '__video');
const myVideoWrapOff = this.getId(this.peer_id + '__videoOff');
const myVideoPinBtn = this.getId(this.videoProducerId + '__pin');
const myScreenPinBtn = this.getId(this.screenProducerId + '__pin');
console.log('handleHideMe', {
isHideMeActive: isHideMeActive,
//myScreenWrap: myScreenWrap ? myScreenWrap.id : null,
myVideoWrap: myVideoWrap ? myVideoWrap.id : null,
myVideoWrapOff: myVideoWrapOff ? myVideoWrapOff.id : null,
myVideoPinBtn: myVideoPinBtn ? myVideoPinBtn.id : null,
myScreenPinBtn: myScreenPinBtn ? myScreenPinBtn.id : null,
});
//if (myScreenWrap) myScreenWrap.style.display = isHideMeActive ? 'none' : 'block';
if (isHideMeActive && this.isVideoPinned && myVideoPinBtn) myVideoPinBtn.click();
if (isHideMeActive && this.isVideoPinned && myScreenPinBtn) myScreenPinBtn.click();
if (myVideoWrap) myVideoWrap.style.display = isHideMeActive ? 'none' : 'block';
if (myVideoWrapOff) myVideoWrapOff.style.display = isHideMeActive ? 'none' : 'block';
hideMeIcon.className = isHideMeActive ? html.hideMeOn : html.hideMeOff;
hideMeIcon.style.color = isHideMeActive ? 'red' : 'white';
isHideMeActive ? this.sound('left') : this.sound('joined');
resizeVideoMedia();
}
closeThenProduce(type, deviceId, swapCamera = false) {
this.closeProducer(type);
setTimeout(function () {
@@ -1459,6 +1436,75 @@ class RoomClient {
this.sound('left');
}
async produceScreenAudio(stream) {
try {
this.stopMyAudio();
if (this.producerLabel.has(mediaType.audio)) {
return console.log('Producer already exists for this type ' + mediaType.audio);
}
const track = stream.getAudioTracks()[0];
const params = {
track,
appData: {
mediaType: mediaType.audio,
},
};
const producerSa = await this.producerTransport.produce(params);
console.log('PRODUCER SCREEN AUDIO', producerSa);
this.producers.set(producerSa.id, producerSa);
const sa = await this.handleProducer(producerSa.id, mediaType.audio, stream);
producerSa.on('trackended', () => {
this.closeProducer(mediaType.audio);
this.startMyAudio();
});
producerSa.on('transportclose', () => {
console.log('Producer Screen audio transport close');
sa.srcObject.getTracks().forEach(function (track) {
track.stop();
});
sa.parentNode.removeChild(sa);
console.log('[transportClose] audio-element-count', this.localAudioEl.childElementCount);
this.producers.delete(producerSa.id);
});
producerSa.on('close', () => {
console.log('Closing Screen audio producer');
sa.srcObject.getTracks().forEach(function (track) {
track.stop();
});
sa.parentNode.removeChild(sa);
console.log('[closingProducer] audio-element-count', this.localAudioEl.childElementCount);
this.producers.delete(producerSa.id);
});
this.producerLabel.set(mediaType.audio, producerSa.id);
} catch (err) {
console.error('Produce error:', err);
}
}
startMyAudio() {
startAudioButton.click();
this.setIsAudio(this.peer_id, true);
this.event(_EVENTS.startAudio);
setAudioButtonsDisabled(false);
}
stopMyAudio() {
stopAudioButton.click();
this.setIsAudio(this.peer_id, false);
this.event(_EVENTS.stopAudio);
setAudioButtonsDisabled(true);
}
// ####################################################
// CONSUMER
// ####################################################
@@ -2128,6 +2174,21 @@ class RoomClient {
},
});
break;
case 'toast':
const Toast = Swal.mixin({
background: swalBackground,
position: 'top-end',
icon: 'info',
showConfirmButton: false,
timerProgressBar: true,
toast: true,
timer: 3000,
});
Toast.fire({
icon: 'info',
title: message,
});
break;
// ......
default:
alert(message);
@@ -2290,6 +2351,7 @@ class RoomClient {
let cam = this.getId(camId);
if (btnPn && videoPlayer && cam) {
btnPn.addEventListener('click', () => {
if (this.isMobileDevice) return;
this.sound('click');
this.isVideoPinned = !this.isVideoPinned;
if (this.isVideoPinned) {
@@ -2308,7 +2370,7 @@ class RoomClient {
if (this.pinnedVideoPlayerId != videoPlayer.id) {
this.isVideoPinned = true;
if (this.isScreenAllowed) return;
return this.msgPopup('info', 'Another video seems pinned, unpin it before to pin this one');
return this.msgPopup('toast', 'Another video seems pinned, unpin it before to pin this one');
}
if (!isScreen) videoPlayer.style.objectFit = 'var(--videoObjFit)';
this.videoPinMediaContainer.removeChild(cam);

1
public/js/Rules.js
عرض الملف

@@ -11,6 +11,7 @@ const isRulesActive = true;
const BUTTONS = {
main: {
shareButton: true,
hideMeButton: true,
startAudioButton: true,
startVideoButton: true,
startScreenButton: true,

10
public/js/SpeechRec.js
عرض الملف

@@ -10,6 +10,8 @@ const speechRecognition = window.SpeechRecognition || window.webkitSpeechRecogni
const commands = {
shareRoom: 'room',
hideMe: 'hide me',
showMe: 'show me',
newRoom: 'new room',
leaveRoom: 'exit the room',
audioOn: 'start the audio',
@@ -131,6 +133,14 @@ function execVoiceCommands(transcript) {
printCommand(commands.shareRoom);
shareButton.click();
break;
case commands.hideMe:
printCommand(commands.hideMe);
hideMeButton.click();
break;
case commands.showMe:
printCommand(commands.showMe);
hideMeButton.click();
break;
case commands.newRoom:
printCommand(commands.newRoom);
openURL(browser.newroom);

10
public/js/VideoGrid.js
عرض الملف

@@ -44,10 +44,13 @@ function resizeVideoMedia() {
let Width = videoMediaContainer.offsetWidth - Margin * 2;
let Height = videoMediaContainer.offsetHeight - Margin * 2;
let max = 0;
let optional = isHideMeActive ? 1 : 0;
let isOneVideoElement = videoMediaContainer.childElementCount - optional == 1 ? true : false;
console.log('videoMediaContainer.childElementCount: ', videoMediaContainer.childElementCount - optional);
// full screen mode
let bigWidth = Width * 4;
if (videoMediaContainer.childElementCount == 1) {
if (videoMediaContainer.childElementCount - optional == 1) {
Width = Width - bigWidth;
}
@@ -63,13 +66,12 @@ function resizeVideoMedia() {
}
max = max - Margin * 2;
setWidth(videoMediaContainer, Cameras, max, bigWidth, Margin, Height);
setWidth(Cameras, max, bigWidth, Margin, Height, isOneVideoElement);
document.documentElement.style.setProperty('--vmi-wh', max / 3 + 'px');
}
function setWidth(videoMediaContainer, Cameras, width, bigWidth, margin, maxHeight) {
function setWidth(Cameras, width, bigWidth, margin, maxHeight, isOneVideoElement) {
ratio = customRatio ? 0.68 : ratio;
let isOneVideoElement = videoMediaContainer.childElementCount == 1 ? true : false;
for (let s = 0; s < Cameras.length; s++) {
Cameras[s].style.width = width + 'px';
Cameras[s].style.margin = margin + 'px';

1
public/views/Room.html
عرض الملف

@@ -129,6 +129,7 @@ access to use this app.
<div id="control" class="fadein">
<button id="shareButton" class="hidden"><i class="fas fa-share-alt"></i></button>
<button id="hideMeButton" class="hidden"><i id="hideMeIcon" class="fas fa-user"></i></button>
<button id="startAudioButton" class="hidden"><i class="fas fa-microphone-slash"></i></button>
<button id="stopAudioButton" class="hidden"><i class="fas fa-microphone"></i></button>
<button id="startVideoButton" class="hidden"><i class="fas fa-video-slash"></i></button>