Giter Site home page Giter Site logo

jsmith716 / sji-android-screen-capture Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bopo/sji-android-screen-capture

0.0 1.0 0.0 7.88 MB

android screen capture and remote controller

Home Page: View Android screen by HTML5 video in browser, Remote Control Android by mouse click in browser

License: MIT License

Shell 5.20% HTML 14.77% CSS 1.69% JavaScript 41.22% C++ 5.74% C 31.39%

sji-android-screen-capture's Introduction

sji-android-screen-capture

Android Screen Capture (For HTML5 Video Live Streaming)
This project is aimed to capture android screen and view it in HTML5 video capable browser.
Yes, real time, low bandwidth. This product will do encoding in host and android by ffmpeg. Support Chrome, Firefox, Safari. Windows/Linux/Unix

New: Recorded file can be auto converted to H.264/MP4 and WebM video format if you'v installed ffmpeg in local PC.
New: Support Remote Control by mouse click/move/drag on live view UI.

[Screenshot]

Menu

Live View

Recorded Videos

[How to use]

1.Setup PC Environment (Windows/Mac/Linux/Unix)

Install Android SDK (at least "Platform Tools" which include adb(Android Debug Bridge)).  
install node.js.  
Install android USB driver automatically or manually when you first plug Android into PC.  
If you want to always record as H.264/MP4 or WebM video format, you need install FFMPEG into PC.

To simplify other settings, you'd better put the directory of adb and local ffmpeg into PATH environment variable otherwise you need put the fullpath of them into "adb" and "ffmpeg" settings in stream.json file.

3.Start Android Screen Capture (include a video stream server) on PC

cd path_of_this_project/bin  
node stream.js

You can edit configuration file stream.json to change IP, port, SSL...


4.Show video/animated image of android from PC by browsing http://localhost:3000/
Support WebM video and H.264/MP4 and Animated JPEG/PNG by Multi-Part HTTP Response. Chrome,Firefox,Safari are well supported. IE10+ is not tested but should be OK.

To embed Animated JPEG image into your html page:

<img src="http://localhost:33333/capture?device=yourDeviceSerialNumber&type=ajpg&fps=4" />

To embed Animated PNG image into your html page. (PNG is lostless image compression):

<img src="http://localhost:33333/capture?device=yourDeviceSerialNumber&type=apng&fps=4" />

You can record and seamlessly convert to H.264/MP4 and WebM format file. To record, you submit a HTTP GET request with following URL:

http://localhost:3000/deviceControl?action=startRecording?device=yourDeviceSerialNumber&type=ajpg&fps=4" />

or via animated PNG (better quality than above URL)

http://localhost:3000/deviceControl?action=startRecording?device=yourDeviceSerialNumber&type=ajpg&fps=4" />

To stop recording, you submit a HTTP GET request with following URL:

http://localhost:3000/deviceControl?action=stopRecording?device=yourDeviceSerialNumber" />

To just capture one screenshot: JPEG:

<img src="http://localhost:33333/capture?device=yourDeviceSerialNumber&type=jpg" />

PNG:

<img src="http://localhost:33333/capture?device=yourDeviceSerialNumber&type=png" />

[Note]: All above URLs can specify scale and rotate optionally by append following querystring:

&scale=0.5&rotate=270 or  
&scale=300xAuto or
&scale=300x200 or  
&scale=Autox200 ...

For advanced usage, please start menu page, move mouse to link and button to see URL.


You can attach an access key for device so all above URL must appended &accessKey=yourAccessKey otherwise you get "access denied" error response.
Typically stream web server administrator set adminKey e.g. xxxx,
then submit URL request:

  
http://localhost:3000/deviceControl?adminKey=xxxx&action=setAccessKey&accessKey=yyyy&device=sn1&device=sn2  ....  

This will attach access key yyyy to device sn1 and sn2.

To start record Animated PNG image, you can submit following URL request:

  
http://localhost:3000/deviceControl?adminKey=xxxx&action=startRecording&device=sn1&device=sn2&type=apng&fps=4  

This will start record on device sn1 and sn2. The fps means rate. You can optionally specify scale and rotate querystring.

To stop record Animated PNG image, embed following URL into your HTML img tag:

  
http://localhost:3000/deviceControl?adminKey=xxxx&action=stopRecording&device=sn1&device=sn2    

To play record file Animated PNG image, embed following URL into your HTML img tag:

  
http://localhost:33333/playRecordedFile?&device=sn1&accessKey=yyyy&type=apng  

You can optionally specify custom playback rate by fps querystring.

To download record file Animated PNG image, embed following URL into your HTML page:

  
http://localhost:33333/downlodRecordedFile?&device=sn1&accessKey=yyyy&type=apng  

For webm format, just change apng to webm and img tag to video tag in above steps.

===================
[Note]
Currently tested in android 4.2, 4.1, 4.0, 2.2, 2.3. With PC Browser Chrome 33, Firefox 27, Safari 7. Host OS can be Windows/Mac/Linux (Unix should also be OK, but not tested).
Build: src/build_all.sh has been tested in Mac OS X 10.7 64bit and Ubuntu 12 64bit, Android NDK r8 or r9. Gcc 4.4.3 or 4.8.
bin/android/busybox is downloaded from busybox binary downloads.

sji-android-screen-capture's People

Contributors

jjqq2013 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.