基於 Scrcpy 的遠端除錯方案

wenxiaomao發表於2019-12-13

基於 Scrcpy 的遠端除錯方案

前言

感謝 STF 的開源，讓 Android 裝置遠端控制變得簡單，STF 透過 minicap 和 minitouch 實現裝置的顯示和控制。
STF 在實際使用中會發現一些棘手的問題
1.電視不支援 minitouch
2.新手機比如 mi8 mi9 不支援 minicap
3.Android 釋出新版本需要適配 minicap

分享一個新的方法，來彌補這些不足
演示效果如下，由於圖片較大（14MB），手機黨請謹慎點選如下連結，建議完全載入完在播放，否則會卡，電腦的錄屏軟體很不給力，渣渣畫質。。。
https://github.com/wenxiaomao1023/scrcpy/blob/master/assets/out.gif

Scrcpy

app 目錄 執行在 PC 端，對於 web 遠端控制，這部分是不需要的
server 目錄 執行在手機端，提供螢幕資料，接收並響應控制事件

Scrcpy 對比 minicap

1.獲取 frame 資料方式是一致的（sdk19 以上）
2.Scrcpy 將 frame 編碼 h264
3.minicap 將 frame 編碼 jpeg

Scrcpy 處理方式看起來會更好，但是有一個問題，他的設計是將螢幕資料直接發給 PC，然後在 PC 上解碼顯示，這種方式在網頁上卻很不好展示。

調研與嘗試

1.Broadway 在前端解碼 h264 並顯示
2.wfs.js 在前端將 h264 轉成 mp4 送給 h5 MSE 實現播放，這種類似直播，B 站 flv.js 那種
以上兩種嘗試都獲得了影像，但個人感覺，以上兩個方案感覺都有坑，還需要大量最佳化才能脫坑

解決方法

當前摸索出的解決方法，Scrcpy 將 frame 編碼 jpeg 發給前端然後透過畫布展示，瀏覽器相容好，可行性高，minicap 也是這麼做的，修改方式見如下
https://github.com/wenxiaomao1023/scrcpy/commit/46d1c009d8ce559dc1ac1cdfceb234f1c7728498

當前已實現的功能

1.使用 ImageReader 獲取 frame 資料，透過 libjpeg-turbo 編碼 jpeg
2.控制幀率，壓縮率，縮放比例，可以減少頻寬佔用，提高流暢性
3.考慮到當前大多是 minicap 的方案，所以 scrcpy 返回的螢幕資料格式相容了 minicap 的資料格式（banner+jpegsize+jpegdata），移植改動會很小
4.最低支援到 Android4.4（adb forward 命令有變化，見下文，預設埠 6612）
5.返回旋轉狀態（為了替換 STFService.apk）
6.新增獲取 DumpHierarchy 資訊（啟動命令加-D 引數），獲取介面佈局資訊為錄製 Case 功能準備

優點

1.德芙般絲滑，手機播放影片一點不卡，web 端展示也很流暢（30 - 50 FPS）
2.支援電視 touch
3.支援 mi8，mi9 等影像展示，不必在適配 minicap.so 啦，耶！

缺點

1.~~最低支援 android5.0，由於還依賴 android.system.Os，若想相容低版本裝置需要配合 minicap 使用~~，當前最低可支援到 Android4.4
2.流量問題，如果你的網站部署在內網，建議參考此方案，如果部署在公網，建議採用原生的 Scrcpy 方式

編譯 libjpeg-turbo

我已經編好了 ARMv7 (32-bit) 和 ARMv8 (64-bit)
https://github.com/wenxiaomao1023/scrcpy/tree/master/server/libs/libturbojpeg/prebuilt
如果你需要其他平臺，可參考此文件 Building libjpeg-turbo for Android 部分
https://github.com/libjpeg-turbo/libjpeg-turbo/blob/master/BUILDING.md
如果不需要，可跳過此步驟

編譯 Scrcpy 程式碼

ninja 編譯方式

