[mirotalksfu] - add interrupt avatar speaking button

app/src/Server.js

@@ -55,7 +55,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.6.30
+ * @version 1.6.31
  *
  */
 
@@ -2250,6 +2250,7 @@ function startServer() {
         socket.on('getAvatarList', async ({}, cb) => {
             if (!config.videoAI.enabled || !config.videoAI.apiKey)
                 return cb({ error: 'Video AI seems disabled, try later!' });
+
             try {
                 const response = await axios.get(`${config.videoAI.basePath}/v1/avatar.list`, {
                     headers: {
@@ -2273,6 +2274,7 @@ function startServer() {
         socket.on('getVoiceList', async ({}, cb) => {
             if (!config.videoAI.enabled || !config.videoAI.apiKey)
                 return cb({ error: 'Video AI seems disabled, try later!' });
+
             try {
                 const response = await axios.get(`${config.videoAI.basePath}/v1/voice.list`, {
                     headers: {
@@ -2393,6 +2395,7 @@ function startServer() {
 
             if (!config.videoAI.enabled || !config.videoAI.apiKey)
                 return cb({ error: 'Video AI seems disabled, try later!' });
+
             try {
                 const response = await axios.post(
                     `${config.videoAI.basePath}/v1/streaming.task`,
@@ -2419,6 +2422,38 @@ function startServer() {
             }
         });
 
+        // https://docs.heygen.com/reference/interrupt-task
+        socket.on('streamingInterrupt', async ({ session_id, text }, cb) => {
+            if (!roomExists(socket)) return;
+
+            if (!config.videoAI.enabled || !config.videoAI.apiKey)
+                return cb({ error: 'Video AI seems disabled, try later!' });
+
+            try {
+                const response = await axios.post(
+                    `${config.videoAI.basePath}/v1/streaming.interrupt`,
+                    {
+                        session_id,
+                    },
+                    {
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'X-Api-Key': config.videoAI.apiKey,
+                        },
+                    },
+                );
+
+                const data = { response: response.data };
+
+                log.debug('streamingInterrupt', data);
+
+                cb(data);
+            } catch (error) {
+                log.error('streamingInterrupt', error.response.data);
+                cb({ error: error.response?.status === 500 ? 'Internal server error' : error.response.data.message });
+            }
+        });
+
         socket.on('talkToOpenAI', async ({ text, context }, cb) => {
             if (!roomExists(socket)) return;
 

package.json

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

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 [email protected] or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - [email protected]
- * @version 1.6.30
+ * @version 1.6.31
  *
  */
 
@@ -4614,7 +4614,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.30',
+        title: 'WebRTC SFU v1.6.31',
         html: `
         <br />
         <div id="about">

public/js/RoomClient.js

@@ -47,6 +47,7 @@ const html = {
     hideALL: 'fas fa-eye',
     mirror: 'fas fa-arrow-right-arrow-left',
     close: 'fas fa-times',
+    stop: 'fas fa-circle-stop',
 };
 
 const icons = {
@@ -8413,6 +8414,7 @@ class RoomClient {
         vb.setAttribute('id', 'avatar__vb');
         vb.className = 'videoAvatarMenuBar fadein';
 
+        const interrupt = this.createButton('avatar__interrupt', html.stop);
         const fs = this.createButton('avatar__fs', html.fullScreen);
         const pin = this.createButton('avatar__pin', html.pin);
         const ss = this.createButton('avatar__stopSession', html.kickOut);
@@ -8446,6 +8448,7 @@ class RoomClient {
         // Append elements to video container
         vb.appendChild(ss);
         this.isVideoFullScreenSupported && vb.appendChild(fs);
+        vb.appendChild(interrupt);
         !this.isMobileDevice && vb.appendChild(pin);
         avatarName.appendChild(an);
 
@@ -8467,12 +8470,17 @@ class RoomClient {
             this.handlePN(this.videoAIElement.id, pin.id, this.videoAIContainer.id, true, true);
         }
 
+        interrupt.onclick = () => {
+            this.streamingInterrupt();
+        };
+
         ss.onclick = () => {
             this.stopSession();
         };
 
         if (!this.isMobileDevice) {
             this.setTippy(pin.id, 'Toggle Pin', 'bottom');
+            this.setTippy(interrupt.id, 'Interrupt avatar speaking', 'bottom');
             this.setTippy(fs.id, 'Toggle full screen', 'bottom');
             this.setTippy(ss.id, 'Stop VideoAI session', 'bottom');
         }
@@ -8661,6 +8669,13 @@ class RoomClient {
         }
     }
 
+    streamingInterrupt() {
+        if (VideoAI.enabled && VideoAI.active && VideoAI.info.session_id) {
+            const response = this.socket.request('streamingInterrupt', { session_id: VideoAI.info.session_id });
+            console.log('Video AI streamingInterrupt', response);
+        }
+    }
+
     startRendering() {
         if (!VideoAI.virtualBackground) return;