meye.ssojoo.duckdns.org Open in urlscan Pro
59.12.65.46  Public Scan

URL: https://meye.ssojoo.duckdns.org/
Submission: On September 05 via automatic, source certstream-suspicious — Scanned from DE

Form analysis 2 forms found in the DOM

<form autocomplete="new-password">
  <!-- Preferences -->
  <div class="settings-section-title" id="preferencesDiv">
    <span class="help-mark" title="user preferences">?</span>
    <a class="settings-section-title">Preferences</a>
    <span class="minimize open"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" min="1" max="4" snap="1" ticksnum="4" decimals="0" id="layoutColumnsRow">
        <td class="settings-item-label"><span class="settings-item-label">Layout Columns</span></td>
        <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutColumnsSlider">
          <div class="slider range styled prefs" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 23.3333%;">2</span><span class="slider-label" style="left: 56.6667%;">3</span><span class="slider-label"
                style="left: 90%;">4</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="configures the number of columns used to lay out the camera frames">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Fit Frames Vertically</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled prefs" id="fitFramesVerticallySwitch">
          <div class="check-box styled prefs" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="controls whether frame sizes can be reduced to vertically fit the window or not">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="4" snap="1" ticksnum="4" decimals="0" id="layoutRows" depends="fitFramesVertically">
        <td class="settings-item-label"><span class="settings-item-label">Layout Rows</span></td>
        <td class="settings-item-value"><input type="text" class="range styled prefs" id="layoutRowsSlider">
          <div class="slider range styled prefs" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 23.3333%;">2</span><span class="slider-label" style="left: 56.6667%;">3</span><span class="slider-label"
                style="left: 90%;">4</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="configures the number of rows used to lay out the camera frames">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="6" decimals="0">
        <td class="settings-item-label"><span class="settings-item-label">Frame Rate Dimmer</span></td>
        <td class="settings-item-value"><input type="text" class="range styled prefs" id="framerateDimmerSlider">
          <div class="slider range styled prefs" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0</span><span class="slider-label" style="left: 10%;">20</span><span class="slider-label" style="left: 30%;">40</span><span class="slider-label"
                style="left: 50%;">60</span><span class="slider-label" style="left: 70%;">80</span><span class="slider-label" style="left: 90%;">100</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="dims the global frame rate to save network bandwidth and traffic (doesn't work on simple MJPEG cameras)">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="100" snap="2" ticks="1|20|40|60|80|100" decimals="0">
        <td class="settings-item-label"><span class="settings-item-label">Resolution Dimmer</span></td>
        <td class="settings-item-value"><input type="text" class="range styled prefs" id="resolutionDimmerSlider">
          <div class="slider range styled prefs" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 9.19192%;">20</span><span class="slider-label" style="left: 29.3939%;">40</span><span class="slider-label"
                style="left: 49.596%;">60</span><span class="slider-label" style="left: 69.798%;">80</span><span class="slider-label" style="left: 90%;">100</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="dims the actual resolution of all cameras to save network bandwidth and traffic (doesn't work on simple MJPEG cameras)">?</span></td>
      </tr>
    </tbody>
  </table>
  <div class="settings-item-separator" style="margin: 0px 0px 1.5em 0px;"></div>
  <!-- General Settings -->
  <div class="settings-section-title" id="generalSectionDiv">
    <span class="help-mark" title="general settings, not related to any camera">?</span>
    <a class="settings-section-title">General Settings</a>
    <span class="minimize open"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Admin Username</span></td>
        <td class="settings-item-value"><input type="text" autocapitalize="none" class="styled general main-config validator text-validator" id="adminUsernameEntry" readonly="readonly" title=""></td>
        <td><span class="help-mark" title="the username to be used for configuring the system">?</span></td>
      </tr>
      <tr class="settings-item" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Admin Password</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled general main-config validator custom-validator" id="adminPasswordEntry" title=""></td>
        <td><span class="help-mark" title="administrator's password">?</span></td>
      </tr>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Surveillance Username</span></td>
        <td class="settings-item-value"><input type="text" autocapitalize="none" class="styled general main-config validator text-validator" id="normalUsernameEntry" title=""></td>
        <td><span class="help-mark" title="the username to be used for video surveillance">?</span></td>
      </tr>
      <tr class="settings-item" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Surveillance Password</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled general main-config validator custom-validator" id="normalPasswordEntry" title=""></td>
        <td><span class="help-mark" title="the password for the surveillance user (leave empty for passwordless surveillance)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">motionEye Version</span></td>
        <td class="settings-item-value"><span class="settings-item-label">0.42.1</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Motion Version</span></td>
        <td class="settings-item-value"><span class="settings-item-label">4.3.2</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">OS Version</span></td>
        <td class="settings-item-value"><span class="settings-item-label">Ubuntu 22.04</span></td>
      </tr>
      <tr class="settings-item hidden">
        <td class="settings-item-label"><span class="settings-item-label">Power</span></td>
        <td class="settings-item-value">
          <div class="button normal-button shut-down-button" id="shutDownButton">Shut Down</div>
        </td>
        <td><span class="help-mark" title="shuts down the system">?</span></td>
      </tr>
      <tr class="settings-item hidden">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button reboot-button" id="rebootButton">Reboot</div>
        </td>
        <td><span class="help-mark" title="reboots the system">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Configuration</span></td>
        <td class="settings-item-value">
          <div class="button normal-button backup-button" id="backupButton">Backup</div>
        </td>
        <td><span class="help-mark" title="creates a file with the current configuration for you to save it locally">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button restore-button" id="restoreButton">Restore</div>
        </td>
        <td><span class="help-mark" title="restores the configuration from a previously saved backup file">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Additional Main Sections -->
  <div class="settings-item-separator" style="margin: 0px 0px 1.5em 0px;"></div>
  <!-- Video Device -->
  <div class="settings-section-title" id="deviceSectionDiv">
    <input type="checkbox" class="styled section device camera-config" id="videoDeviceEnabledSwitch">
    <div class="check-box styled section device camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this if you want to use this camera device">?</span>
    <a class="settings-section-title">Video Device</a>
    <span class="minimize open"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
        <td class="settings-item-value"><input type="text" class="styled device camera-config validator text-validator custom-validator" id="deviceNameEntry" placeholder="camera name..." title=""></td>
        <td><span class="help-mark" title="an alias for this camera device">?</span></td>
      </tr>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Camera ID</span></td>
        <td class="settings-item-value"><input type="text" class="styled device camera-config validator text-validator" id="deviceIdEntry" readonly="readonly" title=""></td>
        <td><span class="help-mark" title="the camera identifier number">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Camera Device</span></td>
        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceUrlEntry" readonly="readonly"></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Camera Type</span></td>
        <td class="settings-item-value"><input type="text" class="styled device camera-config" id="deviceTypeEntry" readonly="readonly"></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Automatic Brightness</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled device camera-config" id="autoBrightnessSwitch">
          <div class="check-box styled device camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enables software automatic brightness (only recommended for cameras without autobrightness)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Video Resolution</span></td>
        <td class="settings-item-value">
          <select class="video-resolution styled device camera-config" id="resolutionSelect">
          </select>
        </td>
        <td><span class="help-mark" title="the video resolution (larger values produce better quality but require more CPU power, larger storage space and bandwidth)">?</span></td>
      </tr>
      <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
        <td class="settings-item-label"><span class="settings-item-label">Width</span></td>
        <td class="settings-item-value"><input type="text" class="styled number device camera-config validator text-validator number-validator custom-validator" id="customWidthEntry" title=""></td>
        <td><span class="help-mark" title="enter a custom resolution width">?</span></td>
      </tr>
      <tr class="settings-item" min="96" max="4096" required="true" depends="resolution=custom">
        <td class="settings-item-label"><span class="settings-item-label">Height</span></td>
        <td class="settings-item-value"><input type="text" class="styled number device camera-config validator text-validator number-validator custom-validator" id="customHeightEntry" title=""></td>
        <td><span class="help-mark" title="enter a custom resolution height">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Video Rotation</span></td>
        <td class="settings-item-value">
          <select class="rotation styled device camera-config" id="rotationSelect">
            <option value="0">0°</option>
            <option value="90">90°</option>
            <option value="180">180°</option>
            <option value="270">270°</option>
          </select>
        </td>
        <td><span class="help-mark" title="use this to rotate the captured image, if your camera is not positioned correctly">?</span></td>
      </tr>
      <tr class="settings-item" min="2" max="30" snap="0" ticks="2|5|10|15|20|25|30" decimals="0">
        <td class="settings-item-label"><span class="settings-item-label">Frame Rate</span></td>
        <td class="settings-item-value"><input type="text" class="range styled device camera-config" id="framerateSlider">
          <div class="slider range styled device camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">2</span><span class="slider-label" style="left: 0.714286%;">5</span><span class="slider-label" style="left: 18.5714%;">10</span><span class="slider-label"
                style="left: 36.4286%;">15</span><span class="slider-label" style="left: 54.2857%;">20</span><span class="slider-label" style="left: 72.1429%;">25</span><span class="slider-label" style="left: 90%;">30</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">2</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the number of frames captured by the camera every second (higher values produce smoother videos but require more CPU power, larger storage space and bandwidth)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Extra Motion Options</span></td>
        <td class="settings-item-value"><textarea class="styled device camera-config" id="extraOptionsEntry" rows="3"></textarea></td>
        <td><span class="help-mark" title="you can add here any extra options for the motion daemon (use the &quot;name value&quot; format, one option per line)">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- File Storage -->
  <div class="settings-section-title" id="storageSectionDiv">
    <span class="help-mark" title="choose where and how your media files are saved">?</span>
    <a class="settings-section-title">File Storage</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Storage Device</span></td>
        <td class="settings-item-value">
          <select class="styled storage camera-config" id="storageDeviceSelect">
          </select>
        </td>
        <td><span class="help-mark" title="indicates the storage device where the image and video files will be saved">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="storageDevice=network-share" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Network Server</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="networkServerEntry" title=""></td>
        <td><span class="help-mark" title="the address of the network server (IP address or hostname)">?</span></td>
      </tr>
      <tr class="settings-item" depends="storageDevice=network-share">
        <td class="settings-item-label"><span class="settings-item-label">SMB Protocol Version</span></td>
        <td class="settings-item-value">
          <select class="styled storage camera-config" id="networkSMBVerSelect">
            <option value="1.0">1.0</option>
            <option value="2.0">2.0</option>
            <option value="2.1">2.1</option>
            <option value="3.0">3.0</option>
            <option value="3.1.1">3.1.1</option>
          </select>
        </td>
        <td><span class="help-mark" title="selects the SMB version to be used (test the various options and see which one works best with your NAS)">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="storageDevice=network-share" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Share Name</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="networkShareNameEntry" title=""></td>
        <td><span class="help-mark" title="the name of the network share">?</span></td>
      </tr>
      <tr class="settings-item" depends="storageDevice=network-share" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Share Username</span></td>
        <td class="settings-item-value"><input type="text" autocapitalize="none" class="styled storage camera-config" id="networkUsernameEntry"></td>
        <td><span class="help-mark" title="the username to be supplied when accessing the network share (leave empty if no username is required)">?</span></td>
      </tr>
      <tr class="settings-item" depends="storageDevice=network-share" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Share Password</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled storage camera-config" id="networkPasswordEntry"></td>
        <td><span class="help-mark" title="the password required by the network share (leave empty if no password is required)">?</span></td>
      </tr>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Root Directory</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator custom-validator" id="rootDirectoryEntry" title=""></td>
        <td><span class="help-mark" title="the root path (on the selected storage device) where the files will be saved">?</span></td>
      </tr>
      <tr class="settings-item" depends="storageDevice=network-share">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button test-button" id="networkShareTestButton">Test Share</div>
        </td>
        <td><span class="help-mark" title="click this button to test the network share connectivity after you have filled in the required details">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Disk Usage</span></td>
        <td class="settings-item-value">
          <div id="diskUsageProgressBar" class="progress-bar progress-bar-container">
            <div class="progress-bar-fill"></div><span class="progress-bar-text"></span>
          </div>
        </td>
        <td><span class="help-mark" title="the used/total size of the disk where the root directory resides">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Upload Media Files</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadEnabledSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want your media files to be uploaded to an external service">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Upload Pictures</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadPictureSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want pictures to be uploaded to an external service">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Upload Movies</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadMovieSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want videos to be uploaded to an external service">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Upload Service</span></td>
        <td class="settings-item-value">
          <select class="styled storage camera-config" id="uploadServiceSelect">
            <option value="ftp">FTP Server</option>
            <option value="sftp">SFTP Server</option>
            <!--                                 <option value="http">HTTP Server</option> -->
            <!--                                 <option value="https">HTTPS Server</option> -->
            <option value="gdrive">Google Drive</option>
            <option value="gphoto">Google Photo</option>
            <option value="dropbox">Dropbox</option>
          </select>
        </td>
        <td><span class="help-mark" title="choose a service to which the media files should be uploaded">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
        <td class="settings-item-label"><span class="settings-item-label">Server Address</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="uploadServerEntry" title=""></td>
        <td><span class="help-mark" title="the domain name or IP address of the server (e.g. ftp.example.com or 192.168.1.3)">?</span></td>
      </tr>
      <tr class="settings-item" required="true" min="1" max="65535" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
        <td class="settings-item-label"><span class="settings-item-label">Server Port</span></td>
        <td class="settings-item-value"><input type="text" class="number styled storage camera-config validator text-validator number-validator" id="uploadPortEntry" title=""></td>
        <td><span class="help-mark" title="the port to use when connecting to the service (leave it empty to use the default value)">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(http|https)">
        <td class="settings-item-label"><span class="settings-item-label">Method</span></td>
        <td class="settings-item-value">
          <select class="styled storage camera-config" id="uploadMethodSelect">
            <option value="post">POST</option>
            <option value="put">PUT</option>
          </select>
        </td>
        <td><span class="help-mark" title="the HTTP method to use when uploading files">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="uploadEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Location</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="uploadLocationEntry" title=""></td>
        <td><span class="help-mark" title="the location (root path) where media files should be uploaded (e.g. /files/cam1/)">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService!=(gphoto)">
        <td class="settings-item-label"><span class="settings-item-label">Include Subfolders</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="uploadSubfoldersSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this to upload the media files together with their subfolders, instead of placing them directly into the root location">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(gdrive)">
        <td class="settings-item-label"><span class="settings-item-label">Clean Cloud</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="cleanCloudEnabledSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this to delete the uploaded media files on cloud as well when the local media files get deleted according to file persistence setting, currently this option is available only for gdrive">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
        <td class="settings-item-label"><span class="settings-item-label">Username</span></td>
        <td class="settings-item-value"><input type="text" autocapitalize="none" class="styled storage camera-config" id="uploadUsernameEntry"></td>
        <td><span class="help-mark" title="the username for the upload service account">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(ftp|sftp|http|https)">
        <td class="settings-item-label"><span class="settings-item-label">Password</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled storage camera-config" id="uploadPasswordEntry"></td>
        <td><span class="help-mark" title="the password for the upload service account">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(gdrive|gphoto|dropbox)">
        <td class="settings-item-label"><span class="settings-item-label">Authorization Key</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled storage camera-config" id="uploadAuthorizationKeyEntry"></td>
        <td><span class="help-mark" title="the key used to authenticate with the upload service (normally required only during setup)">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled uploadService=(gdrive|gphoto|dropbox)">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="html styled storage camera-config" id="authorizeLinkHtml">
            <a href="javascript:authorizeUpload()">Obtain Key</a>
          </div>
        </td>
        <td><span class="help-mark" title="click here to obtain the service authorization key">?</span></td>
      </tr>
      <tr class="settings-item" depends="uploadEnabled">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button test-button" id="uploadTestButton">Test Service</div>
        </td>
        <td><span class="help-mark" title="click this button to test the upload service after you have filled in the required details">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Call A Web Hook</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="webHookStorageEnabledSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want a URL to be requested after a media file is created">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="webHookStorageEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Web Hook URL</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="webHookStorageUrlEntry" placeholder="e.g. http://example.com/notify/" title=""></td>
        <td><span class="help-mark"
            title="a URL to be requested when motion is detected; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %f = file path">?</span></td>
      </tr>
      <tr class="settings-item" depends="webHookStorageEnabled">
        <td class="settings-item-label"><span class="settings-item-label">HTTP Method</span></td>
        <td class="settings-item-value">
          <select class="styled storage camera-config" id="webHookStorageHttpMethodSelect">
            <option value="GET">GET</option>
            <option value="POST">POST (query)</option>
            <option value="POSTf">POST (form)</option>
            <option value="POSTj">POST (json)</option>
          </select>
        </td>
        <td><span class="help-mark" title="the HTTP method to use when requesting the web hook URL (the given URL-encoded parameters will in fact be transmitted as indicated here)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Run A Command</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled storage camera-config" id="commandStorageEnabledSwitch">
          <div class="check-box styled storage camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want to execute a command after a media file is created">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="commandStorageEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
        <td class="settings-item-value"><input type="text" class="styled storage camera-config validator text-validator" id="commandStorageEntry" placeholder="command..." title=""></td>
        <td><span class="help-mark"
            title="a command to be executed after a media file is created; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %f = file path">?</span>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Text Overlay -->
  <div class="settings-section-title" id="textOverlaySectionDiv">
    <input type="checkbox" class="styled section text-overlay camera-config" id="textOverlayEnabledSwitch">
    <div class="check-box styled section text-overlay camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="choose what information is displayed on the captured frames">?</span>
    <a class="settings-section-title">Text Overlay</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
        <td class="settings-item-value">
          <select class="styled text-overlay camera-config" id="leftTextTypeSelect">
            <option value="camera-name">Camera Name</option>
            <option value="timestamp">Timestamp</option>
            <option value="custom-text">Custom Text</option>
            <option value="disabled">Disabled</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower left corner">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="leftTextType=custom-text" strip="true">
        <td class="settings-item-label"></td>
        <td class="settings-item-value"><input type="text" class="styled text-overlay camera-config validator text-validator" id="leftTextEntry" placeholder="custom text..." title=""></td>
        <td><span class="help-mark"
            title="sets a custom left text; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %T = HH:MM:SS, \n = new line">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Right Text</span></td>
        <td class="settings-item-value">
          <select class="styled text-overlay camera-config" id="rightTextTypeSelect">
            <option value="camera-name">Camera Name</option>
            <option value="timestamp">Timestamp</option>
            <option value="custom-text">Custom Text</option>
            <option value="disabled">Disabled</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets the text displayed on the movies and images, on the lower right corner">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="rightTextType=custom-text" strip="true">
        <td class="settings-item-label"></td>
        <td class="settings-item-value"><input type="text" class="styled text-overlay camera-config validator text-validator" id="rightTextEntry" placeholder="custom text..." title=""></td>
        <td><span class="help-mark"
            title="sets a custom right text; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, %T = HH:MM:SS, \n = new line">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="10" snap="1" ticksnum="10" decimals="0">
        <td class="settings-item-label"><span class="settings-item-label">Text Scale</span></td>
        <td class="settings-item-value"><input type="text" class="range styled text-overlay camera-config" id="textScaleSlider">
          <div class="slider range styled text-overlay camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 1.11111%;">2</span><span class="slider-label" style="left: 12.2222%;">3</span><span class="slider-label"
                style="left: 23.3333%;">4</span><span class="slider-label" style="left: 34.4444%;">5</span><span class="slider-label" style="left: 45.5556%;">6</span><span class="slider-label" style="left: 56.6667%;">7</span><span
                class="slider-label" style="left: 67.7778%;">8</span><span class="slider-label" style="left: 78.8889%;">9</span><span class="slider-label" style="left: 90%;">10</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the size of the overlay text">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Video Streaming -->
  <div class="settings-section-title" minimize-switch-independent="true" id="streamingSectionDiv">
    <input type="checkbox" class="styled section streaming camera-config" id="videoStreamingEnabledSwitch">
    <div class="check-box styled section streaming camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this if you want video streaming for this camera">?</span>
    <a class="settings-section-title">Video Streaming</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" min="1" max="30" snap="0" ticks="1|5|10|15|20|25|30" decimals="0">
        <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingFramerateSlider">
          <div class="slider range styled streaming camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 3.7931%;">5</span><span class="slider-label" style="left: 21.0345%;">10</span><span class="slider-label"
                style="left: 38.2759%;">15</span><span class="slider-label" style="left: 55.5172%;">20</span><span class="slider-label" style="left: 72.7586%;">25</span><span class="slider-label" style="left: 90%;">30</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the number of frames transmitted every second on the live streaming">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
        <td class="settings-item-label"><span class="settings-item-label">Streaming Quality</span></td>
        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingQualitySlider">
          <div class="slider range styled streaming camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">25%</span><span class="slider-label" style="left: 40%;">50%</span><span class="slider-label"
                style="left: 65%;">75%</span><span class="slider-label" style="left: 90%;">100%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the live streaming quality (higher values produce a better video quality but require more bandwidth)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Streaming Image Resizing</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingServerResizeSwitch">
          <div class="check-box styled streaming camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="when this is enabled, the images are resized before they are sent to the browser (disable when running on a slow CPU)">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%" depends="streamingServerResize">
        <td class="settings-item-label"><span class="settings-item-label">Streaming Resolution</span></td>
        <td class="settings-item-value"><input type="text" class="range styled streaming camera-config" id="streamingResolutionSlider">
          <div class="slider range styled streaming camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">25%</span><span class="slider-label" style="left: 40%;">50%</span><span class="slider-label"
                style="left: 65%;">75%</span><span class="slider-label" style="left: 90%;">100%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="the streaming resolution given as percent of the video device resolution (higher values produce better video quality but require more bandwidth)">?</span></td>
      </tr>
      <tr class="settings-item" min="1024" max="65535" depends="videoStreamingEnabled" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Streaming Port</span></td>
        <td class="settings-item-value"><input type="text" class="styled streaming camera-config validator text-validator" id="streamingPortEntry" title=""></td>
        <td><span class="help-mark" title="sets the TCP port on which the webcam streaming server listens">?</span></td>
      </tr>
      <tr class="settings-item" depends="videoStreamingEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Authentication Mode</span></td>
        <td class="settings-item-value">
          <select class="styled streaming camera-config" id="streamingAuthModeSelect">
            <option value="disabled">Disabled</option>
            <option value="basic">Basic</option>
            <option value="digest">Digest</option>
          </select>
        </td>
        <td><span class="help-mark" title="the authentication method used by the stream (choose Basic instead of Digest if you encounter issues with third party apps); surveillance credentials will be used">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Motion Optimization</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled streaming camera-config" id="streamingMotion">
          <div class="check-box styled streaming camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want a lower frame rate for the live streaming when no motion is detected">?</span></td>
      </tr>
      <tr class="settings-item" depends="videoStreamingEnabled">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Useful URLs</span></td>
        <td class="settings-item-value">
          <div class="html styled streaming camera-config" id="streamingSnapshotUrlHtml">
            <a href="javascript:showSnapshotUrl()">Snapshot URL</a>
          </div>
        </td>
        <td><span class="help-mark" title="a URL that provides a JPEG image with the most recent snapshot of the camera">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"></td>
        <td class="settings-item-value">
          <div class="html styled streaming camera-config" id="streamingMjpgUrlHtml">
            <a href="javascript:showMjpgUrl()">Streaming URL</a>
          </div>
        </td>
        <td><span class="help-mark" title="a URL that provides a MJPEG stream of the camera">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"></td>
        <td class="settings-item-value">
          <div class="html styled streaming camera-config" id="streamingEmbedUrlHtml">
            <a href="javascript:showEmbedUrl()">Embed URL</a>
          </div>
        </td>
        <td><span class="help-mark" title="a URL that provides a minimal HTML document containing the camera frame, ready to be embedded">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Still Images -->
  <div class="settings-section-title" id="stillImagesSectionDiv">
    <input type="checkbox" class="styled section still-images camera-config" id="stillImagesEnabledSwitch">
    <div class="check-box styled section still-images camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this if you want to capture still images (pictures)">?</span>
    <a class="settings-section-title">Still Images</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
        <td class="settings-item-value"><input type="text" class="styled still-images camera-config validator text-validator custom-validator" id="imageFileNameEntry" placeholder="file name pattern..." title=""></td>
        <td><span class="help-mark"
            title="sets the name pattern for the image (JPEG) files; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, / = subfolder">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
        <td class="settings-item-label"><span class="settings-item-label">Image Quality</span></td>
        <td class="settings-item-value"><input type="text" class="range styled still-images camera-config" id="imageQualitySlider">
          <div class="slider range styled still-images camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">25%</span><span class="slider-label" style="left: 40%;">50%</span><span class="slider-label"
                style="left: 65%;">75%</span><span class="slider-label" style="left: 90%;">100%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the JPEG image quality (higher values produce a better image quality but require more storage space)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Capture Mode</span></td>
        <td class="settings-item-value">
          <select class="styled still-images camera-config" id="captureModeSelect">
            <option value="motion-triggered">Motion Triggered</option>
            <option value="motion-triggered-one">Motion Triggered (One Picture)</option>
            <option value="interval-snapshots">Interval Snapshots</option>
            <option value="all-frames">All Frames</option>
            <option value="manual">Manual</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets the image capture mode:
                                    Motion Triggered = an image captured whenever motion is detected,
                                    Interval Snapshots = an image captured every x seconds,
                                    All Frames = saves each frame to an image file,
                                    Manual = manual snapshots using snapshot button">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="86400" required="true" depends="captureMode=interval-snapshots">
        <td class="settings-item-label"><span class="settings-item-label">Snapshot Interval</span></td>
        <td class="settings-item-value"><input type="text" class="styled number still-images camera-config validator text-validator number-validator" id="snapshotIntervalEntry" title=""><span class="settings-item-unit">seconds</span></td>
        <td><span class="help-mark" title="sets the interval (in seconds) for the snapshots">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Preserve Pictures</span></td>
        <td class="settings-item-value">
          <select class="styled still-images camera-config" id="preservePicturesSelect">
            <option value="1">For One Day</option>
            <option value="7">For One Week</option>
            <option value="30">For One Month</option>
            <option value="365">For One Year</option>
            <option value="0">Forever</option>
            <option value="-1">Custom</option>
          </select>
        </td>
        <td><span class="help-mark" title="images older than the specified duration are automatically deleted to free up storage space">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="3650" depends="preservePictures=-1" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Pictures Lifetime</span></td>
        <td class="settings-item-value"><input type="text" class="styled number still-images camera-config validator text-validator number-validator" id="picturesLifetimeEntry" title=""><span class="settings-item-unit">days</span></td>
        <td><span class="help-mark" title="sets the number of days after which the pictures will be deleted automatically">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Enable Manual Snapshots</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled still-images camera-config" id="manualSnapshotsSwitch">
          <div class="check-box styled still-images camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="when this is enabled, a button on the camera frame will allow you to manually take snapshots">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Movies -->
  <div class="settings-section-title" id="moviesSectionDiv">
    <input type="checkbox" class="styled section movies camera-config" id="moviesEnabledSwitch">
    <div class="check-box styled section movies camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this if you want to record movies">?</span>
    <a class="settings-section-title">Movies</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" required="true" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
        <td class="settings-item-value"><input type="text" class="styled movies camera-config validator text-validator custom-validator" id="movieFileNameEntry" placeholder="file name pattern..." title=""></td>
        <td><span class="help-mark"
            title="sets the name pattern for the movie files; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number, / = subfolder">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Movie Passthrough</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled movies camera-config" id="moviePassthroughSwitch">
          <div class="check-box styled movies camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark"
            title="Create movie files of the motion directly from the camera. This option should reduce CPU usage but does increase memory requirements. No image processing is performed so text overlays, privacy masks etc will not be on the resulting video.">?</span>
        </td>
      </tr>
      <tr class="settings-item" depends="!moviePassthrough">
        <td class="settings-item-label"><span class="settings-item-label">Movie Format</span></td>
        <td class="settings-item-value">
          <select class="styled movies camera-config" id="movieFormatSelect">
            <option value="mpeg4">MPEG4 (.avi)</option>
            <option value="msmpeg4">MSMPEG4v2 (.avi)</option>
            <option value="swf">Small Web Format (.swf)</option>
            <option value="flv">Flash Video (.flv)</option>
            <option value="mov">QuickTime (.mov)</option>
            <option value="mp4">H.264 (.mp4)</option>
            <option value="mp4:h264_nvenc">H.264/NVENC (.mp4)</option>
            <option value="mp4:h264_qsv">H.264/QSV (.mp4)</option>
            <option value="mp4:h264_omx">H.264/OMX (.mp4)</option>
            <option value="mp4:h264_v4l2m2m">H.264/V4L2M2M (.mp4)</option>
            <option value="hevc">HEVC (.mp4)</option>
            <option value="mp4:hevc_nvenc">HEVC/NVENC (.mp4)</option>
            <option value="mp4:hevc_qsv">HEVC/QSV (.mp4)</option>
            <option value="mkv">Matroska Video (.mkv)</option>
            <option value="mkv:h264_omx">Matroska Video/OMX (.mkv)</option>
            <option value="mkv:h264_v4l2m2m">Matroska Video/V4L2M2M (.mkv)</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets the movie file format; not all formats are guaranteed to work on all systems; if in doubt, test each format and select the one that works best with your video player">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
        <td class="settings-item-label"><span class="settings-item-label">Movie Quality</span></td>
        <td class="settings-item-value"><input type="text" class="range styled movies camera-config" id="movieQualitySlider">
          <div class="slider range styled movies camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">25%</span><span class="slider-label" style="left: 40%;">50%</span><span class="slider-label"
                style="left: 65%;">75%</span><span class="slider-label" style="left: 90%;">100%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the MPEG video quality (higher values produce a better video quality but require more storage space)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Recording Mode</span></td>
        <td class="settings-item-value">
          <select class="styled movies camera-config" id="recordingModeSelect">
            <option value="motion-triggered">Motion Triggered</option>
            <option value="continuous">Continuous Recording</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets the recording mode: Motion Triggered = a new movie created whenever motion is detected, Continuous Recording = one big movie file">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="86400" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Maximum Movie Length</span></td>
        <td class="settings-item-value"><input type="text" class="number styled movies camera-config validator text-validator number-validator" id="maxMovieLengthEntry" title=""><span class="settings-item-unit">seconds</span></td>
        <td><span class="help-mark" title="sets the maximum length of movies, in seconds; if the motion event lasts longer, a new movie file is created; use 0 for unlimited length">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Preserve Movies</span></td>
        <td class="settings-item-value">
          <select class="styled movies camera-config" id="preserveMoviesSelect">
            <option value="1">For One Day</option>
            <option value="7">For One Week</option>
            <option value="30">For One Month</option>
            <option value="365">For One Year</option>
            <option value="0">Forever</option>
            <option value="-1">Custom</option>
          </select>
        </td>
        <td><span class="help-mark" title="movies older than the specified duration are automatically deleted to free up storage space">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="3650" depends="preserveMovies=-1" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Movies Lifetime</span></td>
        <td class="settings-item-value"><input type="text" class="styled number movies camera-config validator text-validator number-validator" id="moviesLifetimeEntry" title=""><span class="settings-item-unit">days</span></td>
        <td><span class="help-mark" title="sets the number of days after which the movies will be deleted automatically">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Motion Detection -->
  <div class="settings-section-title" id="motionDetectionSectionDiv">
    <input type="checkbox" class="styled section motion-detection camera-config" id="motionDetectionEnabledSwitch">
    <div class="check-box styled section motion-detection camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this to use and configure the motion detection mechanism">?</span>
    <a class="settings-section-title">Motion Detection</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" min="0" max="20" snap="0" ticksnum="5" decimals="1" unit="%" depends="!autoThresholdTuning">
        <td class="settings-item-label"><span class="settings-item-label">Frame Change Threshold</span></td>
        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="frameChangeThresholdSlider">
          <div class="slider range styled motion-detection camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">5%</span><span class="slider-label" style="left: 40%;">10%</span><span class="slider-label"
                style="left: 65%;">15%</span><span class="slider-label" style="left: 90%;">20%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0.0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark"
            title="indicates the minimal percent of the image that must change between two successive frames in order for motion to be detected (smaller values give a more sensitive detection, but are prone to false positives)">?</span></td>
      </tr>
      <tr class="settings-item" min="0" required="true" depends="!autoThresholdTuning">
        <td class="settings-item-label"><span class="settings-item-label">Maximum Change Threshold</span></td>
        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config validator text-validator number-validator" id="maxFrameChangeThresholdEntry" title=""><span class="settings-item-unit">pixels</span></td>
        <td><span class="help-mark" title="sets the number of pixels changed between frames above which motion is no longer triggered (0 disables the limit)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Auto Threshold Tuning</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="autoThresholdTuningSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this to automatically adjust the threshold">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Auto Noise Detection</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="autoNoiseDetectSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this to automatically adjust the noise level">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="25" snap="0" ticksnum="6" decimals="0" unit="%" depends="!autoNoiseDetect">
        <td class="settings-item-label"><span class="settings-item-label">Noise Level</span></td>
        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="noiseLevelSlider">
          <div class="slider range styled motion-detection camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 10%;">5%</span><span class="slider-label" style="left: 30%;">10%</span><span class="slider-label"
                style="left: 50%;">15%</span><span class="slider-label" style="left: 70%;">20%</span><span class="slider-label" style="left: 90%;">25%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="manually sets the noise level to a fixed value">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="100" snap="2" ticksnum="5" decimals="0" unit="%">
        <td class="settings-item-label"><span class="settings-item-label">Light Switch Detection</span></td>
        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="lightSwitchDetectSlider">
          <div class="slider range styled motion-detection camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">0%</span><span class="slider-label" style="left: 15%;">25%</span><span class="slider-label" style="left: 40%;">50%</span><span class="slider-label"
                style="left: 65%;">75%</span><span class="slider-label" style="left: 90%;">100%</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">0%</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="sets the percentage of the image that needs to change so that the event is treated as a sudden light change instead of motion (0% disables the function)">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Despeckle Filter</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="despeckleFilterSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this to apply a despeckle filter to frames before detecting motion">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item" min="0" max="86400" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Motion Gap</span></td>
        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config validator text-validator number-validator" id="eventGapEntry" title=""><span class="settings-item-unit">seconds</span></td>
        <td><span class="help-mark" title="sets the number of seconds of silence (i.e. no motion) that mark the end of a motion event">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="1000" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Captured Before</span></td>
        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config validator text-validator number-validator" id="preCaptureEntry" title=""><span class="settings-item-unit">frames</span></td>
        <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) before a motion event is detected">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="1000" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Captured After</span></td>
        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config validator text-validator number-validator" id="postCaptureEntry" title=""><span class="settings-item-unit">frames</span></td>
        <td><span class="help-mark" title="sets the number of frames to be captured (and included in the movie) after the end of a motion event">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="1000" required="true">
        <td class="settings-item-label"><span class="settings-item-label">Minimum Motion Frames</span></td>
        <td class="settings-item-value"><input type="text" class="number styled motion-detection camera-config validator text-validator number-validator" id="minimumMotionFramesEntry" title=""><span class="settings-item-unit">frames</span></td>
        <td><span class="help-mark" title="sets the minimum number of successive motion frames required to start a motion event">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Mask</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="maskSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enables image masking for a more selective and precise motion detection">?</span></td>
      </tr>
      <tr class="settings-item" depends="mask">
        <td class="settings-item-label"><span class="settings-item-label">Mask Type</span></td>
        <td class="settings-item-value">
          <select class="styled motion-detection camera-config" id="maskTypeSelect">
            <option value="smart">Smart</option>
            <option value="editable">Editable</option>
          </select>
        </td>
        <td><span class="help-mark" title="the smart option automatically detects regions with regular motion and dynamically builds an internal mask, while the editable mask allows you to manually build it yourself">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="10" snap="1" ticksnum="10" decimals="0" unit="" depends="mask maskType=smart">
        <td class="settings-item-label"><span class="settings-item-label">Smart Mask Sluggishness</span></td>
        <td class="settings-item-value"><input type="text" class="range styled motion-detection camera-config" id="smartMaskSluggishnessSlider">
          <div class="slider range styled motion-detection camera-config" tabindex="0">
            <div class="slider-labels"><span class="slider-label" style="left: -10%;">1</span><span class="slider-label" style="left: 1.11111%;">2</span><span class="slider-label" style="left: 12.2222%;">3</span><span class="slider-label"
                style="left: 23.3333%;">4</span><span class="slider-label" style="left: 34.4444%;">5</span><span class="slider-label" style="left: 45.5556%;">6</span><span class="slider-label" style="left: 56.6667%;">7</span><span
                class="slider-label" style="left: 67.7778%;">8</span><span class="slider-label" style="left: 78.8889%;">9</span><span class="slider-label" style="left: 90%;">10</span></div>
            <div class="slider-bar">
              <div class="slider-bar-inside"></div>
              <div class="slider-cursor" style="left: 0%;">
                <div class="slider-cursor-label">1</div>
              </div>
            </div>
          </div>
        </td>
        <td><span class="help-mark" title="higher values result in a longer-lasting smart mask with a slower building process">?</span></td>
      </tr>
      <tr class="settings-item" depends="mask maskType=editable">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button edit-mask-button" id="editMaskButton">Edit Mask</div>
          <div class="button normal-button save-mask-button" id="saveMaskButton">Save Mask</div>
          <input type="text" class="motion-detection camera-config" id="maskLinesEntry">
        </td>
        <td><span class="help-mark" title="click this button to enable/disable the mask editor">?</span></td>
      </tr>
      <tr class="settings-item" depends="mask maskType=editable">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button clear-mask-button" id="clearMaskButton">Clear Mask</div>
        </td>
        <td><span class="help-mark" title="click this button to clear the current mask">?</span></td>
      </tr>
      <tr class="settings-item">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="showFrameChangesSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="if this is enabled, frame changes (number of pixels as well as the changed area) are shown on the video; temporarily enable this option to help adjust the motion detection parameters">?</span></td>
      </tr>
      <tr class="settings-item">
        <td class="settings-item-label"><span class="settings-item-label">Create Debug Media Files</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled motion-detection camera-config" id="createDebugMediaSwitch">
          <div class="check-box styled motion-detection camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="when enabled, creates special movies and pictures that help debugging motion detection problems">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Motion Notifications -->
  <div class="settings-section-title" id="notificationsSectionDiv">
    <span class="help-mark" title="enable this if you want to be notified when motion is detected">?</span>
    <a class="settings-section-title">Motion Notifications</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Send An Email</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="emailNotificationsEnabledSwitch">
          <div class="check-box styled notifications camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want to receive an email whenever a motion event is detected">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Email Addresses</span></td>
        <td class="settings-item-value"><input type="text" autocomplete="new-password" class="styled notifications camera-config validator text-validator custom-validator" id="emailAddressesEntry" placeholder="email addresses..." title=""></td>
        <td><span class="help-mark" title="email addresses (separated by comma) that are added here will receive notifications whenever a motion event is detected">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">SMTP Server</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config validator text-validator" id="smtpServerEntry" placeholder="e.g. smtp.gmail.com" title=""></td>
        <td><span class="help-mark" title="enter the hostname or IP address of your SMTP server (for Gmail use smtp.gmail.com)">?</span></td>
      </tr>
      <tr class="settings-item" min="1" max="65535" depends="emailNotificationsEnabled motionDetectionEnabled" required="true">
        <td class="settings-item-label"><span class="settings-item-label">SMTP Port</span></td>
        <td class="settings-item-value"><input type="text" class="styled number notifications camera-config validator text-validator number-validator" id="smtpPortEntry" placeholder="e.g. 587" title=""></td>
        <td><span class="help-mark" title="enter the port used by your SMTP server (usually 465 for non-TLS connections and 587 for TLS connections)">?</span></td>
      </tr>
      <tr class="settings-item" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">SMTP Account</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config" id="smtpAccountEntry" placeholder="account@gmail.com..."></td>
        <td><span class="help-mark" title="enter your SMTP account (normally your email address)">?</span></td>
      </tr>
      <tr class="settings-item" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">SMTP Password</span></td>
        <td class="settings-item-value"><input type="password" autocomplete="new-password" class="styled notifications camera-config" id="smtpPasswordEntry"></td>
        <td><span class="help-mark" title="enter your SMTP account password (for Gmail use your Google password or an app-specific generated password)">?</span></td>
      </tr>
      <tr class="settings-item" depends="emailNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">From Address</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config validator custom-validator" id="emailFromEntry" placeholder="email address..." title=""></td>
        <td><span class="help-mark" title="set a custom From address, if your SMTP service requires one (the first destination email address will be used if left blank)">?</span></td>
      </tr>
      <tr class="settings-item" depends="emailNotificationsEnabled motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Use TLS</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="smtpTlsSwitch">
          <div class="check-box styled notifications camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if your SMTP server requires TLS (Gmail needs this to be enabled)">?</span></td>
      </tr>
      <tr class="settings-item" min="0" max="60" required="true" depends="emailNotificationsEnabled motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Attached Pictures Time Span</span></td>
        <td class="settings-item-value"><input type="text" class="number styled notifications camera-config validator text-validator number-validator" id="emailPictureTimeSpanEntry" title=""><span class="settings-item-unit">seconds</span></td>
        <td><span class="help-mark"
            title="defines the picture search time interval to use when creating email attachments (higher values generate emails with more pictures at the cost of an increased notification delay); set to 0 to disable picture attachments; you must also enable Still Images for this to work">?</span>
        </td>
      </tr>
      <tr class="settings-item" depends="emailNotificationsEnabled motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label"></span></td>
        <td class="settings-item-value">
          <div class="button normal-button test-button" id="emailTestButton">Test Email</div>
        </td>
        <td><span class="help-mark" title="click this button to test email notifications after you have filled in the required details">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Call A Web Hook</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="webHookNotificationsEnabledSwitch">
          <div class="check-box styled notifications camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want a URL to be requested whenever a motion event is detected">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="webHookNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Web Hook URL</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config validator text-validator" id="webHookNotificationsUrlEntry" placeholder="e.g. http://example.com/notify/" title=""></td>
        <td><span class="help-mark" title="a URL to be requested when motion is detected; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number">?</span>
        </td>
      </tr>
      <tr class="settings-item" depends="webHookNotificationsEnabled motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">HTTP Method</span></td>
        <td class="settings-item-value">
          <select class="styled notifications camera-config" id="webHookNotificationsHttpMethodSelect">
            <option value="GET">GET</option>
            <option value="POST">POST (query)</option>
            <option value="POSTf">POST (form)</option>
            <option value="POSTj">POST (json)</option>
          </select>
        </td>
        <td><span class="help-mark" title="the HTTP method to use when requesting the web hook URL (the given URL-encoded parameters will in fact be transmitted as indicated here)">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Run A Command</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="commandNotificationsEnabledSwitch">
          <div class="check-box styled notifications camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want to execute a command whenever a motion event is detected">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="commandNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config validator text-validator" id="commandNotificationsEntry" placeholder="command..." title=""></td>
        <td><span class="help-mark"
            title="a command to be executed when motion is detected; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = day, %H = hour, %M = minute, %S = second, %q = frame number, %v = event number">?</span>
        </td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td colspan="100">
          <div class="settings-item-separator"></div>
        </td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Run An End Command</span></td>
        <td class="settings-item-value"><input type="checkbox" class="styled notifications camera-config" id="commandEndNotificationsEnabledSwitch">
          <div class="check-box styled notifications camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
        <td><span class="help-mark" title="enable this if you want to execute a command whenever a motion event ends">?</span></td>
      </tr>
      <tr class="settings-item" required="true" depends="commandEndNotificationsEnabled motionDetectionEnabled" strip="true">
        <td class="settings-item-label"><span class="settings-item-label">Command</span></td>
        <td class="settings-item-value"><input type="text" class="styled notifications camera-config validator text-validator" id="commandEndNotificationsEntry" placeholder="command..." title=""></td>
        <td><span class="help-mark"
            title="a command to be executed when motion event ends; multiple commands can be separated by a semicolon; don't use semicolons inside commands; the following special tokens are accepted: %Y = year, %m = month, %d = date, %H = hour, %M = minute, %S = second, %q = frame number">?</span>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- Working Schedule -->
  <div class="settings-section-title" depends="motionDetectionEnabled" id="workingScheduleSectionDiv">
    <input type="checkbox" class="styled section working-schedule camera-config" id="workingScheduleEnabledSwitch">
    <div class="check-box styled section working-schedule camera-config" tabindex="0">
      <div class="check-box-button"><span class="check-box-text">OFF</span></div>
    </div>
    <span class="help-mark" title="enable this if you want to define a weekly working schedule for motion detection">?</span>
    <a class="settings-section-title">Working Schedule</a>
    <span class="minimize"></span>
  </div>
  <table class="settings">
    <tbody>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Monday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="mondayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="mondayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="mondayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Mondays">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Tuesday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="tuesdayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="tuesdayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="tuesdayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Tuesdays">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Wednesday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="wednesdayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="wednesdayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="wednesdayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Wednesdays">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Thursday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="thursdayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="thursdayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="thursdayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Thursdays">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Friday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="fridayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="fridayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="fridayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Friday">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Saturday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="saturdayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="saturdayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="saturdayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Saturday">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Sunday</span></td>
        <td class="settings-item-value">
          <input type="checkbox" class="styled working-schedule camera-config" id="sundayEnabledSwitch">
          <div class="check-box styled working-schedule camera-config" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
          <span class="settings-item-unit time">from</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="sundayFromEntry" autocomplete="off" title="">
          <span class="settings-item-unit time">to</span><input type="text" class="styled working-schedule time camera-config ui-timepicker-input validator time-validator" id="sundayToEntry" autocomplete="off" title="">
        </td>
        <td><span class="help-mark" title="sets the working schedule time interval for Sunday">?</span></td>
      </tr>
      <tr class="settings-item" depends="motionDetectionEnabled">
        <td class="settings-item-label"><span class="settings-item-label">Detect Motion</span></td>
        <td class="settings-item-value">
          <select class="styled working-schedule camera-config" id="workingScheduleTypeSelect">
            <option value="during">During Working Schedule</option>
            <option value="outside">Outside Working Schedule</option>
          </select>
        </td>
        <td><span class="help-mark" title="sets whether motion detection should be active during or outside the working schedule">?</span></td>
      </tr>
    </tbody>
  </table>
  <!-- Additional Camera Sections -->
  <div class="settings-progress" style="width: 100%; opacity: 0.9;"></div>
