hand-detection-webcam.html

<script type="text/javascript">

  RED.nodes.registerType('hand-detection-webcam',{
    category: 'motion pose',
    color: "#B2A1F4",
    defaults: {
      name: {value: ""},
      serverUrl: {value: 'localhost'},
      monitorPort: {value: 1883, 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-webcam"
    },
    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="hand-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) 1883">
  </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-webcam">
  <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>