android sdk 裡有 ninja，如 Android/Sdk/cmake/3.6.4111459/bin/ninja，加到環境變數裡即可，meson 需要安裝
如果不想安裝這些，可以往下看，用 gradle 編譯

git clone https://github.com/wenxiaomao1023/scrcpy.git
cd scrcpy
meson x --buildtype release --strip -Db_lto=true
ninja -Cx

編譯後會在 scrcpy 目錄下生成
x/server/scrcpy-server.jar
server/jniLibs/armeabi-v7a/libcompress.so
server/jniLibs/arm64-v8a/libcompress.so

gradle 編譯方式

git clone https://github.com/wenxiaomao1023/scrcpy.git
cd scrcpy/server
../gradlew assembleDebug

編譯後會在 scrcpy 目錄下生成
server/build/outputs/apk/debug/server-debug.apk
server/jniLibs/armeabi-v7a/libcompress.so
server/jniLibs/arm64-v8a/libcompress.so

server/build/outputs/apk/debug/server-debug.apk 和 x/server/scrcpy-server.jar 是一樣的，下文中都按 scrcpy-server.jar 命名方式進行說明

啟動 scrcpy-server.jar

# 先看下裝置的abi，
adb shell getprop ro.product.cpu.abi

新版本新增-L 引數，LD_LIBRARY_PATH 的值等於-L 引數的返回值，並追加:/data/local/tmp

# armeabi-v7a
adb push scrcpy/server/jniLibs/armeabi-v7a/libcompress.so /data/local/tmp/
adb push scrcpy/server/libs/libturbojpeg/prebuilt/armeabi-v7a/libturbojpeg.so /data/local/tmp/
adb push scrcpy/x/server/scrcpy-server.jar /data/local/tmp/
adb shell chmod 777 /data/local/tmp/scrcpy-server.jar
adb shell CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server -L
# LD_LIBRARY_PATH的值為上步-L的返回值加:/data/local/tmp（注意有個英文冒號）
adb shell LD_LIBRARY_PATH=???:/data/local/tmp CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server

# arm64-v8a
adb push server/jniLibs/arm64-v8a/libcompress.so /data/local/tmp/
adb push server/libs/libturbojpeg/prebuilt/arm64-v8a/libturbojpeg.so /data/local/tmp/
adb push scrcpy/x/server/scrcpy-server.jar /data/local/tmp/
adb shell chmod 777 /data/local/tmp/scrcpy-server.jar
adb shell CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server -L
# LD_LIBRARY_PATH的值為上步-L的返回值加:/data/local/tmp（注意有個英文冒號）
adb shell LD_LIBRARY_PATH=???:/data/local/tmp CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server

# Android4.4裝置
# 前幾步同上（檢視abi push libcompress.so libturbojpeg.so，push scrcpy-server.jar，chmod scrcpy-server.jar）
# 不同的地方在於需要指定ANDROID_DATA引數，否則啟動會報錯Dex cache directory isn't writable: /data/dalvik-cache (Permission denied) uid=2000 gid=2000
# 見解決方法https://stackoverflow.com/questions/21757935/running-android-java-based-command-line-utility-from-adb-shell
adb shell mkdir -p /data/local/tmp/dalvik-cache
adb shell ANDROID_DATA=/data/local/tmp CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server -L
# LD_LIBRARY_PATH的值為上步-L的返回值加:/data/local/tmp（注意有個英文冒號）
adb shell ANDROID_DATA=/data/local/tmp LD_LIBRARY_PATH=???:/data/local/tmp CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server

app_process / com.genymobile.scrcpy.Server 這個命令可以設定如下引數，建議使用命令如下，壓縮質量 60，最高 24 幀，480P
app_process / com.genymobile.scrcpy.Server -Q 60 -r 24 -P 480

Usage: [-h]