</form>

POST /login/

<form action="/login/" target="temp" method="POST"><input type="submit" style="display: none;" name="login" value="login">
  <table class="login-dialog">
    <tbody>
      <tr>
        <td class="login-dialog-error" colspan="100"></td>
      </tr>
      <tr>
        <td class="dialog-item-label"><span class="dialog-item-label">Username</span></td>
        <td class="dialog-item-value"><input type="text" name="username" class="styled" id="usernameEntry" autofocus=""></td>
      </tr>
      <tr>
        <td class="dialog-item-label"><span class="dialog-item-label">Password</span></td>
        <td class="dialog-item-value"><input type="password" name="password" class="styled" id="passwordEntry"></td>
      </tr>
      <tr>
        <td class="dialog-item-label"><span class="dialog-item-label">Remember Me</span></td>
        <td class="dialog-item-value"><input type="checkbox" name="remember" class="styled" id="rememberCheck">
          <div class="check-box styled" tabindex="0">
            <div class="check-box-button"><span class="check-box-text">OFF</span></div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</form>

Text Content

ssojoo-server
motionEye
? Preferences

Layout Columns
1234
1
? Fit Frames Vertically
OFF
? Layout Rows
1234
1
? Frame Rate Dimmer
020406080100
0
? Resolution Dimmer
120406080100
1
?


