aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - add video mirror btn, update dep

Browse Source
This commit is contained in:
Miroslav Pejic
2024-01-17 14:10:39 +01:00
parent 9ff9e91846
commit 7e8d97abe3
4 changed files with 61 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/server.js
+1 -1
View File
@@ -38,7 +38,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.70
* @version 1.2.71
*
*/
package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.2.70",
"version": "1.2.71",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -58,7 +58,7 @@
},
"devDependencies": {
"node-fetch": "^3.3.2",
"nodemon": "^3.0.2",
"prettier": "3.2.1"
"nodemon": "^3.0.3",
"prettier": "3.2.4"
}
}
public/js/client.js
+52 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.2.70
* @version 1.2.71
*
*/
@@ -65,6 +65,7 @@ const className = {
privacy: 'far fa-circle',
snapShot: 'fas fa-camera-retro',
pinUnpin: 'fas fa-map-pin',
mirror: 'fas fa-arrow-right-arrow-left',
zoomIn: 'fas fa-magnifying-glass-plus',
zoomOut: 'fas fa-magnifying-glass-minus',
fullScreen: 'fas fa-expand',
@@ -220,6 +221,7 @@ const initVideo = getId('initVideo');
const initVideoBtn = getId('initVideoBtn');
const initAudioBtn = getId('initAudioBtn');
const initScreenShareBtn = getId('initScreenShareBtn');
const initVideoMirrorBtn = getId('initVideoMirrorBtn');
const initVideoSelect = getId('initVideoSelect');
const initMicrophoneSelect = getId('initMicrophoneSelect');
const initSpeakerSelect = getId('initSpeakerSelect');
@@ -682,6 +684,7 @@ function setButtonsToolTip() {
if (isMobileDevice) return;
// Init buttons
setTippy(initScreenShareBtn, 'Toggle screen sharing', 'top');
setTippy(initVideoMirrorBtn, 'Toggle video mirror', 'top');
// Main buttons
refreshMainButtonsToolTipPlacement();
// Chat room buttons
@@ -1329,6 +1332,7 @@ async function whoAreYou() {
useVideo = false;
elemDisplay(document.getElementById('initVideo'), false);
elemDisplay(document.getElementById('initVideoBtn'), false);
elemDisplay(document.getElementById('initVideoMirrorBtn'), false);
elemDisplay(document.getElementById('initVideoSelect'), false);
elemDisplay(document.getElementById('tabVideoBtn'), false);
}
@@ -2497,6 +2501,7 @@ async function loadLocalMedia(stream, kind) {
const myAudioStatusIcon = document.createElement('button');
const myVideoFullScreenBtn = document.createElement('button');
const myVideoPinBtn = document.createElement('button');
const myVideoMirrorBtn = document.createElement('button');
const myVideoZoomInBtn = document.createElement('button');
const myVideoZoomOutBtn = document.createElement('button');
const myVideoPiPBtn = document.createElement('button');
@@ -2551,6 +2556,10 @@ async function loadLocalMedia(stream, kind) {
myVideoPinBtn.setAttribute('id', 'myVideoPinBtn');
myVideoPinBtn.className = className.pinUnpin;
// my video toggle mirror
myVideoMirrorBtn.setAttribute('id', 'myVideoMirror');
myVideoMirrorBtn.className = className.mirror;
// no mobile devices
if (!isMobileDevice) {
setTippy(mySessionTime, 'Session Time', 'bottom');
@@ -2561,10 +2570,11 @@ async function loadLocalMedia(stream, kind) {
setTippy(myAudioStatusIcon, 'My audio is on', 'bottom');
setTippy(myVideoToImgBtn, 'Take a snapshot', 'bottom');
setTippy(myVideoFullScreenBtn, 'Full screen mode', 'bottom');
setTippy(myVideoZoomInBtn, 'Zoom in video', 'bottom');
setTippy(myVideoPiPBtn, 'Toggle picture in picture', 'bottom');
setTippy(myVideoZoomInBtn, 'Zoom in video', 'bottom');
setTippy(myVideoZoomOutBtn, 'Zoom out video', 'bottom');
setTippy(myVideoPinBtn, 'Toggle Pin video', 'bottom');
setTippy(myVideoMirrorBtn, 'Toggle video mirror', 'bottom');
}
// my video avatar image
@@ -2586,6 +2596,8 @@ async function loadLocalMedia(stream, kind) {
!isMobileDevice && myVideoNavBar.appendChild(myVideoPinBtn);
myVideoNavBar.appendChild(myVideoMirrorBtn);
buttons.local.showVideoPipBtn && myVideoNavBar.appendChild(myVideoPiPBtn);
if (buttons.local.showZoomInOutBtn) {
@@ -2632,6 +2644,8 @@ async function loadLocalMedia(stream, kind) {
attachMediaStream(myLocalMedia, stream);
adaptAspectRatio();
handleVideoToggleMirror(myLocalMedia.id, myVideoMirrorBtn.id);
isVideoFullScreenSupported && handleVideoPlayerFs(myLocalMedia.id, myVideoFullScreenBtn.id);
handleFileDragAndDrop(myLocalMedia.id, myPeerId, true);
@@ -2757,6 +2771,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
const remoteVideoToImgBtn = document.createElement('button');
const remoteVideoFullScreenBtn = document.createElement('button');
const remoteVideoPinBtn = document.createElement('button');
const remoteVideoMirrorBtn = document.createElement('button');
const remoteVideoZoomInBtn = document.createElement('button');
const remoteVideoZoomOutBtn = document.createElement('button');
const remoteVideoPiPBtn = document.createElement('button');
@@ -2830,6 +2845,10 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
remoteVideoPinBtn.setAttribute('id', peer_id + '_pinUnpin');
remoteVideoPinBtn.className = className.pinUnpin;
// remote video toggle mirror
remoteVideoMirrorBtn.setAttribute('id', peer_id + '_toggleMirror');
remoteVideoMirrorBtn.className = className.mirror;
// no mobile devices
if (!isMobileDevice) {
setTippy(remotePeerName, 'Participant name', 'bottom');
@@ -2847,6 +2866,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
setTippy(remoteVideoZoomOutBtn, 'Zoom out video', 'bottom');
setTippy(remoteVideoPiPBtn, 'Toggle picture in picture', 'bottom');
setTippy(remoteVideoPinBtn, 'Toggle Pin video', 'bottom');
setTippy(remoteVideoMirrorBtn, 'Toggle video mirror', 'bottom');
}
// my video avatar image
@@ -2868,6 +2888,8 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
// attach to remote video nav bar
!isMobileDevice && remoteVideoNavBar.appendChild(remoteVideoPinBtn);
remoteVideoNavBar.appendChild(remoteVideoMirrorBtn);
buttons.remote.showVideoPipBtn && remoteVideoNavBar.appendChild(remoteVideoPiPBtn);
if (buttons.remote.showZoomInOutBtn) {
@@ -2927,6 +2949,9 @@ async function loadRemoteMediaStream(stream, peers, peer_id, kind) {
// handle video pin/unpin
handleVideoPinUnpin(remoteMedia.id, remoteVideoPinBtn.id, remoteVideoWrap.id, peer_id, peer_screen_status);
// handle video toggle mirror
handleVideoToggleMirror(remoteMedia.id, remoteVideoMirrorBtn.id);
// handle vide picture in picture
buttons.remote.showVideoPipBtn && handlePictureInPicture(remoteVideoPiPBtn.id, remoteMedia.id);
@@ -3205,6 +3230,22 @@ function setPeerChatAvatarImgName(avatar, peerName) {
}
}
/**
* Handle Video Toggle Mirror
* @param {string} videoId
* @param {string} videoToggleMirrorBtnId
*/
function handleVideoToggleMirror(videoId, videoToggleMirrorBtnId) {
const videoPlayer = getId(videoId);
const videoToggleMirrorBtn = getId(videoToggleMirrorBtnId);
if (videoPlayer && videoToggleMirrorBtn) {
// Toggle video mirror
videoToggleMirrorBtn.addEventListener('click', (e) => {
videoPlayer.classList.toggle('mirror');
});
}
}
/**
* On video player click, go on full screen mode ||
* On button click, go on full screen mode.
@@ -4857,6 +4898,14 @@ async function handleLocalCameraMirror() {
}
}
/**
* Toggle vide mirror
*/
function toggleInitVideoMirror() {
initVideo.classList.toggle('mirror');
myVideo.classList.toggle('mirror');
}
/**
* Get audio - video constraints
* @returns {object} audio - video constraints
@@ -5315,6 +5364,7 @@ async function handleVideo(e, init, force = null) {
initVideoSelect.disabled = !videoStatus;
lS.setInitConfig(lS.MEDIA_TYPE.video, videoStatus);
initVideoContainerShow(videoStatus);
elemDisplay(initVideoMirrorBtn, videoStatus);
}
if (!videoStatus) {
public/views/client.html
+5
View File
@@ -95,6 +95,11 @@ access to use this app.
<button id="initVideoBtn" class="fas fa-video" onclick="handleVideo(event, true)"></button>
<button id="initAudioBtn" class="fas fa-microphone" onclick="handleAudio(event, true)"></button>
<button id="initScreenShareBtn" class="fas fa-desktop"></button>
<button
id="initVideoMirrorBtn"
class="fas fa-arrow-right-arrow-left"
onclick="toggleInitVideoMirror()"
></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>