title: How can I change my html script to run a command line command
body: <p>I've had a look to see if this has been covered elsewhere but I couldn't find anything, so can anyone help me, please?</p>
  <p>I have an html page, which includes a script section. Currently, the script shows a button to start and stop the streaming of esp32 camera video to a webpage. The relevant sections are these, I think:</p>
  <pre><code>    const stopStream = () =&gt; {
        window.stop();
        streamButton.innerHTML = &quot;Start Stream&quot;;
      };
  
      const startStream = () =&gt; {
        view.src = `${streamUrl}/stream`;
        show(viewContainer);
        streamButton.innerHTML = &quot;Stop Stream&quot;;
      };
  </code></pre>
  <p>What I want to do is replace the code, to run the ffmpeg or ffplay command. So, in pseudo code it would be:</p>
  <pre><code>    const stopStream = () =&gt; {
        ffmpeg -q; //to quit??
        streamButton.innerHTML = &quot;Start Stream&quot;;
      };
  
      const startStream = () =&gt; {
        ffmpeg -i ${streamUrl}/stream;
        streamButton.innerHTML = &quot;Stop Stream&quot;;
      };
  </code></pre>
  <p>A subsidiary question would be:</p>
  <p>Could the ffmpeg command be uploaded with the html code, somehow? ie could the ffmpeg application be run WITHOUT the user having to install ffmpeg on the device used to view the video stream? (hope that makes sense)</p>
  <p>Any pointers will be gratefully received.</p>
  <p>Thanks</p>
  <p>The whole script (minus some extraneous parts) is shown below.</p>
  <pre><code>&lt;script&gt;
    document.addEventListener(&quot;DOMContentLoaded&quot;, function (event) {
      var baseHost = document.location.origin;
      var streamUrl = baseHost + &quot;:81&quot;;
  
      const hide = (el) =&gt; {
        el.classList.add(&quot;hidden&quot;);
      };
      const show = (el) =&gt; {
        el.classList.remove(&quot;hidden&quot;);
      };
  
      const disable = (el) =&gt; {
        el.classList.add(&quot;disabled&quot;);
        el.disabled = true;
      };
  
      const enable = (el) =&gt; {
        el.classList.remove(&quot;disabled&quot;);
        el.disabled = false;
      };
  
      const updateValue = (el, value, updateRemote) =&gt; {
        updateRemote = updateRemote == null ? true : updateRemote;
        let initialValue;
        if (el.type === &quot;checkbox&quot;) {
          initialValue = el.checked;
          value = !!value;
          el.checked = value;
        } else {
          initialValue = el.value;
          el.value = value;
        }
  
        if (updateRemote &amp;&amp; initialValue !== value) {
          updateConfig(el);
        } else if (!updateRemote) {
          if (el.id === &quot;aec&quot;) {
            value ? hide(exposure) : show(exposure);
          } else if (el.id === &quot;agc&quot;) {
            if (value) {
              show(gainCeiling);
              hide(agcGain);
            } else {
              hide(gainCeiling);
              show(agcGain);
            }
          } else if (el.id === &quot;awb_gain&quot;) {
            value ? show(wb) : hide(wb);
          } else if (el.id === &quot;face_recognize&quot;) {
            value ? enable(enrollButton) : disable(enrollButton);
          }
        }
      };
  
      function updateConfig(el) {
        let value;
        switch (el.type) {
          case &quot;checkbox&quot;:
            value = el.checked ? 1 : 0;
            break;
          case &quot;range&quot;:
          case &quot;select-one&quot;:
            value = el.value;
            break;
          case &quot;button&quot;:
          case &quot;submit&quot;:
            value = &quot;1&quot;;
            break;
          default:
            return;
        }
  
        const query = `${baseHost}/control?var=${el.id}&amp;val=${value}`;
  
        fetch(query).then((response) =&gt; {
          console.log(
            `request to ${query} finished, status: ${response.status}`
          );
        });
      }
  
      document.querySelectorAll(&quot;.close&quot;).forEach((el) =&gt; {
        el.onclick = () =&gt; {
          hide(el.parentNode);
        };
      });
  
      // read initial values
      fetch(`${baseHost}/status`)
        .then(function (response) {
          return response.json();
        })
        .then(function (state) {
          document.querySelectorAll(&quot;.default-action&quot;).forEach((el) =&gt; {
            updateValue(el, state[el.id], false);
          });
        });
  
      const view = document.getElementById(&quot;stream&quot;);
      const viewContainer = document.getElementById(&quot;stream-container&quot;);
      const stillButton = document.getElementById(&quot;get-still&quot;);
      const streamButton = document.getElementById(&quot;toggle-stream&quot;);
      const enrollButton = document.getElementById(&quot;face_enroll&quot;);
      const closeButton = document.getElementById(&quot;close-stream&quot;);
  
      const stopStream = () =&gt; {
        window.stop();
        streamButton.innerHTML = &quot;Start Stream&quot;;
      };
  
      const startStream = () =&gt; {
        view.src = `${streamUrl}/stream`;
        show(viewContainer);
        streamButton.innerHTML = &quot;Stop Stream&quot;;
      };
  
      // Attach actions to buttons
      stillButton.onclick = () =&gt; {
        stopStream();
        view.src = `${baseHost}/capture?_cb=${Date.now()}`;
        show(viewContainer);
      };
  
      closeButton.onclick = () =&gt; {
        stopStream();
        hide(viewContainer);
      };
  
      streamButton.onclick = () =&gt; {
        const streamEnabled = streamButton.innerHTML === &quot;Stop Stream&quot;;
        if (streamEnabled) {
          stopStream();
        } else {
          startStream();
        }
      };
  
      enrollButton.onclick = () =&gt; {
        updateConfig(enrollButton);
      };
  
      // Attach default on change action
      document.querySelectorAll(&quot;.default-action&quot;).forEach((el) =&gt; {
        el.onchange = () =&gt; updateConfig(el);
      });
  
    });
  &lt;/script&gt;
  </code></pre>