前言
在移动设备高度普及的今天,如何将 Android 手机的画面高效地投射到电脑,甚至通过浏览器远程控制设备,已经成为开发者、运维人员以及内容创作者的刚需。无论是进行应用调试、远程协助,还是录制教程视频,一款低延迟、高性能的投屏工具都能极大提升效率。
传统的投屏方案往往依赖客户端软件,不仅安装复杂,而且在跨平台使用时体验并不统一。而基于 Web 的解决方案则打破了这一限制——只需一个浏览器,就能实现设备控制与屏幕镜像,真正做到“开箱即用”。
本篇文章将为大家介绍一款开源项目 panda-web-scrcpy。它在继承 scrcpy 高性能、低延迟优势的基础上,通过 Web 技术实现了更轻量、更便捷的远程控制体验。结合 Docker 部署,你甚至可以在飞牛 NAS 或 VPS 上快速搭建一个属于自己的 Android 投屏服务,实现随时随地远程操控设备。
接下来,我将手把手带你完成从环境准备到实际部署的全过程,让你轻松拥有一个属于自己的“安卓远控中心”。🚀

项目简介
panda-web-scrcpy 是一个基于 Web 的远程控制工具,允许用户通过浏览器控制和查看 Android 设备的屏幕。
- 高性能:使用高效的视频编码和解码技术,提供流畅的屏幕镜像体验。
- 低延迟:优化的数据传输协议,确保低延迟的控制响应。
- 多功能:支持屏幕录制、截图、全屏模式等多种功能。
- 跨平台:支持 Windows、macOS 和 Linux 操作系统。
部分截图
基础信息
包含手机的配置等信息

应用管理
可以直接在线安装应用,也可以导出apk安装包

终端管理
直接操作安卓手机的终端命令界面

日志管理
在线日志查看

屏幕共享
可以远程共享手机屏幕给他人

示例

demo
官方demo
如果你觉得麻烦的可以直接使用官方demo
部署方法
使用Docker安装
本教程使用docker的方式安装部署,简单便捷

准备条件
1)一台服务器
我们使用莱卡云VPS和飞牛NAS来演示
需要vps的可以看以下信息配置,可以参考以下资源占用情况
莱卡云官网
本期docker容器占用资源情况如下仅供参考不到10M

2)本教程使用到的项目
本教程使用的官方github地址
https://github.com/PandaTestGrid/panda-web-scrcpy

该项目使用的docker镜像地址
https://hub.docker.com/r/ywsj/panda-web-scrcpy
目前只有x86架构的版本

3)域名(必选)
这个项目如果不使用https访问会出现这个问题
浏览器不支持 WebUSB

因此需要配置ssl证书才能正常使用

① VPS部署
一、Docker环境部署
在vps安装docker和docker-compose
Docker官方安装文档(英文)
https://duan.yyzq.eu.org/docker-001
Docker-Compose官方安装文档(英文)
https://duan.yyzq.eu.org/docker-002
Centos安装Docker和Docker-compose(中文)
https://duan.yyzq.eu.org//03
Ubuntu安装Docker和Docker-compose(中文)
https://duan.yyzq.eu.org//04
推荐直接用一键脚本
docker安装脚本
bash <(curl -sSL https://cdn.jsdelivr.net/gh/SuperManito/LinuxMirrors@main/DockerInstallation.sh)
docker-compose安装脚本
curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose && chmod +x /usr/local/bin/docker-compose
二、部署命令
登录服务器使用root账户执行以下步骤
2.1docker run命令
docker run -d \
--name panda-web-scrcpy \
-p 4300:3000 \
-e TZ=Asia/Shanghai \
--restart always \
ywsj/panda-web-scrcpy:latest
2.2docker-compose命令
创建一个目录,并进入此目录
mkdir panda-web-scrcpy ;cd panda-web-scrcpy
然后再新建docker-compose.yml
vim docker-compose.yml
services:
panda-web-scrcpy:
image: ywsj/panda-web-scrcpy:latest # 使用的镜像
container_name: panda-web-scrcpy # 容器名称
ports:
- 4300:3000 # 将宿主机的 4300 端口映射到容器的 3000 端口
environment:
- TZ=Asia/Shanghai # 设置容器时区为上海
restart: always # 容器异常自动重启
三、执行容器运行命令
docker-compose up -d #运行容器
docker-compose ps #查看是否启动成功
正常启动如下所示
docker-compose ps
NAME IMAGE COMMAND SERVICE CREATED STATUS PORTS
panda-web-scrcpy ywsj/panda-web-scrcpy:latest "/docker-entrypoint.…" panda-web-scrcpy 7 minutes ago Up 7 minutes 80/tcp, 0.0.0.0:4300->3000/tcp, [::]:4300->3000/tcp
四、web界面
打开web页面使用
成功以后需要打开自己相应的端口4300)防火墙就可以web端访问了
主界面
http://ip:4300

此时还无法正常使用需要绑定域名和证书,可以参考我之前的教程
②飞牛云NAS部署
我们直接复制以上VPS的compose配置即可

启动成功

然后浏览器输入NAS的ip:3000端口就可以打开界面了
绑定域名
这个项目一定要绑定下域名才能正常使用
绑定域名的教程参考以下内容
绑定域名视频教程
B站
YouTube
绑定域名可以参考
NginxProxyManager
https://duan.yyzq.eu.org//npm-ch
注意事项
安卓手机需要打开开发者模式-USB调试
不同手机之间打同小异我已红米note11为例演示
首先一直点击miui版本直到处于开发者模式

然后将手机使用USB连接到电脑
点击添加设备

依次打开设置-开发者选项

打开所有USB相关的开关

USB用途选择-MTP

最后手机同意授权即可

其他功能自行探索
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
有任何问题可以直接留言或者问我
欢迎关注我们的微信公众号!


评论区