如何更改HTML脚本以运行命令行命令

问题描述

我已经看过其他地方是否涵盖了该内容，但找不到任何东西，所以有人可以帮助我吗？

我有一个html页面，其中包括一个脚本部分。当前，脚本显示一个按钮来启动和停止esp32相机视频流到网页。我认为相关的部分如下：

    const stopStream = () => {
      window.stop();
      streamButton.innerHTML = "Start Stream";
    };

    const startStream = () => {
      view.src = `${streamUrl}/stream`;
      show(viewContainer);
      streamButton.innerHTML = "Stop Stream";
    };

我要做的是替换代码，运行ffmpeg或ffplay命令。因此，用伪代码将是：

    const stopStream = () => {
      ffmpeg -q; //to quit??
      streamButton.innerHTML = "Start Stream";
    };

    const startStream = () => {
      ffmpeg -i ${streamUrl}/stream;
      streamButton.innerHTML = "Stop Stream";
    };

一个附属问题是：

是否可以将ffmpeg命令与HTML代码一起上传？即ffmpeg应用程序可以运行而无需用户在用于观看视频流的设备上安装ffmpeg吗？ （希望如此）

任何指针都会被感激。

谢谢

整个脚本（减去一些无关的部分）如下所示。

<script>
  document.addEventListener("DOMContentLoaded",function (event) {
    var baseHost = document.location.origin;
    var streamUrl = baseHost + ":81";

    const hide = (el) => {
      el.classList.add("hidden");
    };
    const show = (el) => {
      el.classList.remove("hidden");
    };

    const disable = (el) => {
      el.classList.add("disabled");
      el.disabled = true;
    };

    const enable = (el) => {
      el.classList.remove("disabled");
      el.disabled = false;
    };

    const updateValue = (el,value,updateRemote) => {
      updateRemote = updateRemote == null ? true : updateRemote;
      let initialValue;
      if (el.type === "checkBox") {
        initialValue = el.checked;
        value = !!value;
        el.checked = value;
      } else {
        initialValue = el.value;
        el.value = value;
      }

      if (updateRemote && initialValue !== value) {
        updateConfig(el);
      } else if (!updateRemote) {
        if (el.id === "aec") {
          value ? hide(exposure) : show(exposure);
        } else if (el.id === "agc") {
          if (value) {
            show(gainCeiling);
            hide(agcGain);
          } else {
            hide(gainCeiling);
            show(agcGain);
          }
        } else if (el.id === "awb_gain") {
          value ? show(wb) : hide(wb);
        } else if (el.id === "face_recognize") {
          value ? enable(enrollButton) : disable(enrollButton);
        }
      }
    };

    function updateConfig(el) {
      let value;
      switch (el.type) {
        case "checkBox":
          value = el.checked ? 1 : 0;
          break;
        case "range":
        case "select-one":
          value = el.value;
          break;
        case "button":
        case "submit":
          value = "1";
          break;
        default:
          return;
      }

      const query = `${baseHost}/control?var=${el.id}&val=${value}`;

      fetch(query).then((response) => {
        console.log(
          `request to ${query} finished,status: ${response.status}`
        );
      });
    }

    document.querySelectorAll(".close").forEach((el) => {
      el.onclick = () => {
        hide(el.parentNode);
      };
    });

    // read initial values
    fetch(`${baseHost}/status`)
      .then(function (response) {
        return response.json();
      })
      .then(function (state) {
        document.querySelectorAll(".default-action").forEach((el) => {
          updateValue(el,state[el.id],false);
        });
      });

    const view = document.getElementById("stream");
    const viewContainer = document.getElementById("stream-container");
    const stillButton = document.getElementById("get-still");
    const streamButton = document.getElementById("toggle-stream");
    const enrollButton = document.getElementById("face_enroll");
    const closeButton = document.getElementById("close-stream");

    const stopStream = () => {
      window.stop();
      streamButton.innerHTML = "Start Stream";
    };

    const startStream = () => {
      view.src = `${streamUrl}/stream`;
      show(viewContainer);
      streamButton.innerHTML = "Stop Stream";
    };

    // Attach actions to buttons
    stillButton.onclick = () => {
      stopStream();
      view.src = `${baseHost}/capture?_cb=${Date.Now()}`;
      show(viewContainer);
    };

    closeButton.onclick = () => {
      stopStream();
      hide(viewContainer);
    };

    streamButton.onclick = () => {
      const streamEnabled = streamButton.innerHTML === "Stop Stream";
      if (streamEnabled) {
        stopStream();
      } else {
        startStream();
      }
    };

    enrollButton.onclick = () => {
      updateConfig(enrollButton);
    };

    // Attach default on change action
    document.querySelectorAll(".default-action").forEach((el) => {
      el.onchange = () => updateConfig(el);
    });

  });
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）