Ws scrcpy:scrcpy 网页端应用,实现云手机效果

简单分享一个 scrcpy 的 web 端,是目前个人体验最好的远程控制方案。配合回家代理或内网穿透,基本可以实现市面上类似云手机的效果,而且不需要安装额外客户端,也不挑平台,有浏览器就行。

名称: ws scrcpy
项目地址: GitHub - NetrisTV/ws-scrcpy: Web client prototype for scrcpy.

首先复读一下官方的需求说明

浏览器需要支持:

  • WebSockets
  • Media Source Extensions and h264 decoding;
  • WebWorkers
  • WebAssembly

注1:现代主流浏览器基本都没问题,如果出现问题可以检查一下是否是插件或者设置禁用了相关技术。比如我遇到过因为使用 arkenfox.js 默认设置把 WebAssembly 禁用了。

服务端:

  • Node.js v10+
  • node-gyp
  • adb

注2:编译时的内存需求应该比较大,比如我在树莓派3B+(armbian)上因为 hit heap size 编译失败。不过可以在其他机器上编译拷贝dist目录,所以我在4B上编译再拷贝dist到3B+直接运行。当然,运行需要安装 Nodejs 项目依赖。

注3: 不要使用 Nodejs v17+,有库不兼容

安卓设备端:

注4: 没什么说的,wireless debug 也可以,反正是通过 adb 连接设备。第三点键鼠控制的问题我没遇到过。

项目编译

Nodejs 项目标准步骤:克隆项目 → npm install → npm run dist

如果编译失败上面可以看看上面我提到的备注事项

运行项目

cd dist && node index.js

我使用了 PM2 来启动后台:

pm2 start ~/codes/ws-scrcpy/dist --name ws-scrcpy

使用举例

  • 连接设备
adb connect mipad.lan:5555
adb connect pixel.lan:5555
  • 访问网页 http://<ws-scrcpy-server>:8000, 就能看到简陋但一目了然的界面

Broadway.js / H264 Converter / Tiny H264:三种播放器库,具体技术适用说明参考项目 README,这里不复读了,找个能用不卡的。

Config stream: 可以调整三种播放器的默认设置,比如 FPS, bitrate, 高宽等等,推荐打开 Fit to screen

进入远程控制效果如下,依然是一目了然的界面。右上角三个点可以展开设置菜单,可以复制剪贴板、stream设置、断开连接等。

熄屏控制

ws-scrcpy 项目本身并不支持息屏控制,这里曲线救国一下,需要息屏时在服务端运行类似以下命令,目的是额外开一个息屏连接并输出到任意一个不存在的设备:

scrcpy -Sw -b10K -m400 –max-fps 1 –v4l2-sink=/dev/video11 -N –tcpip=mipad.lan

具体参数解释请参考 scrcpy README。

但注意,这个连接并不会屏蔽休眠和电源键。如果因为按下电源或者静置触发锁屏,需要断开再重新运行以上命令。我的选择是直接在安卓上禁止自动锁屏。

如1L所说,控制界面设置选单中的 SET SCREEN POWER MODE 即为熄屏开关:

  • 未勾选状态 OFF:点击按钮关闭设备屏幕显示
  • 勾选状态 ON:点击按钮打开设备屏幕显示

而且息屏后即使你断开连接,只要设备未自动熄屏,下次连接时依然保持熄屏状态而不会打开屏幕显示。

iOS 控制

另外值得一提,项目支持 iOS 设备控制,但需要自定义 build。我没有折腾,感兴趣的朋友可以自行研究。

iOS

Experimental Feature: is not built by default (see custom build)

1 Like

可以控制熄屏的,

顺便问问有人会都明白源代码吗? 一起交流。。

1 Like

真棒!正文已编辑。

(寻求能一起交流源代码的小伙伴,TS 看着吃力)
说一下我这里情况,找到这个方案主要是因为 原版和QT版本在本地GPU加速过于吃紧(主要是开多了之后,浏览器播放视频都卡,因此一直想找一个能转入网页方案,毕竟现在浏览器自带GPU加速已经很成熟了,而且还有EDGE微软自家优化产物)

目前设备是部署在 NanoPC-T4的开发板子上(类似树莓派4),
程序并非后台服务类型, 所以推荐使用 screen 工具,建立一个虚拟桌面,这样即便SSH断开链接,也会继续执行。

然后关于播放器和编码, 工具提供3个播放器,
Broadway.js
H264 Converter
Tiny H264

都是可以使用,只是不知道为什么在Mi6上只有H264 Converter 才能看到图像。
另外,感觉配置页面中码率默认是字节, 所以如果图像不清晰,可以手动增加一下码率(可以打开 Show quality stats ,显示统计信息)

PS。 我尝试过v4l2loopback 但安装驱动时候报错了,涉及linux内核版本方面,没测试成功。。

请问大佬,我用群晖DSM docker安装好了ws-scrcpy,但是不知道怎么连上android手机

目前这个工具还不能在网页端控制adb连接,
你需要手动进入docker 内,使用 adb 命令连接手机

这个有做好的的 docker 镜像么

大佬来了! 膜拜!

应该没有,目前项目只有源代码发布,需要自行编译。

自己做的docker镜像

求分享个 Dockerfile

DSM docker部署好ws-scrcpy后,无法进入ws-scrcpy容器内部控制adb连接,请问大佬有什么方法吗?

这个坑真是…

Nodejs v17+ 和 内存不足全中啊

考虑一下做成安卓应用呗,会方便很多

这个看你建立的基础镜像, 有些镜像没有bash
你可以试试 /bin/sh

nodejs 确实容易踩坑, 我在MS-learn上学习, 那些示例都是NODE14 + 旧版SDK, 必须手动切换环境。。

PS。不过这个项目 编译到很正常, 就是读代码有点吃力。

青蛙大佬打包成docker容器了
我自己之前还是在宝塔面板的docker容器里安装nodejs 再装这个用的,发现特别坑

安装ws scrcpy 的系统里必须有nodejs,并且安装有adb调试工具
要先用adb调试工具连接android设备,然后再打开ws scrcpy 才可以使用
android10或者更低版本默认不开启无线调试,必须USB连接android设备才能调试
USB调试后 通过adb命令才能开启android设备的无线调试

android11 开始原生支持无线调试,不过要用配对码来配对(部分国产UI居然还砍了这功能,比如荣耀全系列。 华为的鸿蒙也没这个功能)

对的, 目前来说,不是不能做成docker ,而是 需要很多adb 的命令行操作,

折腾了一天,终于用docker部署成功,只是仅H264 Converter这个有图像,其它都没有图像



确实 , 我的Mi6上之后H264 可以, 其他两个黑屏, 但我的Android开发板 却没有问题,怀疑可能是编码器的问题

佬,同3B+,求分享dist文件