[mirotalksfu] - add google translate

README.md

@@ -41,6 +41,7 @@
 -   Recording your Screen, Audio, or Video
 -   Share any YouTube video in real-time to your participants
 -   Share any mp4, webm, ogg video in real-time to your participants with possibility to download it
+-   Translated in all languages thanks to google translate
 -   Full-Screen Mode on mouse click on the Video element
 -   Possibility to Change UI Themes
 -   Possibility to protect your Host with username and password (default disabled)

public/js/Room.js

@@ -87,6 +87,7 @@ function initClient() {
         setTippy('tabVideoShareBtn', 'Video share', 'top');
         setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
+        setTippy('tabLanguagesBtn', 'Styling', 'top');
         setTippy('wbBackgroundColorEl', 'Background color', 'top');
         setTippy('wbDrawingColorEl', 'Drawing color', 'top');
         setTippy('whiteboardPencilBtn', 'Drawing mode', 'top');
@@ -701,6 +702,9 @@ function handleButtons() {
     tabStylingBtn.onclick = (e) => {
         rc.openTab(e, 'tabStyling');
     };
+    tabLanguagesBtn.onclick = (e) => {
+        rc.openTab(e, 'tabLanguages');
+    };
     chatButton.onclick = () => {
         rc.toggleChat();
     };

public/view/Room.html

@@ -125,6 +125,7 @@ access to use this app.
                     <button id="tabVideoShareBtn" class="fab fa-youtube tablinks"></button>
                     <button id="tabAspectBtn" class="fas fa-cog tablinks"></button>
                     <button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
+                    <button id="tabLanguagesBtn" class="fas fa-globe tablinks"></button>
                 </div>
 
                 <div id="tabDevices" class="tabcontent">
@@ -268,6 +269,11 @@ access to use this app.
                     </select>
                     <br />
                 </div>
+
+                <div id="tabLanguages" class="tabcontent">
+                    <br />
+                    <div id="google_translate_element"></div>
+                </div>
             </main>
         </section>
 
@@ -376,5 +382,14 @@ access to use this app.
                 </div>
             </section>
         </section>
+        <!-- 
+            Start Google Translate 
+        -->
+        <script>
+            function googleTranslateElementInit() {
+                new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');
+            }
+        </script>
+        <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
     </body>
 </html>