jpeg:
  -r <value>:    Frame rate (frames/sec).
  -P <value>:    Display projection (1080, 720, 480, 360...).
  -Q <value>:    JPEG quality (0-100).

  -c:            Control only.
  -L:            Library path.
  -D:            Dump window hierarchy.
  -h:            Show help.

啟動 app.js

scrcpy-server.jar 相容了 minicap 資料格式，可以直接用 minicap 的 demo app.js 看效果
https://github.com/openstf/minicap/tree/master/example
https://github.com/openstf/minicap/blob/master/example/app.js

需要把 app.js 改一下，多一個連線，修改如下

// 原始程式碼預設的影像socket
var stream = net.connect({
    port: 1717
})

// 修改1 加一個控制socket，在預設的net.connect後再net.connect一次（必須）
var controlStream = net.connect({
    port: 1717
})

// 修改2 新版本除了返回影像，還會返回旋轉和層級（如果-D），需要容錯處理，遮蔽掉exit()，並加else
if (frameBody[0] !== 0xFF || frameBody[1] !== 0xD8) {
    console.error('Frame body does not start with JPG header', frameBody)
    // process.exit(1) //遮蔽exit()
}
else { // 新增else
    ws.send(frameBody, {
        binary: true
    })
}

git clone https://github.com/openstf/minicap.git
cd minicap/example
npm install
# 注意這裡要改為localabstract:scrcpy（舊版本）
# 注意這裡要改為tcp:6612（新版本）
adb forward tcp:1717 tcp:6612
node app.js

訪問 http://127.0.0.1:9002
如果有時重新整理會沒效果，只顯示一個紅框，先確認是否執行了 adb forward tcp:1717 tcp:6612，如果是機率性重新整理不出影像這是正常的，客戶端連線失敗需要做重連操作，例子裡並沒有，所以簡單解決辦法是重啟下 scrcpy-server.jar，然後重新整理網頁

Scrcpy touch

Scrcpy touch 的實現可以參考如下實現，當前實現常用的三種事件訊息
// 鍵值 HOME，BACK，MENU 等
CONTROL_MSG_TYPE_INJECT_KEYCODE
// 點選和滑動
CONTROL_MSG_TYPE_INJECT_TOUCH_EVENT
// 滑鼠滾輪滾動
CONTROL_MSG_TYPE_INJECT_SCROLL_EVENT

後端提供 json 格式介面

package main

import (
    "errors"
    "net"
    "github.com/qiniu/log"
    "bytes"
    "encoding/binary"
)

type MessageType int8
const (
    CONTROL_MSG_TYPE_INJECT_KEYCODE MessageType = iota
    CONTROL_MSG_TYPE_INJECT_TEXT                   
    CONTROL_MSG_TYPE_INJECT_TOUCH_EVENT            
    CONTROL_MSG_TYPE_INJECT_SCROLL_EVENT           
    CONTROL_MSG_TYPE_BACK_OR_SCREEN_ON             
    CONTROL_MSG_TYPE_EXPAND_NOTIFICATION_PANEL     
    CONTROL_MSG_TYPE_COLLAPSE_NOTIFICATION_PANEL   
    CONTROL_MSG_TYPE_GET_CLIPBOARD                 
    CONTROL_MSG_TYPE_SET_CLIPBOARD                 
    CONTROL_MSG_TYPE_SET_SCREEN_POWER_MODE         
)

type PositionType struct {
    X        int32    `json:"x"`
    Y        int32    `json:"y"`
    Width    int16    `json:"width"`
    Height   int16    `json:"height"`
}

