[mirotalksfu] - add toggle video mirror

هذا الالتزام موجود في:
Miroslav Pejic
2024-08-02 19:21:30 +02:00
الأصل 1ea868cc4e
التزام 151fd309de
6 ملفات معدلة مع 35 إضافات و7 حذوفات

عرض الملف

@@ -44,7 +44,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.5.34
* @version 1.5.35
*
*/

عرض الملف

@@ -1,6 +1,6 @@
{
"name": "mirotalksfu",
"version": "1.5.34",
"version": "1.5.35",
"description": "WebRTC SFU browser-based video calls",
"main": "Server.js",
"scripts": {

عرض الملف

@@ -442,6 +442,10 @@ th {
width: 180px;
}
#VideoMirrorDiv {
margin-top: 10px;
}
/*--------------------------------------------------------------
# RTMP settings
--------------------------------------------------------------*/

عرض الملف

@@ -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.5.34
* @version 1.5.35
*
*/
@@ -2277,6 +2277,11 @@ function handleSelects() {
lS.setSettings(localStorageSettings);
e.target.blur();
};
switchVideoMirror.onchange = (e) => {
rc.toggleVideoMirror();
rc.roomMessage('toggleVideoMirror', e.currentTarget.checked);
e.target.blur();
};
switchSounds.onchange = (e) => {
isSoundEnabled = e.currentTarget.checked;
rc.roomMessage('sounds', isSoundEnabled);
@@ -2783,6 +2788,7 @@ function handleRoomClientEvents() {
show(stopVideoButton);
setColor(startVideoButton, 'red');
setVideoButtonsDisabled(false);
switchVideoMirror.disabled = false;
// if (isParticipantsListOpen) getRoomParticipants();
});
rc.on(RoomClient.EVENTS.pauseVideo, () => {
@@ -2805,6 +2811,7 @@ function handleRoomClientEvents() {
show(startVideoButton);
setVideoButtonsDisabled(false);
isVideoPrivacyActive = false;
switchVideoMirror.disabled = true;
// if (isParticipantsListOpen) getRoomParticipants();
});
rc.on(RoomClient.EVENTS.startScreen, () => {
@@ -4325,7 +4332,7 @@ function showAbout() {
imageUrl: image.about,
customClass: { image: 'img-about' },
position: 'center',
title: 'WebRTC SFU v1.5.34',
title: 'WebRTC SFU v1.5.35',
html: `
<br />
<div id="about">

عرض الملف

@@ -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.5.34
* @version 1.5.35
*
*/
@@ -57,6 +57,7 @@ const icons = {
lock: '<i class="fa-solid fa-lock"></i>',
unlock: '<i class="fa-solid fa-lock-open"></i>',
pitchBar: '<i class="fas fa-microphone-lines"></i>',
mirror: '<i class="fas fa-arrow-right-arrow-left"></i>',
sounds: '<i class="fas fa-music"></i>',
fileSend: '<i class="fa-solid fa-file-export"></i>',
fileReceive: '<i class="fa-solid fa-file-import"></i>',
@@ -5799,6 +5800,9 @@ class RoomClient {
const status = active ? 'ON' : 'OFF';
this.sound('switch');
switch (action) {
case 'toggleVideoMirror':
this.userLog('info', `${icons.mirror} Video mirror ${status}`, 'top-end');
break;
case 'pitchBar':
this.userLog('info', `${icons.pitchBar} Audio pitch bar ${status}`, 'top-end');
break;
@@ -8183,6 +8187,11 @@ class RoomClient {
});
}
toggleVideoMirror() {
const peerVideo = this.getName(this.peer_id)[0];
if (peerVideo) peerVideo.classList.toggle('mirror');
}
sleep(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

عرض الملف

@@ -366,6 +366,15 @@ access to use this app.
<p>Video Source:</p>
</div>
<select id="videoSelect" class="form-select text-light bg-dark"></select>
<div id="VideoMirrorDiv">
<div class="title">
<i class="fas fa-arrow-right-arrow-left"></i>
<p>Toggle mirror</p>
<div class="form-check form-switch form-switch-md">
<input id="switchVideoMirror" class="form-check-input" type="checkbox" checked />
</div>
</div>
</div>
<br />
<div class="title">
<i class="fas fa-palette"></i>
@@ -380,7 +389,7 @@ access to use this app.
<option value="2k">🎥&nbsp;2k</option>
<option value="4k">🎥&nbsp;4K</option>
</select>
<br />
<hr />
<div class="title">
<i class="fa-solid fa-camera"></i>
<p>Camera FPS:</p>
@@ -608,7 +617,6 @@ access to use this app.
<p>Speaker:</p>
</div>
<select id="speakerSelect" class="form-select text-light bg-dark"></select>
<hr />
<button id="speakerTestBtn" class="btn-custom">
<i class="fa-solid fa-circle-play"></i>
<p>Test speaker</p>