给哔哩哔哩bilibili电脑版做个手机遥控器

前言

bilibili电脑版可以在电脑屏幕上观看bilibili视频。然而，电脑版的bilibili不能通过手机控制视频翻页和调节音量，这意味着观看视频时需要一直坐在电脑旁边。那么，有没有办法制作一个手机遥控器来控制bilibili电脑版呢？

首先，bilibili电脑版支持快捷键，可以通过一些快捷键来控制视频播放。例如，按下空格键可以控制视频的播放和暂停。

既然快捷键可以控制视频，那么我们的思路就很清晰了。可以在电脑上搭建一个HTTP服务器，部署一个遥控器样式的网页，上面放置一些简单的按钮。用户打开网页后，点击这些按钮，服务器端就会模拟用户点击键盘来实现相应的操作。

前后台代码实现

说干就干, 开始动手实现这个手机版bilibili遥控器, 语言方面我们选择使用NodeJS来搭建我们的服务器, 先写前端UI:

整体的网页框架

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<body>
    ...
</body>
<script>
    ...
</script>
</html>

<meta charset="utf-8">: 指定文档的字符编码为UTF-8。
<meta name="viewport" content="width=device-width, initial-scale=1" />: 使页面在移动设备上适应屏幕宽度，并初始缩放比例为1。

遥控器的按钮:

<button data-action="up" style="margin-bottom: 30px;width: 100%;height: 110px;">音量+</button>
<button data-action="down" style="margin-bottom: 30px;width: 100%;height: 110px;">音量-</button>
<button data-action="previous" style="margin-bottom: 30px;width: 100%;height: 110px;">上一个</button>
<button data-action="next" style="margin-bottom: 30px;width: 100%;height: 110px;">下一个</button>
<button data-action="pauseOrPlay" style="margin-bottom: 30px;width: 100%;height: 110px;">暂停/播放</button>

每个按钮都有一个 data-action 属性，用于定义按钮的动作。

按钮的样式通过 style 属性设置，按钮高度110px，宽度100%，且每个按钮的底部都有30px的间距。

Javascript代码

document.querySelectorAll('button[data-action]').forEach(button => {
    button.addEventListener('click', () => {
        const action = button.getAttribute('data-action');
        fetch(`${window.location.origin}/${action}`)
            .then(response => response.json())
            .then(data => {
                console.log(data);
            })
            .catch(error => {
                alert('Error fetching data:', error);
            });
    });
});

首先代码中会选择所有带有 data-action 属性的按钮。

为每个按钮添加点击事件监听器。

点击按钮后，会获取按钮的 data-action 属性值，并发起一个fetch请求

整体的网页代码

整体的网页代码如下:

<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />

<body>
    <button data-action="up" style="margin-bottom: 30px;width: 100%;height: 110px;">音量+</button>
    <br>
    <button data-action="down" style="margin-bottom: 30px;width: 100%;height: 110px;">音量-</button>
    <br>
    <button data-action="previous" style="margin-bottom: 30px;width: 100%;height: 110px;">上一个</button>
    <br>
    <button data-action="next" style="margin-bottom: 30px;width: 100%;height: 110px;">下一个</button>
    <br>
    <button data-action="pauseOrPlay" style="margin-bottom: 30px;width: 100%;height: 110px;">暂停/播放</button>
    <br>
</body>

<script>
    document.querySelectorAll('button[data-action]').forEach(button => {
        button.addEventListener('click', () => {
            const action = button.getAttribute('data-action');
            fetch(`${window.location.origin}/${action}`)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                })
                .catch(error => {
                    alert('Error fetching data:', error);
                });
        });
    });
</script>

</html>

预览效果

网页在手机浏览器里打开的效果如下图所示:

后端HTTP服务器实现

剩下的就是服务端了, 主要用来接受http请求, 触发不同的键盘事件即可.

整体代码

const path = require("path");
const ks = require('node-key-sender');
const express = require('express');
const app = express();
const port = 3000;

const actions = {
  next: () => ks.sendKey('down'),
  previous: () => ks.sendKey('up'),
  up: () => ks.sendCombination(['shift', 'up']),
  down: () => ks.sendCombination(['shift', 'down']),
  pauseOrPlay: () => ks.sendKey('space')
};

Object.keys(actions).forEach(action => {
  app.get(`/${action}`, async (req, res) => {
    try {
      await actions[action]();
      res.json({ success: true, message: `${action} action completed` });
    } catch (error) {
      res.status(500).json({ success: false, message: `Error performing ${action} action`, error });
    }
  });
});

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

代码解释

引入模块

const path = require("path");
const ks = require('node-key-sender');
const express = require('express');

node-key-sender: 这个模块用于发送模拟键盘按键事件。

express: 用于创建Web服务器的Node.js框架。

创建Express应用和设置端口

const app = express();
const port = 3000;

定义动作（Actions）对象

const actions = {
  next: () => ks.sendKey('down'),
  previous: () => ks.sendKey('up'),
  up: () => ks.sendCombination(['shift', 'up']),
  down: () => ks.sendCombination(['shift', 'down']),
  pauseOrPlay: () => ks.sendKey('space')
};

这里定义了五个动作，每个动作对应一个键盘事件。

创建路由

Object.keys(actions).forEach(action => {
  app.get(`/${action}`, async (req, res) => {
    try {
      await actions[action]();
      res.json({ success: true, message: `${action} action completed` });
    } catch (error) {
      res.status(500).json({ success: false, message: `Error performing ${action} action`, error });
    }
  });
});

使用 Object.keys(actions) 获取所有动作的名称，并为每个动作创建一个对应的路由。

处理请求时，调用相应的动作，并返回JSON格式的响应。

返回静态网页

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

这个路由将根路径 (/) 的请求返回 index.html 文件。

启动服务器

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

服务器监听指定端口（这里是3000），并在启动时输出提示信息。

添加上package.json文件

package.json文件用来描述dependencies信息

{
  "name": "bilibili-remote-control",
  "version": "1.0.0",
  "description": "Bilibili遥控器",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "node-key-sender": "^1.0.11"
  }
}