如何在HTML button点击时执行Bash命令控制树莓派VLC流？

方案1：纯PHP+HTML表单（简单直接，无需JS） #

利用HTML的<form>和<button>提交请求，PHP脚本接收参数后执行对应命令，完全符合你不想用<input>的需求。

1.1 前端HTML代码 #

把每个按钮放在独立表单中，避免提交冲突：

<!-- 启动流 -->
<form method="post" action="control.php">
  <button type="submit" name="action" value="play">启动流</button>
</form>

<!-- 切换下一流 -->
<form method="post" action="control.php">
  <button type="submit" name="action" value="next">下一流</button>
</form>

<!-- 切换上一流 -->
<form method="post" action="control.php">
  <button type="submit" name="action" value="prev">上一流</button>
</form>

<!-- 停止流并显示Chromium -->
<form method="post" action="control.php">
  <button type="submit" name="action" value="stop">停止流</button>
</form>

<!-- 重启设备 -->
<form method="post" action="control.php">
  <button type="submit" name="action" value="reboot">重启设备</button>
</form>

1.2 后端control.php代码 #

<?php
if (isset($_POST['action'])) {
    $action = $_POST['action'];
    
    switch($action) {
        case 'play':
            shell_exec("echo play > /tmp/vlc_command");
            break;
        case 'next':
            shell_exec("echo next > /tmp/vlc_command");
            break;
        case 'prev':
            shell_exec("echo prev > /tmp/vlc_command");
            break;
        case 'stop':
            shell_exec("echo stop > /tmp/vlc_command");
            // 可选：添加启动Chromium kiosk的命令
            // shell_exec("pkill chromium-browser; chromium-browser --kiosk http://你的数据网站地址 &");
            break;
        case 'reboot':
            // 重启需要配置sudo权限，见下方说明
            shell_exec("sudo reboot");
            break;
    }
}

// 执行完跳转回原页面，避免重复提交
header("Location: " . $_SERVER['HTTP_REFERER']);
exit;
?>

方案2：JavaScript Fetch API（无刷新体验） #

如果不想页面刷新，用JS发送异步请求到PHP脚本，保持页面状态：

2.1 前端HTML+JS代码 #

<button onclick="sendCommand('play')">启动流</button>
<button onclick="sendCommand('next')">下一流</button>
<button onclick="sendCommand('prev')">上一流</button>
<button onclick="sendCommand('stop')">停止流</button>
<button onclick="sendCommand('reboot')">重启设备</button>

<script>
function sendCommand(action) {
    fetch('control.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=' + action
    })
    .then(() => console.log('命令已发送：' + action))
    .catch(err => console.error('发送失败:', err));
}
</script>

2.2 后端control.php代码 #

和方案1的control.php完全一致，无需修改。

方案3：不用PHP，用Bash CGI脚本 #

如果不想依赖PHP，可通过web服务器的CGI功能直接执行Bash脚本：

3.1 配置Apache（以Apache为例） #

启用CGI模块并配置目录：

sudo a2enmod cgi
sudo mkdir /var/www/html/cgi-bin
sudo chmod 755 /var/www/html/cgi-bin

修改Apache配置文件（如/etc/apache2/sites-available/000-default.conf），添加：

ScriptAlias /cgi-bin/ /var/www/html/cgi-bin/
<Directory "/var/www/html/cgi-bin">
    AllowOverride None
    Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
    Require all granted
</Directory>

重启Apache：

sudo systemctl restart apache2

3.2 编写Bash CGI脚本（control.sh） #

放在/var/www/html/cgi-bin/目录下：

#!/bin/bash
echo "Content-type: text/plain"
echo ""

# 获取POST参数
read -r POST_DATA
ACTION=$(echo "$POST_DATA" | grep -oP '(?<=action=)[^&]+')

case "$ACTION" in
    play)
        echo play > /tmp/vlc_command
        ;;
    next)
        echo next > /tmp/vlc_command
        ;;
    prev)
        echo prev > /tmp/vlc_command
        ;;
    stop)
        echo stop > /tmp/vlc_command
        # 可选：启动Chromium kiosk
        # pkill chromium-browser
        # chromium-browser --kiosk http://你的数据网站地址 &
        ;;
    reboot)
        sudo reboot
        ;;
esac

给脚本添加执行权限：

sudo chmod 755 /var/www/html/cgi-bin/control.sh

3.3 前端HTML代码 #

用JS调用CGI脚本：

<button onclick="sendCommand('play')">启动流</button>
<button onclick="sendCommand('next')">下一流</button>
<button onclick="sendCommand('prev')">上一流</button>
<button onclick="sendCommand('stop')">停止流</button>
<button onclick="sendCommand('reboot')">重启设备</button>

<script>
function sendCommand(action) {
    fetch('/cgi-bin/control.sh', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=' + action
    })
    .then(() => console.log('命令已发送：' + action))
    .catch(err => console.error('发送失败:', err));
}
</script>

关键权限配置 #

1. 命名管道权限：确保web服务器用户（www-data）能写入管道：

sudo chown www-data:www-data /tmp/vlc_command
sudo chmod 664 /tmp/vlc_command

如果管道是动态创建的，可在启动VLC的命令中指定权限：

mkfifo /tmp/vlc_command && chown www-data:www-data /tmp/vlc_command && chmod 664 /tmp/vlc_command && vlc ...

2. 重启设备权限：让www-data无需密码执行重启命令，编辑sudoers文件：

sudo visudo

添加一行：

www-data ALL=(ALL) NOPASSWD: /sbin/reboot

保存退出即可。

内容的提问来源于stack exchange，提问作者Just Works