? General Settings

Admin Username ? Admin Password ? Surveillance Username ? Surveillance Password
?

motionEye Version 0.42.1 Motion Version 4.3.2 OS Version Ubuntu 22.04 Power
Shut Down
?
Reboot
?

Configuration
Backup
?
Restore
?


OFF
? Video Device

Camera Name ? Camera ID ? Camera Device Camera Type

Automatic Brightness
OFF
?

Video Resolution ? Width ? Height ? Video Rotation 0° 90° 180° 270° ? Frame Rate
251015202530
2
? Extra Motion Options ?

? File Storage

Storage Device ? Network Server ? SMB Protocol Version 1.0 2.0 2.1 3.0 3.1.1 ?
Share Name ? Share Username ? Share Password ? Root Directory ?
Test Share
?

Disk Usage

?

Upload Media Files
OFF
? Upload Pictures
OFF
? Upload Movies
OFF
? Upload Service FTP Server SFTP Server Google Drive Google Photo Dropbox ?
Server Address ? Server Port ? Method POST PUT ? Location ? Include Subfolders
OFF
? Clean Cloud
OFF
? Username ? Password ? Authorization Key ?
Obtain Key
?
Test Service
?

Call A Web Hook
OFF
? Web Hook URL ? HTTP Method GET POST (query) POST (form) POST (json) ?