type Message struct {
    Msg_type                        MessageType     `json:"msg_type"`
// CONTROL_MSG_TYPE_INJECT_KEYCODE
    Msg_inject_keycode_action       int8            `json:"msg_inject_keycode_action"`
    Msg_inject_keycode_keycode      int32           `json:"msg_inject_keycode_keycode"`
    Msg_inject_keycode_metastate    int32           `json:"msg_inject_keycode_metastate"`
// CONTROL_MSG_TYPE_INJECT_TOUCH_EVENT
    Msg_inject_touch_action         int8            `json:"msg_inject_touch_action"`
    Msg_inject_touch_pointerid      int64           `json:"msg_inject_touch_pointerid"`
    Msg_inject_touch_position       PositionType    `json:"msg_inject_touch_position"`
    Msg_inject_touch_pressure       uint16          `json:"msg_inject_touch_pressure"`
    Msg_inject_touch_buttons        int32           `json:"msg_inject_touch_buttons"`
// CONTROL_MSG_TYPE_INJECT_SCROLL_EVENT
    Msg_inject_scroll_position      PositionType    `json:"msg_inject_scroll_position"`
    Msg_inject_scroll_horizontal    int32           `json:"msg_inject_scroll_horizontal"`
    Msg_inject_scroll_vertical      int32           `json:"msg_inject_scroll_vertical"`
}

type KeycodeMessage struct {
    Msg_type                        MessageType     `json:"msg_type"`
    Msg_inject_keycode_action       int8            `json:"msg_inject_keycode_action"`
    Msg_inject_keycode_keycode      int32           `json:"msg_inject_keycode_keycode"`
    Msg_inject_keycode_metastate    int32           `json:"msg_inject_keycode_metastate"`
}

type TouchMessage struct {
    Msg_type                        MessageType     `json:"msg_type"`
    Msg_inject_touch_action         int8            `json:"msg_inject_touch_action"`
    Msg_inject_touch_pointerid      int64           `json:"msg_inject_touch_pointerid"`
    Msg_inject_touch_position       PositionType    `json:"msg_inject_touch_position"`
    Msg_inject_touch_pressure       uint16          `json:"msg_inject_touch_pressure"`
    Msg_inject_touch_buttons        int32           `json:"msg_inject_touch_buttons"`
}

type ScrollMessage struct {
    Msg_type                        MessageType     `json:"msg_type"`
    Msg_inject_scroll_position      PositionType    `json:"msg_inject_scroll_position"`
    Msg_inject_scroll_horizontal    int32           `json:"msg_inject_scroll_horizontal"`
    Msg_inject_scroll_vertical      int32           `json:"msg_inject_scroll_vertical"`
}

