(原) 简版手机投屏

2022年2月11日 in 手机投屏约700字，阅读约2 分钟。

打赏发消息给我

原创文章，请

打赏后转载，并注明出处。

树莓派出了最新的64位系统,但手机投屏却没有办法。能安装adb工具，不能安装scrcpy。

既然如此，adb可以通过shell来运行screecap截图程序，那自己做一个简版的投屏。

最终效果是可行的，但是速度比较感人，也就能用的地步。

为了简单，将浏览器作为客户端（这也是影响速度的一方面）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手机截屏</title>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<style>
   *{padding:0px;margin:0px;}
   body{background:#000;}
   img{position:absolute;}
</style>
</head>
 
<body>
   <div>
      <img id="screen1" src="/img/screen.jpg" style="width:auto;height:600px;z-index:2;" />
      <img id="screen2" src="/img/screen.jpg" style="width:auto;height:600px;z-index:1;" />
   </div>
</body>
 
<script language="JavaScript">
   // 判断图片加载完毕
   function imgLoad(img, callback) {
            var timer = setInterval(function() {
                if (img.complete) {
                    callback(img)
                    clearInterval(timer)
                }
            }, 50)
   }    
   // 重置窗口或载入时，图片匹配大小
   // 这里还不太正确，暂时不使用
   // window.onresize = window.onload = function(){
   //      document.getElementById('screen1').height=document.body.scrollHeight/2.6;
   //      document.getElementById('screen2').height=document.body.scrollHeight/2.6;
   // }

   var timer1 = setInterval(LoadImage,400);  // 这是刷新速度

   function LoadImage() {
      // 载入1完成，隐藏2,显示1
      imgLoad(document.getElementById('screen1'), function() {
            // console.log('加载完毕1')
            document.getElementById('screen1').style.zIndex=2;
            document.getElementById('screen2').style.zIndex=1;
            // 加载2
            document.getElementById('screen2').src="/img/screen.jpg?=" + (+new Date());
      })   
      // 载入2完成，隐藏1,显示2
      imgLoad(document.getElementById('screen2'), function() {
            // console.log('加载完毕2')
            document.getElementById('screen2').style.zIndex=2;
            document.getElementById('screen1').style.zIndex=1;
            // 加载1
            document.getElementById('screen1').src="/img/screen.jpg?=" + (+new Date());
      })   
   }

</script>
</html>

服务端使用Golang，比较简单

package main

import (
	"fmt"
	"net/http"
	"os/exec"
)

var cmdRet []byte

func Cmd(cmd string, shell bool) []byte {
	if shell {
		out, err := exec.Command("bash", "-c", cmd).Output()
		if err != nil {
			fmt.Println("some error found")
		}
		return out
	} else {
		out, err := exec.Command(cmd).Output()
		if err != nil {
			fmt.Println("some error found")
		}
		return out
	}
}

func StaticServer(w http.ResponseWriter, r *http.Request) {
	url := r.URL.Path

	switch url {
	case "/":
		http.ServeFile(w, r, "./index.html")
	case "/img/screen.jpg":
		go func() {
			cmdRet = Cmd("adb shell screencap -p", true)
		}()
		w.Write(cmdRet)
		return
	}
}

func main() {
	http.HandleFunc("/", StaticServer)
	http.ListenAndServe(":8080", nil)
}

升级考虑：

向手机中写入客户端，通过TCP传送截屏数据
用户端使用GUI界面，不使用浏览器，可以加快一点速度。不过Go不太适合GUI，难道要Python？
截屏如何保存为JPG? 现在screencap只支持png，导致传输数据较大。
不使用现在的截屏程序，自开发与客户端整合。

相关文章