Run A Command
OFF
? Command ?

OFF
? Text Overlay

Left Text Camera Name Timestamp Custom Text Disabled ? ? Right Text Camera Name
Timestamp Custom Text Disabled ? ? Text Scale
12345678910
1
?

OFF
? Video Streaming

Streaming Frame Rate
151015202530
1
? Streaming Quality
0%25%50%75%100%
0%
? Streaming Image Resizing
OFF
? Streaming Resolution
0%25%50%75%100%
0%
? Streaming Port ? Authentication Mode Disabled Basic Digest ? Motion
Optimization
OFF
?

Useful URLs
Snapshot URL
?
Streaming URL
?
Embed URL
?

OFF
? Still Images

Image File Name ? Image Quality
0%25%50%75%100%
0%
? Capture Mode Motion Triggered Motion Triggered (One Picture) Interval
Snapshots All Frames Manual ? Snapshot Interval seconds ? Preserve Pictures For
One Day For One Week For One Month For One Year Forever Custom ? Pictures
Lifetime days ? Enable Manual Snapshots
OFF
?

OFF
? Movies

Movie File Name ? Movie Passthrough
OFF
? Movie Format MPEG4 (.avi) MSMPEG4v2 (.avi) Small Web Format (.swf) Flash Video
(.flv) QuickTime (.mov) H.264 (.mp4) H.264/NVENC (.mp4) H.264/QSV (.mp4)
H.264/OMX (.mp4) H.264/V4L2M2M (.mp4) HEVC (.mp4) HEVC/NVENC (.mp4) HEVC/QSV
(.mp4) Matroska Video (.mkv) Matroska Video/OMX (.mkv) Matroska Video/V4L2M2M
(.mkv) ? Movie Quality
0%25%50%75%100%
0%
? Recording Mode Motion Triggered Continuous Recording ? Maximum Movie Length
seconds ? Preserve Movies For One Day For One Week For One Month For One Year
Forever Custom ? Movies Lifetime days ?

