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

[mirotalksfu] - add screen share before join + update dep

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2023-03-06 18:14:09 +01:00
الأصل ee5508d946
التزام 1856be737c
6 ملفات معدلة مع 87 إضافات و21 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
app/src/Server.js
عرض الملف

@@ -38,7 +38,7 @@ dependencies: {
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.0.3
* @version 1.0.4
*
*/

8
package.json
عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.0.3",
"version": "1.0.4",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {
@@ -24,8 +24,8 @@
"author": "Miroslav Pejic",
"license": "AGPL-3.0",
"dependencies": {
"@sentry/integrations": "7.40.0",
"@sentry/node": "7.40.0",
"@sentry/integrations": "7.41.0",
"@sentry/node": "7.41.0",
"body-parser": "1.20.2",
"colors": "1.4.0",
"compression": "1.7.4",
@@ -33,7 +33,7 @@
"crypto-js": "4.1.1",
"express": "4.18.2",
"httpolyglot": "0.1.2",
"mediasoup": "3.11.12",
"mediasoup": "3.11.13",
"mediasoup-client": "3.6.82",
"ngrok": "^3.4.1",
"qs": "6.11.0",

4
public/css/Room.css
عرض الملف

@@ -212,7 +212,9 @@ body {
#initAudioButton,
#initVideoButton,
#initAudioVideoButton {
#initAudioVideoButton,
#initStartScreenButton,
#initStopScreenButton {
font-size: 1.2rem;
padding: 10px;
border: var(--border);

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

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.0.3
* @version 1.0.4
*
*/
@@ -92,6 +92,7 @@ let isVideoControlsOn = false;
let isChatPasteTxt = false;
let isChatMarkdownOn = false;
let joinRoomWithoutAudioVideo = true;
let joinRoomWithScreen = false;
let initAudioButton = null;
let initVideoButton = null;
let initAudioVideoButton = null;
@@ -231,6 +232,9 @@ async function initEnumerateDevices() {
console.log('01 ----> init Enumerate Devices');
await initEnumerateVideoDevices();
await initEnumerateAudioDevices();
if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
BUTTONS.main.startScreenButton && show(initStartScreenButton);
}
whoAreYou();
if (!isVideoAllowed) {
hide(initVideo);
@@ -496,7 +500,7 @@ function whoAreYou() {
peer_name = name;
},
}).then(() => {
if (initStream) {
if (initStream && !joinRoomWithScreen) {
stopTracks(initStream);
hide(initVideo);
}
@@ -695,6 +699,7 @@ function joinRoom(peer_name, room_id) {
isAudioAllowed,
isVideoAllowed,
isScreenAllowed,
joinRoomWithScreen,
roomIsReady,
);
handleRoomClientEvents();
@@ -777,6 +782,10 @@ function show(elem) {
elem.className = '';
}
function disable(elem, disabled) {
elem.disabled = disabled;
}
function setColor(elem, color) {
elem.style.color = color;
}
@@ -1065,9 +1074,11 @@ function handleButtons() {
function setButtonsInit() {
if (!DetectRTC.isMobileDevice) {
setTippy('initAudioButton', 'Toggle the audio', 'left');
setTippy('initVideoButton', 'Toggle the video', 'right');
setTippy('initAudioVideoButton', 'Toggle the audio & video', 'right');
setTippy('initAudioButton', 'Toggle the audio', 'top');
setTippy('initVideoButton', 'Toggle the video', 'top');
setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top');
setTippy('initStartScreenButton', 'Toggle screen sharing', 'top');
setTippy('initStopScreenButton', 'Toggle screen sharing', 'top');
}
initAudioButton = document.getElementById('initAudioButton');
initVideoButton = document.getElementById('initVideoButton');
@@ -1139,7 +1150,7 @@ function setSelectsInit() {
if (initVideoSelect.value) changeCamera(initVideoSelect.value);
}
function changeCamera(deviceId) {
async function changeCamera(deviceId) {
if (initStream) {
stopTracks(initStream);
show(initVideo);
@@ -1150,7 +1161,7 @@ function changeCamera(deviceId) {
initVideo.className = 'mirror';
initVideo.srcObject = camStream;
initStream = camStream;
console.log('04.5 ----> Success attached init video stream');
console.log('04.5 ----> Success attached init cam video stream', initStream);
})
.catch((err) => {
console.error('[Error] changeCamera', err);
@@ -1158,6 +1169,39 @@ function changeCamera(deviceId) {
});
}
async function toggleScreenSharing() {
if (initStream) {
stopTracks(initStream);
show(initVideo);
}
joinRoomWithScreen = !joinRoomWithScreen;
if (joinRoomWithScreen) {
navigator.mediaDevices
.getDisplayMedia({ audio: true, video: true })
.then((screenStream) => {
initVideo.srcObject = screenStream;
initStream = screenStream;
console.log('04.6 ----> Success attached init screen video stream', initStream);
show(initStopScreenButton);
hide(initStartScreenButton);
disable(initVideoSelect, true);
disable(initVideoButton, true);
disable(initAudioVideoButton, true);
})
.catch((err) => {
console.error('[Error] toggleScreenSharing', err);
userLog('error', 'Error while toggleScreenSharing' + err.tostring(), 'top-end');
});
} else {
checkInitVideo(isVideoAllowed);
hide(initStopScreenButton);
show(initStartScreenButton);
disable(initVideoSelect, false);
disable(initVideoButton, false);
disable(initAudioVideoButton, false);
}
}
function handleSelects() {
// devices options
videoSelect.onchange = () => {
@@ -1381,6 +1425,10 @@ 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');

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

@@ -9,7 +9,7 @@
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.0.3
* @version 1.0.4
*
*/
@@ -110,6 +110,7 @@ class RoomClient {
isAudioAllowed,
isVideoAllowed,
isScreenAllowed,
joinRoomWithScreen,
successCallback,
) {
this.localAudioEl = localAudioEl;
@@ -128,6 +129,7 @@ class RoomClient {
this.isAudioAllowed = isAudioAllowed;
this.isVideoAllowed = isVideoAllowed;
this.isScreenAllowed = isScreenAllowed;
this.joinRoomWithScreen = joinRoomWithScreen;
this.producerTransport = null;
this.consumerTransport = null;
this.device = null;
@@ -284,7 +286,7 @@ class RoomClient {
this.device = await this.loadDevice(data);
console.log('07.1 ----> Get Router Rtp Capabilities codecs: ', this.device.rtpCapabilities.codecs);
await this.initTransports(this.device);
this.startLocalMedia();
await this.startLocalMedia();
this.socket.emit('getProducers');
}
@@ -642,7 +644,7 @@ class RoomClient {
// START LOCAL AUDIO VIDEO MEDIA
// ####################################################
startLocalMedia() {
async startLocalMedia() {
console.log('08 ----> Start local media');
if (this.isAudioAllowed) {
console.log('09 ----> Start audio media');
@@ -660,6 +662,10 @@ class RoomClient {
this.setVideoOff(this.peer_info, false);
this.sendVideoOff();
}
if (this.joinRoomWithScreen) {
console.log('08 ----> Start Screen media');
this.produce(mediaType.screen, null, false, true);
}
// if (this.isScreenAllowed) {
// this.shareScreen();
// }
@@ -669,7 +675,7 @@ class RoomClient {
// PRODUCER
// ####################################################
async produce(type, deviceId = null, swapCamera = false) {
async produce(type, deviceId = null, swapCamera = false, init = false) {
let mediaConstraints = {};
let audio = false;
let screen = false;
@@ -708,9 +714,13 @@ class RoomClient {
let stream;
try {
stream = screen
? await navigator.mediaDevices.getDisplayMedia(mediaConstraints)
: await navigator.mediaDevices.getUserMedia(mediaConstraints);
if (init) {
stream = initStream;
} else {
stream = screen
? await navigator.mediaDevices.getDisplayMedia(mediaConstraints)
: await navigator.mediaDevices.getUserMedia(mediaConstraints);
}
console.log('Supported Constraints', navigator.mediaDevices.getSupportedConstraints());

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

@@ -108,13 +108,19 @@ access to use this app.
id="initVideo"
playsinline="true"
autoplay=""
poster="../images/loader.gif"
class="mirror"
poster="../images/loader.gif"
style="object-fit: var(--videoObjFit)"
></video>
<button id="initAudioButton" class="fas fa-microphone" onclick="handleAudio(event)"></button>
<button id="initVideoButton" class="fas fa-video" onclick="handleVideo(event)"></button>
<button id="initAudioVideoButton" class="fas fa-eye" onclick="handleAudioVideo(event)"></button>
<button id="initStartScreenButton" class="" onclick="toggleScreenSharing()">
<i class="fas fa-desktop"></i>
</button>
<button id="initStopScreenButton" class="hidden" onclick="toggleScreenSharing()">
<i class="fas fa-stop-circle"></i>
</button>
<select id="initVideoSelect" class="form-select text-light bg-dark"></select>
<select id="initMicrophoneSelect" class="form-select text-light bg-dark"></select>
<select id="initSpeakerSelect" class="form-select text-light bg-dark"></select>