func drainScrcpyRequests(conn net.Conn, reqC chan Message) error {
    for req := range reqC {
        var err error
        switch req.Msg_type {
        case CONTROL_MSG_TYPE_INJECT_KEYCODE:
            t := KeycodeMessage{
                Msg_type: req.Msg_type, 
                Msg_inject_keycode_action: req.Msg_inject_keycode_action,
                Msg_inject_keycode_keycode: req.Msg_inject_keycode_keycode,
                Msg_inject_keycode_metastate: req.Msg_inject_keycode_metastate,
            }
            buf := &bytes.Buffer{}
            err := binary.Write(buf, binary.BigEndian, t)
            if err != nil {
                log.Debugf("CONTROL_MSG_TYPE_INJECT_KEYCODE error: %s", err)
                log.Debugf("%s",buf.Bytes())
                break
            }
            _, err = conn.Write(buf.Bytes())
        case CONTROL_MSG_TYPE_INJECT_TEXT:
        case CONTROL_MSG_TYPE_INJECT_TOUCH_EVENT:
            var pointerid int64 = -1
            var pressure uint16 = 65535
            var buttons int32 = 1
            req.Msg_inject_touch_pointerid = pointerid
            req.Msg_inject_touch_pressure = pressure
            req.Msg_inject_touch_buttons = buttons
            t := TouchMessage{
                Msg_type: req.Msg_type, 
                Msg_inject_touch_action: req.Msg_inject_touch_action, 
                Msg_inject_touch_pointerid: req.Msg_inject_touch_pointerid, 
                Msg_inject_touch_position: PositionType{
                    X: req.Msg_inject_touch_position.X, 
                    Y: req.Msg_inject_touch_position.Y, 
                    Width: req.Msg_inject_touch_position.Width,
                    Height: req.Msg_inject_touch_position.Height,
                }, 
                Msg_inject_touch_pressure: req.Msg_inject_touch_pressure, 
                Msg_inject_touch_buttons: req.Msg_inject_touch_buttons,
            }
            buf := &bytes.Buffer{}
            err := binary.Write(buf, binary.BigEndian, t)
            if err != nil {
                log.Debugf("CONTROL_MSG_TYPE_INJECT_TOUCH_EVENT error: %s", err)
                log.Debugf("%s",buf.Bytes())
                break
            }
            _, err = conn.Write(buf.Bytes())
        case CONTROL_MSG_TYPE_INJECT_SCROLL_EVENT:
            t := ScrollMessage{
                Msg_type: req.Msg_type, 
                Msg_inject_scroll_position: PositionType{
                    X: req.Msg_inject_scroll_position.X, 
                    Y: req.Msg_inject_scroll_position.Y, 
                    Width: req.Msg_inject_scroll_position.Width,
                    Height: req.Msg_inject_scroll_position.Height,
                }, 
                Msg_inject_scroll_horizontal: req.Msg_inject_scroll_horizontal, 
                Msg_inject_scroll_vertical: req.Msg_inject_scroll_vertical, 
            }
            buf := &bytes.Buffer{}
            err := binary.Write(buf, binary.BigEndian, t)
            if err != nil {
                log.Debugf("CONTROL_MSG_TYPE_INJECT_SCROLL_EVENT error: %s", err)
                log.Debugf("%s",buf.Bytes())
                break
            }
            _, err = conn.Write(buf.Bytes())
        case CONTROL_MSG_TYPE_BACK_OR_SCREEN_ON:
        case CONTROL_MSG_TYPE_EXPAND_NOTIFICATION_PANEL:
        case CONTROL_MSG_TYPE_COLLAPSE_NOTIFICATION_PANEL:
        case CONTROL_MSG_TYPE_GET_CLIPBOARD:
        case CONTROL_MSG_TYPE_SET_CLIPBOARD:
        case CONTROL_MSG_TYPE_SET_SCREEN_POWER_MODE:
        default:
            err = errors.New("unsupported msg type")
        }
        if err != nil {
            return err
        }
    }
    return nil
}

前端呼叫

let scrcpyKey = (key) => {
    ws.send(JSON.stringify({
        "msg_type": 0,
        "msg_inject_keycode_action": 0,
        "msg_inject_keycode_keycode": key,
        "msg_inject_keycode_metastate": 0
    }))
    ws.send(JSON.stringify({
        "msg_type": 0,
        "msg_inject_keycode_action": 1,
        "msg_inject_keycode_keycode": key,
        "msg_inject_keycode_metastate": 0
    }))
}
let scrcpyTouchDown = (touch) => {
    ws.send(JSON.stringify({
        "msg_type": 2,
        "msg_inject_touch_action": 0,
        "msg_inject_touch_position": {
            "x": touch.x, "y": touch.y, "width": touch.w, "height": touch.h
    }}));
}
let scrcpyTouchMove = (touch) => {
    ws.send(JSON.stringify({
        "msg_type": 2,
        "msg_inject_touch_action": 2,
        "msg_inject_touch_position": {
            "x": touch.x, "y": touch.y, "width": touch.w, "height": touch.h
        }
    }));
}
let scrcpyTouchUp = (touch) => {
    ws.send(JSON.stringify({
        "msg_type": 2,
        "msg_inject_touch_action": 1,
        "msg_inject_touch_position": {
            "x": touch.x, "y": touch.y, "width": touch.w, "height": touch.h
        }
    }));
}
//向下滾動
let scrcpyScrollDown = (touch) => {
    ws.send(JSON.stringify({
        "msg_type": 3,
        "msg_inject_scroll_position": {
            "x": touch.x, "y": touch.y, "width": touch.w, "height": touch.h
        },
        "msg_inject_scroll_horizontal": 0,
        "msg_inject_scroll_vertical": -1,
    }));
}
//向上滾動
let scrcpyScrollUp = (touch) => {
    ws.send(JSON.stringify({
        "msg_type": 3,
        "msg_inject_scroll_position": {
            "x": touch.x, "y": touch.y, "width": touch.w, "height": touch.h
        },
        "msg_inject_scroll_horizontal": 0,
        "msg_inject_scroll_vertical": 1,
    }));
}

