Code address: github.com/deepsadness…

Results the preview


Screen casting preview

Brief description:

  1. Use the Android MediaProjection Api to create screenshots of the video
  2. Link through WebSocket. Pass the image to the web page

Source of ideas

When I saw Vysor, I was so amused that I thought I could try to make a similar feature. Related implementations are searched. It turns out that vysor has already been analyzed online. This small project was followed along as an exercise in the MediaProjection Api

The main idea

1. Obtain a screenshot of the screen

Android in Api 21 and above has provided us with the system’s Api to operate. It’s a combination of these classes, MediaProjection and VirtualSurface, and for screenshots, ImageReader, all three classes.


PNG schematic diagram

The important thing to note here is that through this callback, the interface is called back whenever the screen changes to get the latest screenshot. ImageReader::setOnImageAvailableListener

2. Set up Socket connections to transfer picture data

The node section of the code can be found at github.com/deepsadness…

Because our goal is to open within a web page, we need to communicate with the web page. You can simply use WebSocket for two-way access


PNG simple schematic Again

Iosocket. IO/can be easily implemented

3. How to display the picture

SRC in HTML can parse byte[] directly.

 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;
Copy the code

4. The next step

The next step is to use the recording Api to do live video recording.