Birddog NDI Miniconverters

Since Video over IP is more and more a stable solution we use NDI in several small and midrange Installations.
With the Birddog Converters we are satisfied most of the time. But from time to time our onsite supporter have to reinitialize the videoencoding on the converter after a notebook change is done. Either because the audio is missing or the video is not showing up on the decoders side.
For that they normaly had to connect to the converters webinterface, know the IP and the password and then press Restart Video.

To speed up that process I’ve made a html file where you can setup a list of devices needed wiht their IP Adress. To make it more secure in a larger installation there is a checkbox that has to be checked before the restart button is active.
Hand out that html file to your supporter for a faster and easier support onsite.

I’ve tested the script with Birddog Mini, Play and Studio
If you want to learn more about the API syntax of Birddog click >HERE<

Just copy the code, edit and extend the option list. Save the file and start using it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Restart Video on a Birddog Mini Converter without Reboot</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
      background: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      background: white;
      padding: 2em;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 320px;
    }
    select, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 1em;
    }
    #status {
      margin-top: 1em;
      text-align: center;
    }
    .checkbox-label {
      display: flex;
      align-items: flex-start;
      margin-top: 15px;
      font-size: 0.95em;
    }
    .checkbox-label input {
	  color: red;
      margin-right: 10px;
      margin-top: 3px;
    }
  </style>
</head>
<body>
  <div class="container">
    <label for="deviceSelect">Select the Device:</label>
    <select id="deviceSelect">
	<option default value="">----------</option>
      <option value="192.168.0.20">Encoder 1</option>
      <option value="192.168.0.22">Encoder 2</option>
    </select>

    <!--  Neue Checkbox -->
    <label class="checkbox-label">
      <input type="checkbox" id="confirmCheckbox">
      I confirm that the correct device is selected to be restarted
    </label>

    <button id="restartBtn" disabled>Restart Video</button>

    <div id="status"></div>
  </div>

  <script>
    // Nur aktivieren, wenn Checkbox gesetzt ist
    $('#confirmCheckbox').on('change', function () {
      $('#restartBtn').prop('disabled', !this.checked);
    });

    $('#restartBtn').on('click', function() {
      const ip = $('#deviceSelect').val();
      $('#status').text('Sende Befehl…').css('color', 'black');

      fetch(`http://${ip}:8080/restart`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.ok) {
          $('#status').text('Befehl erfolgreich gesendet!').css('color', 'green');
        } else {
          $('#status').text('Fehler: ' + response.status + ' ' + response.statusText).css('color', 'red');
        }
      }).catch(error => {
        $('#status').text('Netzwerkfehler: ' + error.message).css('color', 'red');
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Restart Video on a Birddog Mini Converter without Reboot</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
      background: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .container {
      background: white;
      padding: 2em;
      border-radius: 16px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      width: 320px;
    }
    select, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 1em;
    }
    #status {
      margin-top: 1em;
      text-align: center;
    }
    .checkbox-label {
      display: flex;
      align-items: flex-start;
      margin-top: 15px;
      font-size: 0.95em;
    }
    .checkbox-label input {
	  color: red;
      margin-right: 10px;
      margin-top: 3px;
    }
  </style>
</head>
<body>
  <div class="container">
    <label for="deviceSelect">Select the Device:</label>
    <select id="deviceSelect">
	<option default value="">----------</option>
      <option value="192.168.0.20">Encoder 1</option>
      <option value="192.168.0.22">Encoder 2</option>
    </select>

    <!--  Neue Checkbox -->
    <label class="checkbox-label">
      <input type="checkbox" id="confirmCheckbox">
      I confirm that the correct device is selected to be restarted
    </label>

    <button id="restartBtn" disabled>Restart Video</button>

    <div id="status"></div>
  </div>

  <script>
    // Nur aktivieren, wenn Checkbox gesetzt ist
    $('#confirmCheckbox').on('change', function () {
      $('#restartBtn').prop('disabled', !this.checked);
    });

    $('#restartBtn').on('click', function() {
      const ip = $('#deviceSelect').val();
      $('#status').text('Sende Befehl…').css('color', 'black');

      fetch(`http://${ip}:8080/restart`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(response => {
        if (response.ok) {
          $('#status').text('Befehl erfolgreich gesendet!').css('color', 'green');
        } else {
          $('#status').text('Fehler: ' + response.status + ' ' + response.statusText).css('color', 'red');
        }
      }).catch(error => {
        $('#status').text('Netzwerkfehler: ' + error.message).css('color', 'red');
      });
    });
  </script>
</body>
</html>

For those who prefer to use Streamdeck for such a solution there is also an easy way to setup that there.

Streamdeck Solution:

Open the editor and go to Marketplace. Type API in the search and install API Request from the Marketplace (free).

In the editor scoll down to API Request and add the function to one of your buttons.

Then fill in the URL with Port 8080 und /restart