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

[mirotalk] - add start captions

Browse Source
This commit is contained in:
Miroslav Pejic
2024-12-12 22:00:28 +01:00
parent bc6739452d
commit ff4ac3b8a9
7 changed files with 90 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/server.js
+10 -1
View File
@@ -39,7 +39,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.3.96
* @version 1.3.97
*
*/
@@ -1469,6 +1469,15 @@ io.sockets.on('connect', async (socket) => {
}
});
/**
* Start caption
*/
socket.on('caption', async (cfg) => {
// Prevent XSS injection
const config = checkXSS(cfg);
await sendToRoom(cfg.room_id, sockets, 'caption', config);
});
/**
* Relay Kick out peer from room
*/
package.json
+3 -3
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.3.96",
"version": "1.3.97",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
@@ -42,7 +42,7 @@
"homepage": "https://github.com/miroslavpejic85/mirotalk",
"dependencies": {
"@mattermost/client": "^10.2.0",
"@sentry/node": "^8.42.0",
"@sentry/node": "^8.44.0",
"axios": "^1.7.9",
"colors": "^1.4.0",
"compression": "^1.7.5",
@@ -55,7 +55,7 @@
"js-yaml": "^4.1.0",
"ngrok": "^5.0.0-beta.2",
"nodemailer": "^6.9.16",
"openai": "^4.76.0",
"openai": "^4.76.2",
"qs": "^6.13.1",
"socket.io": "^4.8.1",
"swagger-ui-express": "^5.0.1",
public/css/client.css
+7
View File
@@ -1142,6 +1142,7 @@ button:hover {
}
#myPeerNameSetBtn,
#captionEveryoneBtn,
#muteEveryoneBtn,
#hideEveryoneBtn,
#ejectEveryoneBtn,
@@ -1188,6 +1189,12 @@ button:hover {
transition: all 0.3s ease-in-out;
}
#captionEveryoneBtn:hover {
color: green;
transform: translateY(-3px);
transition: all 0.3s ease-in-out;
}
/*--------------------------------------------------------------
# Settings Table
--------------------------------------------------------------*/
public/images/caption.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

public/js/client.js
+68 -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.3.96
* @version 1.3.97
*
*/
@@ -33,6 +33,7 @@ const myRoomUrl = window.location.origin + '/join/' + roomId; // share room url
// Images
const images = {
caption: '../images/caption.png',
confirmation: '../images/image-placeholder.png',
share: '../images/share.png',
locked: '../images/locked.png',
@@ -401,6 +402,7 @@ const whiteboardUnlockBtn = getId('whiteboardUnlockBtn');
const whiteboardCloseBtn = getId('whiteboardCloseBtn');
// Room actions buttons
const captionEveryoneBtn = getId('captionEveryoneBtn');
const muteEveryoneBtn = getId('muteEveryoneBtn');
const hideEveryoneBtn = getId('hideEveryoneBtn');
const ejectEveryoneBtn = getId('ejectEveryoneBtn');
@@ -1142,6 +1144,7 @@ function initClientPeer() {
signalingSocket.on('message', handleMessage);
signalingSocket.on('wbCanvasToJson', handleJsonToWbCanvas);
signalingSocket.on('whiteboardAction', handleWhiteboardAction);
signalingSocket.on('caption', handleCaptionActions);
signalingSocket.on('kickOut', handleKickedOut);
signalingSocket.on('fileInfo', handleFileInfo);
signalingSocket.on('fileAbort', handleFileAbort);
@@ -1363,6 +1366,7 @@ function handleButtonsRule() {
elemDisplay(captionMaxBtn, !isMobileDevice && buttons.caption.showMaxBtn);
// Settings
elemDisplay(dropDownMicOptions, buttons.settings.showMicOptionsBtn && isPresenter); // auto-detected
elemDisplay(captionEveryoneBtn, buttons.settings.showCaptionEveryoneBtn);
elemDisplay(muteEveryoneBtn, buttons.settings.showMuteEveryoneBtn);
elemDisplay(hideEveryoneBtn, buttons.settings.showHideEveryoneBtn);
elemDisplay(ejectEveryoneBtn, buttons.settings.showEjectEveryoneBtn);
@@ -5542,6 +5546,17 @@ function setupMySettings() {
elemDisplay(pinUnpinGridDiv, false);
}
// room actions
captionEveryoneBtn.addEventListener('click', (e) => {
sendToServer('caption', {
room_id: roomId,
peer_name: myPeerName,
action: 'start',
data: {
recognitionLanguageIndex: recognitionLanguage.selectedIndex,
recognitionDialectIndex: recognitionDialect.selectedIndex,
},
});
});
muteEveryoneBtn.addEventListener('click', (e) => {
disableAllPeers('audio');
});
@@ -10542,6 +10557,57 @@ function kickOut(peer_id) {
});
}
/**
* Start caption if not already started
* @param {object} config data
*/
function handleCaptionActions(config) {
const { peer_name, action } = config;
switch (action) {
case 'start':
if (!speechRecognition || !buttons.main.showCaptionRoomBtn) {
userLog(
'info',
`${peer_name} wants to start captions for this session, but your browser does not support it. Please use a Chromium-based browser like Google Chrome, Microsoft Edge, or Brave.`,
);
return;
}
if (recognitionRunning) return;
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
showDenyButton: true,
background: swBg,
imageUrl: images.caption,
title: 'Start Captions',
text: `${peer_name} wants to start the captions for this session. Would you like to enable them?`,
confirmButtonText: `Yes`,
denyButtonText: `No`,
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
if (!isCaptionBoxVisible) {
captionBtn.click();
}
if (!recognitionRunning) {
const { recognitionLanguageIndex, recognitionDialectIndex } = config.data;
recognitionLanguage.selectedIndex = recognitionLanguageIndex;
updateCountry();
recognitionDialect.selectedIndex = recognitionDialectIndex;
speechRecognitionStart.click();
}
}
});
break;
default:
break;
}
}
/**
* You will be kicked out from the room and popup the peer name that performed this action
* @param {object} config data
@@ -10598,7 +10664,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: '<strong>WebRTC P2P v1.3.96</strong>',
title: '<strong>WebRTC P2P v1.3.97</strong>',
imageAlt: 'mirotalk-about',
imageUrl: images.about,
customClass: { image: 'img-about' },
public/js/config.js
+1
View File
@@ -44,6 +44,7 @@ const buttons = {
showTabRoomParticipants: true,
showTabRoomSecurity: true,
showTabEmailInvitation: true,
showCaptionEveryoneBtn: true,
showMuteEveryoneBtn: true,
showHideEveryoneBtn: true,
showEjectEveryoneBtn: true,
public/views/client.html
+1
View File
@@ -708,6 +708,7 @@ access to use this app.
<br />
<div id="tabRoomParticipants">
<br />
<button id="captionEveryoneBtn"><i class="fas fa-play"></i>&nbsp;Start captions</button>
<button id="muteEveryoneBtn"><i class="fas fa-microphone"></i>&nbsp;Mute everyone</button>
<button id="hideEveryoneBtn"><i class="fas fa-video"></i>&nbsp;Hide everyone</button>
<button id="ejectEveryoneBtn">