feat: iotcam node

hand-detection-iotcam.html

@@ -0,0 +1,69 @@
+<script type="text/javascript">
+
+  RED.nodes.registerType('hand-detection-iotcam',{
+    category: 'motion pose',
+    color: '#B2A1F4',
+    defaults: {
+      name: {value: ""},
+      serverUrl: {value: 'localhost'},
+      monitorPort: {value: 1884, validate:RED.validators.number()},
+      rtspPort: {value: 1886, validate:RED.validators.number()},
+      dataSocketUrl: {value: 'ws://localhost:1880/ws/data'},
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: "font-awesome/fa-hand-paper-o",
+    label: function() {
+      return this.name||"hands detection iotcam"
+    },
+    oneditprepare: function() {
+    },
+  })
+</script>
+
+<script type="text/html" data-template-name="hand-detection-iotcam">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-serverUrl"><i class="fa fa-tag"></i> Server Url</label>
+    <input type="text" id="node-input-serverUrl" placeholder="(default) localhost">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-monitorPort"><i class="fa fa-tag"></i> Monitor Port</label>
+    <input type="text" id="node-input-monitorPort" placeholder="(default) 1884">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-rtspPort"><i class="fa fa-tag"></i> Rtsp Port</label>
+    <input type="text" id="node-input-rtspPort" placeholder="(default) 1886">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-dataSocketUrl"><i class="fa fa-tag"></i> Data Socket Url</label>
+    <input type="text" id="node-input-dataSocketUrl" placeholder="(default) 'ws://localhost:1880/ws/data'">
+  </div>
+</script>
+
+<script type="text/html" data-help-name="hand-detection-iotcam">
+  <p>A simple node that recognizes and visualizes hand posture using external camera device.</p>
+
+  <h3>Inputs</h3>
+  <dl class="message-properties">
+    <dt>Name</dt>
+    <dd>The label of the Node assigned by the user.</dd>
+    <dt>Server Url</dt>
+    <dd>URL address of your websocket server. Do not include a prefix such as 'http://'. (default: 'localhost')</dd>
+    <dt>Mirror Port</dt>
+    <dd>Port number to allow monitoring from other resources. (default: 1884)</dd>
+    <dt>Rtsp Port</dt>
+    <dd>Port number to serve the IoT camera streaming. (default: 1886)</dd>
+    <dt>Data Socket Url</dt>
+    <dd>Socket URI to send and receive data. (default: 'ws://localhost:1880/ws/data')</dd>
+    <dt>Camera Test</dt>
+    <dd>Preview webcam camera.</dd>
+  </dl>
+</script>

hand-detection-webcam.html

@@ -0,0 +1,88 @@
+<script type="text/javascript">
+
+  RED.nodes.registerType('hand-detection-webcam',{
+    category: 'motion pose',
+    color: "#B2A1F4",
+    defaults: {
+      name: {value: ""},
+      serverUrl: {value: 'localhost'},
+      monitorPort: {value: 1881, validate:RED.validators.number()},
+      dataSocketUrl: {value: 'ws://localhost:1880/ws/data'},
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: "font-awesome/fa-hand-paper-o",
+    paletteLabel: "hand detect",
+    label: function() {
+      return this.name||"hands detection"
+    },
+    oneditprepare: function() {
+      const inputVideo = document.getElementById('input-video')
+      const constraints = {
+        audio: false, // if you want test audio, give the value 'true'.
+        video: { width: 1280, height: 720 }
+      }
+
+      navigator.mediaDevices.getUserMedia(constraints)
+        .then(stream => {
+          inputVideo.srcObject = stream
+          inputVideo.onloadedmetadata = function(e) {
+            inputVideo.play()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+  })
+</script>
+
+<script type="text/html" data-template-name="pose-detection-webcam">
+  <div class="form-row">
+    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+    <input type="text" id="node-input-name" placeholder="Name">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-serverUrl"><i class="fa fa-tag"></i> Server Url</label>
+    <input type="text" id="node-input-serverUrl" placeholder="(default) localhost">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-monitorPort"><i class="fa fa-tag"></i> Monitor Port</label>
+    <input type="text" id="node-input-monitorPort" placeholder="(default) 1881">
+  </div>
+
+  <div class="form-row">
+    <label for="node-input-dataSocketUrl"><i class="fa fa-tag"></i> Data Socket Url</label>
+    <input type="text" id="node-input-dataSocketUrl" placeholder="(default) 'ws://localhost:1880/ws/data'">
+  </div>
+
+  <div class="form-row" style="text-align: left;">
+    <label for="node-canvas" style="padding: 5p;"> Camera Test</label>
+    <hr>
+  </div>
+  <div class="form-row" id="node-canvas" style="text-align: center;">
+    <video id="input-video" style="height:360px; width:640px;"></video>
+  </div>
+</script>
+
+<script type="text/html" data-help-name="hand-detection-iotcam">
+  <p>A simple node that recognizes and visualizes hand posture using a webcam.</p>
+
+  <h3>Inputs</h3>
+  <dl class="message-properties">
+    <dt>Name</dt>
+    <dd>The label of the Node assigned by the user.</dd>
+    <dt>Server Url</dt>
+    <dd>URL address of your websocket server. Do not include a prefix such as 'http://'. (default: 'localhost')</dd>
+    <dt>Mirror Port</dt>
+    <dd>Port number to allow monitoring from other resources. (default: 1884)</dd>
+    <dt>Rtsp Port</dt>
+    <dd>Port number to serve the IoT camera streaming. (default: 1886)</dd>
+    <dt>Data Socket Url</dt>
+    <dd>Socket URI to send and receive data. (default: 'ws://localhost:1880/ws/data')</dd>
+    <dt>Camera Test</dt>
+    <dd>Preview webcam camera.</dd>
+  </dl>
+</script>