给哔哩哔哩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"}
}

运行手机遥控器

整个代码就完成了, 现在可以启动遥控器了:

装上dependencies

npm install

运行遥控器

npm run start

可以看到服务器已经启动起来了

手机浏览器里打开192.168.x.x开头的网页, 然后运行bilibili桌面版, 即可在手机里面控制bilibili的播放了, 再也不用坐在电脑屏幕跟前了.

总结

以上便是给整个bilibili手机版遥控器介绍, 相关代码已经发布到CSDN, 可以直接访问: bilibili-remote-controller:Bilibili电脑版手机遥控器 - GitCode

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaEE初阶---网络原理之TCP篇(二)

文章目录 1.断开连接--四次挥手1.1 TCP状态1.2四次挥手的过程1.3time_wait等待1.4三次四次的总结 2.前段时间总结3.滑动窗口---传输效率机制3.1原理分析3.2丢包的处理3.3快速重传 4.流量控制---接收方安全机制4.1流量控制思路4.2剩余空间大小4.3探测包的机制 5.拥塞控制---考虑…

【C语言刷力扣】3216.交换后字典序最小的字符串

题目&#xff1a; 解题思路&#xff1a; 字典序最小的字符串&#xff1a;是指按照字母表顺序排列最前的字符串。即字符串在更靠前的位置出现比原字符串对应字符在字母表更早出现的字符。 枚举数组元素&#xff0c;尽早将较小的同奇偶的相邻字符交换。 char* getSmallestString…

定时器(多线程)

