android地图协议格式,Android PC投屏简单尝试- 自定义协议章(Socket+Bitmap)

效果预览

投屏效果预览

简单说明:

使用Android MediaProjection Api来完成视频的截图

通过WebSocket进行链接。将图片传递给网页

想法来源

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

主要思路

1. 获取屏幕的截屏

创建VirtualDisplay

Android在Api 21以上为我们已经提供了系统的Api可以进行操作。

主要是这几个类的相互配合

MediaProjection和VirtualSurface，还有截图的话，使用ImageReader，三个类配合使用。

配套使用示意图.png

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 {

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 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连接，将图片的数据进行传递

因为我们的目标是在网页内打开，所以需要和网页进行通信。

可以简单的使用WebSocket进行双方通向

简单示意图Again.png

通过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;

4. 下一步

下一步，就是使用 录制的Api，来做录屏直播了。

投屏尝试系列文章