lwgboy / sji-android-screen-capture

android screen capture (for HTML5 video live streaming, broadcast

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 android by ffmpeg.

recorded video sample( converted by youtube)  
Usage video

[Screenshot]

[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.  

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/image of android from PC by browsing http://localhost:3000/
For video, currently only support WebM video, so recommend Google Chrome Browser.
For image, currently support animated PNG by multi-part http response. Chrome and Firefox are well supported.


To embed Animated PNG image into your html page:

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

To embed webm video into your html page:

<video controls preload="none" autobuffer="false">  
  <source src="http://localhost:33333/capture?device=yourDeviceSerialNumber&type=webm&fps=4" type="video/webm">  
</video>

To just capture one screenshot:

<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=300x or  
&scale=300x200 or  
&scale=x200 ...  

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, Firefox.
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/run.sh_/busybox is download from busybox binary downloads.

[Todo]
enhance performance!
many many...

//done: refactor source
//done: use configuration file (stream.json)
//done: support SSL
//done: use pfx format for server certificate and private key
//done: support browser's javascript XMLHttpRequest
//done: disable ffmpeg statistics log by default
//done: admin web site
//done: session management
//done: test: stop recording
//done: do not call getRemoteVer every time
//done: resize in android
//done: rotate in android
//done: play recorded file( webm )
//done: play recorded file( apng )
//done: test: record webm video and record at same time
//done: stress test replay apng
//done: sort recorded file by time
//done: memory leak test on repeatedly view recorded file and view live capture
//done: Fixed: Force firefox/safari refresh page when history back
//done: check device existence for viewLiveCapture request
//done: stress test live capture (animated PNG)
//done: stress test live capture (webm)
//done: test close http stream when downloading or playing
//done: do not show recording file, only show latest recorded file
//done: check device availability first in /viewRecordedFile or /viewLiveCapture
//done: show streaming counter in menu page

//todo: test: on Windows OS, IE
//todo: convert apng to mp4 so can control progress by viewer
//todo: safari: multipart/x-mixed-replace
//todo: kill orphan process
//todo: join two webm file
//todo: send webm video to browser and file at same time. Completely remove recordOption when viewLiveCapture
//todo: adapt fps change without interrupting viewer
//todo: use error image or video to show error
//todo: water mark
//todo: add audio
//todo: make touchable: forward motion event to android
//todo: remove dependence of adb