OFF
? Motion Detection

Frame Change Threshold
0%5%10%15%20%
0.0%
? Maximum Change Threshold pixels ? Auto Threshold Tuning
OFF
? Auto Noise Detection
OFF
? Noise Level
0%5%10%15%20%25%
0%
? Light Switch Detection
0%25%50%75%100%
0%
? Despeckle Filter
OFF
?

Motion Gap seconds ? Captured Before frames ? Captured After frames ? Minimum
Motion Frames frames ?

Mask
OFF
? Mask Type Smart Editable ? Smart Mask Sluggishness
12345678910
1
?
Edit Mask
Save Mask
?
Clear Mask
?

Show Frame Changes
OFF
? Create Debug Media Files
OFF
?

? Motion Notifications

Send An Email
OFF
? Email Addresses ? SMTP Server ? SMTP Port ? SMTP Account ? SMTP Password ?
From Address ? Use TLS
OFF
? Attached Pictures Time Span seconds ?
Test Email
?

Call A Web Hook
OFF
? Web Hook URL ? HTTP Method GET POST (query) POST (form) POST (json) ?

Run A Command
OFF
? Command ?

Run An End Command
OFF
? Command ?

OFF
? Working Schedule

Monday
OFF
from to ? Tuesday
OFF
from to ? Wednesday
OFF
from to ? Thursday
OFF
from to ? Friday
OFF
from to ? Saturday
OFF
from to ? Sunday
OFF
from to ? Detect Motion During Working Schedule Outside Working Schedule ?



copyright © Calin Crisan

Login

UsernamePasswordRemember Me
OFF

Cancel
Login