Android手机投屏到电脑示例

最新推荐文章于 2024-08-08 13:40:40 发布

转载最新推荐文章于 2024-08-08 13:40:40 发布 · 1.8k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/ce37330365f2

本文介绍了一种无需数据线和网络连接的Android设备投屏至电脑的技术实现，利用socket.io搭建服务器，通过ImageReader进行屏幕捕获，再经由WebSocket传输至网页端显示，实现了低延迟的屏幕共享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 投屏到电脑上，类似vysor。不需要网连数据线，延时小。原理是电脑上布一个socket.io服务器；手机通过socket.io连接到自己布置的局域网服务器，然后通过ImageRedaer不断截屏，将画片发送到局域网服务器。最后一步就是电脑的显示，服务器上获得手机传过来的Bitmap，让其发送到html网页，并刷新网页。于是我们就可以在localhost:3000首页上看到手机屏幕的内容。这里涉及到两个服务器io-server.js和index.js，分别监听9000端口和3000端口，9000端口的负责监听并接收手机发送过来的数据，3000端口负责接收电脑浏览器发送过来的请求，并给浏览器发送图片。

Android PC投屏简单尝试

博客地址 https://www.jianshu.com/p/ce37330365f2

项目使用说明

必须有nodejs的环境在./sockt目录下安装

npm install --save express@4.15.2
npm install --save socket.io

运行Node的Socket服务端

 node ./sockt/io-server.js

运行Node的网页

    node ./sockt/index.js

打开 localhost:3000.就可以看到网页了。

运行App。进入在MainActivity，点击Start按钮，就可以开始了进入Activity时，已经回去连接socket

注意：

需要在局域网内运行。App内需要配置好Socket链接的ip. 在SocketIoManager内
具体的内容，还是请看一下代码。

###效果预览

###简单说明:

使用Android MediaProjection Api来完成视频的截图
通过WebSocket进行链接。将图片传递给网页

想法来源

看到vysor，觉得特别好玩，于是就想着自己能不能试着做一个类似的功能出来。搜索了相关实现。发现网上已经有网友针对vysor做了分析。于是就照着思路，按图索骥，当作对MediaProjection Api的练习，来完成这个小项目

主要思路

####1. 获取屏幕的截屏

创建VirtualDisplay Android在Api 21以上为我们已经提供了系统的Api可以进行操作。主要是这几个类的相互配合MediaProjection和VirtualSurface，还有截图的话，使用ImageReader，三个类配合使用。

public RxScreenShot createImageReader() {
        //注意这里使用RGB565报错提示，只能使用RGBA_8888
        mImageReader = ImageReader.newInstance(width, height, PixelFormat.RGBA_8888, 1000);
        mSurfaceFactory = new ImageReaderSurface(mImageReader);
        createProject();
        return this;
    }

    private void createProject() {
        mediaProjection.registerCallback(mMediaCallBack, mCallBackHandler);
        //通过这种方式来创建这个VirtualDisplay，并将数据传递给ImageReader提供surface
        mediaProjection.createVirtualDisplay(TAG + "-display", width, height, dpi, DisplayManager.VIRTUAL_DISPLAY_FLAG_PUBLIC,
                mSurfaceFactory.getInputSurface(), null, null);
    }

获取屏幕截图可以通过ImageReader类。配套Image来获奖获得的数据转成Bitmap

/*
封装成了Observable对象。
*/
public class ImageReaderAvailableObservable extends Observable<ImageReader> {

    public static ImageReaderAvailableObservable of(ImageReader imageReader) {
        return new ImageReaderAvailableObservable(imageReader, null);

    }

    public static ImageReaderAvailableObservable of(ImageReader imageReader,Handler handler) {
        return new ImageReaderAvailableObservable(imageReader, handler);
    }

    private final ImageReader imageReader;
    private final Handler handler;

    private ImageReaderAvailableObservable(ImageReader imageReader, Handler handler) {
        this.imageReader = imageReader;
        this.handler = handler;
    }

    @Override
    protected void subscribeActual(Observer<? super ImageReader> observer) {
        Listener listener = new Listener(observer, imageReader);
        observer.onSubscribe(listener);
        //设置准备好的监听事件
        imageReader.setOnImageAvailableListener(listener, handler);
    }


    static class Listener implements Disposable, ImageReader.OnImageAvailableListener {
        private final AtomicBoolean unsubscribed = new AtomicBoolean();
        private final ImageReader mImageReader;
        private final Observer<? super ImageReader> observer;