标准库中的定时器 • 标准库中提供了⼀个 Timer 类. Timer 类的 核⼼⽅法为 schedule . • schedule 包含两个参数. 第⼀个参数指定即将要执⾏的任务代码, 第⼆个参数指定多⻓时间之后 执⾏ (单位为毫秒). Timer timer new Timer (); timer.schedule( new TimerTas…

Linux(centOS)的安全命令

先全部列出来&#xff1a; 命令及其作用&#xff1a; - setenforce 0&#xff1a;将 SELinux 临时切换为宽松模式&#xff08;permissive&#xff09; - setenforce 1&#xff1a;将 SELinux 临时切换为强制模式&#xff08;enforcing&#xff09; - selinux的配置文件在/e…

Java:Map和Set练习

目录 查找字母出现的次数 只出现一次的数字 坏键盘打字 查找字母出现的次数 这道题的思路在后面的题目过程中能用到&#xff0c;所以先把这题给写出来 题目要求&#xff1a;给出一个字符串数组&#xff0c;要求输出结果为其中每个字符串及其出现次数。 思路&#xff1a;我…

【宠粉赠书】大模型项目实战:多领域智能应用开发

在当今的人工智能与自然语言处理领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;凭借其强大的生成与理解能力&#xff0c;正在广泛应用于多个实际场景中。《大模型项目实战&#xff1a;多领域智能应用开发》为大家提供了全面的应用技巧和案例&#xff0c;帮助开发者深…

【商汤科技-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞…

Chromium HTML5 新的 Input 类型week对应c++

一、Input 类型: week week 类型允许你选择周和年。 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>test</title> </head><body><form action"demo-form.php">选择周: <inp…

Nginx防盗链配置

1. 什么是盗链? 盗链是指服务提供商自己不提供服务的内容&#xff0c;通过技术手段绕过其它有利益的最终用户界面&#xff08;如广告&#xff09;&#xff0c;直接在自己的网站上向最终用户提供其它服务提供商的服务内容&#xff0c;骗取最终用户的浏览和点击率。受益者不提供…

Oracle+11g+笔记(8)-备份与恢复机制

Oracle11g笔记(8)-备份与恢复机制 8、备份与恢复机制 8.1 备份与恢复的方法 数据库的备份是对数据库信息的一种操作系统备份。这些信息可能是数据库的物理结构文件&#xff0c;也可能是某一部分数 据。在数据库正常运行时&#xff0c;就应该考虑到数据库可能出现故障&#…

基于Multisim的篮球比赛电子记分牌设计与仿真

一、设计任务与要求 设计一个符合篮球比赛规则的记分系统。 &#xff08;1&#xff09;有得1分、2分和3分的情况&#xff0c;电路要具有加、减分及显示的功能。 &#xff08;2&#xff09;有倒计时时钟显示&#xff0c;在“暂停时间到”和“比赛时间到”时&#xff0c;发出声光…

CTF-PWN: 什么是_IO_FILE?

重要概念:fopen()返回的是一个结构体的指针 _IO_FILE 结构体在什么时候被创建&#xff1f; _IO_FILE 结构体的实例是在程序使用标准 I/O 函数&#xff08;如 fopen、fclose、fread、fwrite 等&#xff09;时创建和管理的。这个结构体实际上是 GNU C Library (glibc) 用于处理…

Apache paimon-CDC

CDC集成 paimon支持五种方式通过模式转化数据提取到paimon表中。添加的列会实时同步到Paimon表中 MySQL同步表:将MySQL中的一张或多张表同步到一张Paimon表中。MySQL同步数据库:将MySQL的整个数据库同步到一个Paimon数据库中。API同步表:将您的自定义DataStream输入同步到一…

电子信息-毕业设计选题推荐

人工智能与电子信息工程的融合 基于深度学习的电子信息系统故障诊断 人工智能算法在电子信息工程中的优化应用 电子信息工程中的智能图像识别技术 无线传感器网络 无线传感器网络在环境监测中的电子信息采集 多传感器融合的无线传感器网络应用 无线传感器网络中的数据压缩算法与…

linux 删除当前目录下修改时间超过1天的文件

在Linux中&#xff0c;你可以使用find命令结合-mtime选项来删除当前目录下修改时间超过1天的文件。以下是具体的命令示例&#xff1a; find . -type f -mtime 1 -delete解释一下上述命令&#xff1a; find&#xff1a;这是用于在文件系统中查找文件和目录的命令。.&#xff1…

【面试全纪实 | Linux 01】请回答,你真的了解Linux吗?

1. 什么是Linux Linux是一套免费使用和自由传播的类Unix操作系统&#xff0c;是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位 硬件。Linux继承了Unix以网络为核心的设计思想&#…

代码随想录训练营Day11 | 226.翻转二叉树 - 101. 对称二叉树 - 104.二叉树的最大深度 - 111.二叉树的最小深度

226.翻转二叉树 题目链接&#xff1a;226.翻转二叉树思路&#xff1a;遍历二叉树&#xff0c;遍历的时候交换左右节点即可代码&#xff1a; TreeNode* invertTree(TreeNode* root) {reverse(root);return root;}// 迭代法&#xff0c;层序遍历void f2(TreeNode* root) {queue…

易友BOM管理软件

易友BOM管理软件介绍 易友BOM管理软件是一款功能齐全、操作简便、安全可靠的BOM管理系统。它为企业提供了多方面的BOM管理解决方案&#xff0c;帮助企业提高生产效率、降低成本、增强灵活性并提升竞争力。制造企业&#xff0c;都可以通过易友BOM管理软件来实现BOM管理的优化和…

安全见闻-二进制与网络安全的关系

一、二进制的基本概念 二、二进制在网络安全中的重要性 三、二进制安全的概念与范畴 1. 二进制安全的定义 2. 范畴 四、二进制安全的渗透测试方法 1. 静态分析 2. 动态分析 3. 模糊测试 4. 漏洞利用 5. 代码审计 五、结论 学习视频泷羽sec&#xff1a;安全见闻&…

git 怎么保留某个文件夹忽略其下面的所有文件?

在 Git 中&#xff0c;如果你想要保留某个文件夹&#xff08;比如 folder/&#xff09;但忽略其下面的所有文件&#xff0c;可以使用 .gitignore 文件来实现。需要注意的是&#xff0c;Git 不会自动创建空目录。因此&#xff0c;为了让 Git 记录这个空目录&#xff0c;你需要在…