ws-scrcpy 使用教程

📝 简介

ws-scrcpy 是一个基于 scrcpy 的 Web 端手机投屏工具，能够通过 Web 浏览器对 Android 设备进行投屏和远程控制。您只需通过 adb 连接设备，启动 ws-scrcpy 服务器，便可以在浏览器中进行设备管理和操作。

🔹 无需安装 scrcpy，所有投屏和控制功能都可以通过 ws-scrcpy 提供的 Web 端界面进行操作。

🎯 功能亮点：

  • 无需客户端：直接通过浏览器进行设备投屏与控制。
  • WebSocket 支持：通过 WebSocket 协议与设备建立连接，低延迟和高流畅度。
  • 跨平台支持：支持 Windows、macOS 和 Linux。
  • 多设备管理：可同时管理多台 Android 设备。

🛠️ 安装与运行

1️⃣ 环境要求

  • Node.js：至少 v14.x 版本
  • adb（Android Debug Bridge）：用于连接 Android 设备
  • 支持的浏览器：Chrome、Firefox 等支持 WebCodecs 的现代浏览器

2️⃣ 安装 ws-scrcpy

  1. 克隆 ws-scrcpy 仓库并进入目录：
   git clone https://github.com/NetrisTV/ws-scrcpy.git
   cd ws-scrcpy
  1. 安装依赖：
   npm install
  1. 启动服务器：
   npm start

启动后，您将看到类似如下的输出：

Listening on:
    http://localhost:8000/
    http://192.168.31.x:8000/

3️⃣ 连接 Android 设备

确保 Android 设备已经开启了 USB 调试，并使用 adb 将设备连接至计算机。如果您的设备已经通过 Wi-Fi 连接，可以跳过 USB 连接步骤。

  1. USB 连接：

执行以下命令确认设备已连接：

   adb devices
  1. Wi-Fi 连接：

确保 Android 设备和计算机在同一局域网，使用以下命令连接设备：

   adb tcpip 5555
   adb connect 192.168.31.xxx:5555

⚙️ 使用方法

1️⃣ 设备管理界面

一旦服务器启动并且设备连接成功，您可以在浏览器中访问设备管理界面。例如，输入：

http://localhost:8000

此页面会显示当前连接的 Android 设备，您可以通过该界面进行远程控制和投屏操作。

如图所示，设备管理界面展示了当前连接的设备信息，包括设备名称、IP 地址、连接端口和其他设置。

例如：

  • Xiaomi Redmi Note 8：设备在 192.168.31.109:5555 上，状态为运行中，支持 proxy over adb。
  • Xiaomi Redmi 8A：设备在 192.168.31.192:5555 上，状态为运行中，同样支持 proxy over adb。

您还可以通过点击设备来配置流媒体（如选择编解码器）或进行其他操作。

2️⃣ 配置流媒体

每个设备旁边都有 Configure stream 选项，您可以配置设备的流媒体设置，例如：

  • H264 编解码器：用于视频流的压缩与解压。
  • Tiny H264：压缩比更高，适合网络带宽受限的环境。
  • WebCodecs：提供高效的编解码功能，以优化视频流的性能。

配置完成后，点击 Configure stream 即可开始实时投屏。

3️⃣ 远程控制

您可以通过点击设备屏幕进行远程操作，如滑动、点击等操作。所有操作都将实时反映在设备上。

设置分辨率

一、前提条件

  1. 浏览器支持

    • 必须支持 Media Source Extensions（MSE）及 H.264 解码。

  2. ws-scrcpy 默认使用 H264 Converter

    • 当浏览器不支持 WebCodecs、Broadway、TinyH264 等解码器时，自动回退到 H264 Converter（MSE Player）。

  3. 已正常启动 ws-scrcpy

    • 通过 npm start 并访问 http://<服务器IP>:8000，点击对应设备右边的H264 Converter，能够看到手机屏幕投屏画面。

二、操作步骤

1. 打开「Change video settings」面板

  1. 在投屏界面右上角，点击 ⋮（三点菜单）。

  2. 选择 Change video settings（更改视频设置）。

    该功能仅影响前端解码参数，不需更改后端 scrcpy 推流。([GitHub][2])

2. 设置最大宽度与高度

  • Max width：输入 1300
  • Max height：输入 1300

这两个值分别是 MSE Player 限制的画面最大宽度和最大高度，浏览器会自动按比例拉伸或裁剪，保证不超过该尺寸。

3. 应用并生效

  1. 输入完成后，点击面板下方的 Change video settings 按钮。

  2. 视频区域会短暂闪烁，随后以新的分辨率约束重新渲染投屏画面。

    若未生效，请确认已点击面板中的确认按钮，并且页面未被自动刷新([GitHub][2])。

4. 验证效果

  • 直观观察：界面UI元素及文字放大，清晰度提升。
  • 网络抓包（可选）：在浏览器开发者工具的 Network 面板，过滤 mp4 或 video，查看分段视频的实际分辨率。
aDevice Tracker [mobile]

指定启动端口

修改 .\src\server\Config.ts 下的DEFAULT_PORT

 

🌐 官网与更多信息

如需获取更多信息，下载最新版本，或了解其他使用案例，请访问 ws-scrcpy 的官方 GitHub 仓库：ws-scrcpy GitHub。

💡 注意事项

  • 低延迟控制：如果控制过程中出现卡顿或延迟，请检查网络带宽和设备性能，尝试降低投屏质量或分辨率。
  • adb 连接问题：如果出现设备连接问题，请尝试重启 adb 服务：
  adb kill-server
  adb start-server
  • 网络连接：确保 Android 设备和计算机处于同一局域网，连接稳定。

🚀 总结

通过 ws-scrcpy，您可以轻松地在浏览器中实现 Android 设备的投屏与远程控制，适用于开发调试、演示等多种场景。🎉 无论您是开发者还是技术爱好者，这款工具都会为您提供便利的操作体验。

🌟 赶快试试吧！如果遇到问题，欢迎留言讨论。😊