        Listener(Observer<? super ImageReader> observer, ImageReader imageReader) {
            this.mImageReader = imageReader;
            this.observer = observer;
        }


        @Override
        public void onImageAvailable(ImageReader reader) {
            if (!isDisposed()) {
              //将准备好的reader发送出去，进行处理
                observer.onNext(reader);
              //注意：这里如果不调用onCompleted事件。其实这个监听会不断回调事件
//                observer.onComplete();
            }
        }

        @Override
        public void dispose() {
            if (unsubscribed.compareAndSet(false, true)) {
                mImageReader.setOnImageAvailableListener(null, null);
            }
        }

        @Override
        public boolean isDisposed() {
            return unsubscribed.get();
        }
    }
}

/*
调用开始截屏的方法
*/
public Observable<Object> startCapture() {
        return ImageReaderAvailableObservable.of(mImageReader)
                .map(imageReader -> {
                    String mImageName = System.currentTimeMillis() + ".png";
                    Log.e(TAG, "image name is : " + mImageName);
                    Bitmap bitmap = null;
                    //从imageReader中获取到最新的Image
                    Image image = imageReader.acquireLatestImage();
                    if (image == null) {

                    } else {
                        //将Image对象转成bitmap
                        int width = image.getWidth();
                        int height = image.getHeight();
                        //byteBuffer都保存在image.Plane中
                        final Image.Plane[] planes = image.getPlanes();
                        final ByteBuffer buffer = planes[0].getBuffer();
                        int pixelStride = planes[0].getPixelStride();
                        int rowStride = planes[0].getRowStride();
                        int rowPadding = rowStride - pixelStride * width;
                        bitmap = Bitmap.createBitmap(width + rowPadding / pixelStride, height, Bitmap.Config.ARGB_8888);
                        bitmap.copyPixelsFromBuffer(buffer);
                        bitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height);
                        //这里使用完要记得close.如果没有close，当imageReader达到max_count上限时将会抛出异常
                        image.close();
                    }
                    return bitmap == null ? new Object() : bitmap;
                });
    }

这里需要注意的是，需要通过这个回调，每当屏幕发生变化，就会回调这个接口，可以得到最新的截图。ImageReader::setOnImageAvailableListener

2. 搭建Socket连接，将图片的数据进行传递

node 部分的代码在 https://github.com/deepsadness/MediaProjectionDemo/tree/master/sockt

因为我们的目标是在网页内打开，所以需要和网页进行通信。可以简单的使用WebSocket进行双方通向

通过Socket.iohttps://socket.io/ 就可以简单的实现

Android端的代码通过WebSocket将Bitmap的字节码发送出去

    private fun sendBitmap(it: Bitmap) {
        val byteArrayOutputStream = ByteArrayOutputStream()
        it.compress(Bitmap.CompressFormat.JPEG, 60, byteArrayOutputStream)
        val byteArray = byteArrayOutputStream.toByteArray()
        SocketIoManager.getInstance().send(byteArray)
    }

    public void send(byte[] bitmapArray) {
        if (!mSocketReady) {
            return;
        }
        if (bitmapArray != null) {
            mSocket.emit("event", bitmapArray);
        }
    }

Node端的代码简单的SocketIo实现.代码在 /sockt/io-server.js

var io = require('socket.io')();
var clients = []
io.on('connection', function (client) {
    clients.push(client);
    console.log('connection!');

    client.emit('join', 'welcome to join!!')

    client.on('chat message', function (msg) {
        console.log("receive msg=" + msg);

    });
    client.on('event', function (msg) {
        // console.log("event", msg);
        console.log("event", "send image~~");
        //通过event事件出去
        clients.forEach(function (it) {
            it.emit('event', msg)
        })
    });
});
io.on('disconnect', function (client) { 

})
io.listen(9000);

3. 如何将图片显示出来

代码在 /sockt/index.html中 html中的src就可以直接对传递byte[]的进行解析。

 socket.on('image', function (msg) {
      var arrayBufferView = new Uint8Array(msg);
      var blob = new Blob([arrayBufferView], { type: "image/jpeg" });
      var urlCreator = window.URL || window.webkitURL;
      var imageUrl = urlCreator.createObjectURL(blob);
      var img = document.getElementById("screen");
      // var img = document.querySelector("#photo");
      img.src = imageUrl;

由于https://github.com/deepsadness/MediaProjectionDemo这个例子里有部分代码是用kotlin写的，

我将其改成了java代码。代码地址如下:https://github.com/tomyZhou/AndroidScreentShot