專案還在開發階段，歡迎反饋問題 : )

收工～

Pycharm遠端除錯
2018-12-16
PyCharm除錯
PHPSTROM遠端除錯
2021-03-22
PHP除錯
如何基於SpringBoot+Docker構建公司級別的遠端除錯
2019-01-16
Spring BootDocker除錯
IDEA、ECLIPSE遠端除錯
2020-09-25
IdeaEclipse除錯
遠端除錯伺服器python程式碼解決方案
2020-12-29
除錯伺服器Python
pycharm 遠端除錯之二
2019-01-09
PyCharm除錯
Xdebug+PhpStorm 遠端除錯
2018-11-30
PHPORM除錯
debug技巧之遠端除錯
2024-05-16
除錯
本地除錯遠端服務
2024-11-04
除錯
vscode遠端除錯c++
2022-06-12
VSCode除錯C++
使用IDEA遠端debug除錯
2022-11-24
Idea除錯
Dapr 遠端除錯之 Nocalhost
2022-04-21
除錯
VS - 打斷點/本地除錯/遠端除錯問題
2024-03-13
斷點除錯
phpstorm 遠端除錯 homstead 程式碼
2018-12-09
PHPORM除錯
WebStorm遠端除錯Node.js
2020-04-05
WebORM除錯Node.js
Homestead+PhpStorm+Xdebug 遠端除錯
2020-04-03
PHPORM除錯
使用IDEA進行遠端除錯
2024-06-27
Idea除錯
使用Xdebug進行遠端除錯
2021-11-18
除錯
vs搭建遠端除錯環境
2021-01-04
除錯
構建基於 iOS 模擬器的前端除錯方案
2020-06-24
iOS前端除錯
使用Intellij IDEA遠端除錯Spark程式
2018-10-26
IntelliJIdea除錯Spark
vsc 如何除錯遠端python程式碼
2024-03-05
除錯Python
vscode配置遠端linux系統除錯
2023-10-19
VSCodeLinux除錯
Pycharm同步遠端伺服器除錯
2020-11-03
PyCharm伺服器除錯
遠端除錯 Android 裝置網頁
2019-06-26
除錯Android網頁
IntelliJ IDEA遠端除錯Elasticsearch6.1.2
2022-09-10
IntelliJIdea除錯Elasticsearch
windows系統vscode遠端除錯MySQL
2022-04-09
WindowsVSCode除錯MySql
Pycharm連線遠端伺服器並實現遠端除錯
2018-08-29
PyCharm伺服器除錯
使用Clion優雅的完全遠端自動同步和遠端除錯c++
2019-04-21
除錯C++
遠端除錯在Linux車機中的應用
2020-08-28
除錯Linux
IntelliJ IDEA引入了VsCode的Docker遠端除錯功能
2021-04-27
IntelliJIdeaVSCodeDocker除錯
Linux soft lockup時遠端除錯的可能性
2020-12-22
Linux除錯
Android Studio怎麼遠端除錯裝置？
2018-11-19
Android除錯
智慧小程式檔案館——遠端除錯
2018-09-30
除錯
原來 Java 遠端除錯如此簡單
2020-09-30
Java除錯
Idea進行java應用的遠端除錯Remote debugging
2021-10-14
IdeaJava除錯REM
vscode+gdbserver遠端除錯ARM環境搭建
2024-04-18
VSCodeServer除錯
使用VSCode遠端除錯惡意Powershell指令碼
2020-09-28
VSCode除錯指令碼

基於 Scrcpy 的遠端除錯方案