Merge pull request #1 from UUoocl/shortCuts

Shortcuts

.gitignore

@@ -0,0 +1 @@
+obs_browser_examples/.DS_Store

README.md

@@ -6,18 +6,33 @@
 - [Get User Media(GUM) for OBS](#get-user-mediagum-for-obs)
   - [Overview](#overview)
   - [Getting Started](#getting-started)
+    - [Enable the OBS WebSocket Server](#enable-the-obs-websocket-server)
+    - [Connect to the OBS WebSocket Server](#connect-to-the-obs-websocket-server)
+    - [Capture Audio or Desktop](#capture-audio-or-desktop)
   - [Audio Frequency Analysis](#audio-frequency-analysis)
+    - [Audio Frequency Message](#audio-frequency-message)
   - [MIDI Input](#midi-input)
+    - [MIDI Output Message](#midi-output-message)
   - [Gamepad Input](#gamepad-input)
+    - [Gamepad Output Message](#gamepad-output-message)
   - [MediaPipe Landmarks](#mediapipe-landmarks)
   - [MediaPipe Pose Landmarks](#mediapipe-pose-landmarks)
+    - [Output Message](#output-message)
   - [MediaPipe Hand Landmarks](#mediapipe-hand-landmarks)
+    - [Output Message](#output-message-1)
   - [MediaPipe Face Landmarks](#mediapipe-face-landmarks)
+    - [Output Message](#output-message-2)
   - [MediaPipe Image Segmentation](#mediapipe-image-segmentation)
+    - [Output Message](#output-message-3)
   - [MediaPipe Text Sentiment](#mediapipe-text-sentiment)
+    - [Text Sentiment Result Message](#text-sentiment-result-message)
   - [MediaPipe Gemma LLM Inference](#mediapipe-gemma-llm-inference)
+    - [Output Message](#output-message-4)
   - [WebRTC Audio Video](#webrtc-audio-video)
+    - [Output Message](#output-message-5)
   - [Speech Recognition](#speech-recognition)
+    - [Speech Recognition Started Event Message](#speech-recognition-started-event-message)
+    - [Speech Recognition Event Message](#speech-recognition-event-message)
 
 <!-- Generated by gh-toc, https://moonbase59.github.io/gh-toc/ -->
 <!-- ToC end -->

index.html

@@ -46,6 +46,13 @@
                         <li><a href="#mp-gemma">Gemma<br>LLM Inference</a></li>
                     </ul>
                 </li>
+                <li>
+                    <a href="#shortcuts">Apple Shortcuts</a>
+                    <ul>
+                        <li><a href="#mouse-shortcuts">Mouse<br></a></li>
+                        <li><a href="#ptz-shortcuts">PTZ<br></a></li>
+                    </ul>
+                </li>
             </ul>
 
     </nav>
@@ -251,6 +258,20 @@ <h4>Text-to-Text large language model </h4>
                 </div>
             </div>
         </section>
+
+    <section>
+        <div>
+        <h1>Apple Shortcuts Input</h1>
+        <div id="mouse-shortcuts">
+            <p>Mouse coordinates</p>
+            <textarea id="mouseCoordinates" style="height: 100px; width: 600px"></textarea>
+        </div>
+        <div id="ptz-shortcuts">
+            <p>PTZ coordinates</p>
+            <textarea id="ptzValues" style="height: 100px; width: 600px"></textarea>
+        </div>
+    </section>
+
     </article>
 
     <script src='lib/obs-ws.js'></script>
@@ -263,6 +284,8 @@ <h4>Text-to-Text large language model </h4>
     <script src="lib/audioInput-renderer.js"></script>
     <script src="lib/SpeechRecognition.js"></script>
     <script src="lib/loadScripts.js"></script>
+    <script src="lib/shortcutsScripts.js"></script>
 
 </body>
-</html>
+</html>
+

lib/loadScripts.js

@@ -1,13 +1,13 @@
 //Load MediaPipe libraries when needed
-//Pose Dectection
+//Pose Detection
 const mpPoseButton = document.getElementById("startPoseDetectButton");
 mpPoseButton.addEventListener("click", () => loadScript('mpPose.js',true));
 
-//Hand landmark dectection
+//Hand landmark detection
 const mpHandButton = document.getElementById("startHandLandmarks");
 mpHandButton.addEventListener("click", () => loadScript('mpHand.js',true));
 
-//Face landmark dectection
+//Face landmark detection
 const mpFaceButton = document.getElementById("startFaceLandmarks");
 mpFaceButton.addEventListener("click", () => loadScript('mpFace.js',true));
 

lib/shortcutsScripts.js

@@ -0,0 +1,31 @@
+const ptzInput = document.getElementById("ptzValues");
+const mouseInput = document.getElementById("mouseCoordinates");
+ptzInput.addEventListener("click", ptzSend);
+mouseInput.addEventListener("click", mouseSend);
+
+function ptzSend() {
+  console.log("ptz input clicked");
+  console.log(ptzInput.value);
+  let shortcutsResult = ptzInput.value;
+  obs.call("CallVendorRequest", {
+    vendorName: "obs-browser",
+    requestType: "emit_event",
+    requestData: {
+      event_name: "ptz-message",
+      event_data: { shortcutsResult },
+    },
+  });
+}
+function mouseSend() {
+  console.log("mouse input clicked");
+  console.log(mouseInput.value);
+  let shortcutsResult = mouseInput.value;
+  obs.call("CallVendorRequest", {
+    vendorName: "obs-browser",
+    requestType: "emit_event",
+    requestData: {
+      event_name: "mouse-message",
+      event_data: { shortcutsResult },
+    },
+  });
+}

lib/webmidi-Module.js

@@ -7,11 +7,10 @@ WebMidi.enable()
 function onEnabled() {
   // Display available MIDI input devices
   if (WebMidi.inputs.length < 1) {
-    document.body.innerHTML += "No device detected.";
+    //document.body.innerHTML += "No device detected.";
   } else {
     WebMidi.inputs.forEach((device, index) => {
-      addDeviceListener(index);
-
+      addDeviceListener(index);     
       const midiElem = document.createElement('div');
       midiElem.id = `midi-${index}`; 
       midiElem.innerHTML = `<b>${index}: "midi-${device.name}"<b> <br>`;
@@ -20,6 +19,12 @@ function onEnabled() {
       midiDataElem.id = `midi-${index}-data`; 
       document.getElementById(`midi-${index}`).appendChild(midiDataElem);
     });
+    // WebMidi.outputs.forEach(output => console.log(output.manufacturer, output.name));
+    // let output = WebMidi.outputs[0];
+    // let channel7 = output.channels[7];
+    // let channel1 = output.channels[1];
+    // channel7.playNote(32, {rawAttack: 5});
+    // channel1.playNote(100, {rawAttack: 1});
   }
 
   // Listen to 'midi message' events on channels 1, 2 and 3 of the selected input MIDI device
@@ -55,4 +60,4 @@ function onEnabled() {
       });
       }
     }
-}
+}