Automating Android screen recording and device framing

I wrote about screen recording from Android a little while ago and whilst it is cool, I didn't document anything of the process that I had to get it into the device frame and make the screen recordings look all "profesh".

The process in the past was pretty cumbersome, I would grab the screen recording using my script and then use Screenflow to overlay the video on the device frame and then do export that out to the mp4 followed by a quick bit of GIF hakery.

I needed to automate this because each video was probably about 20 minutes worth of work.

I have known for a long time of ffmpeg. O.M.G, it's incredibly powerful and incredibly complex especially for a noob like me to get started.

I needed to have a background layer and then to overlay the screen recording on top of it. Pretty simple stuff, one little gotcha was that the video produced by the Android screen recording tool is high resolution so I needed to also scale down the video size.

This is the commandline that I came up with and it seems to work reasonably well.

ffmpeg \
  -i n6-background.png \
  -i screenrecording.mp4 \
  -filter_complex "[1:v]scale=480:-1[scaled_overlay],[0:v][scaled_overlay]overlay=x=(main_w-overlay_w)/2:y=(main_h-overlay_h)/2" \

It works pretty well. Now on to also making a GIF out of it... ;)

This code is on github if you want to keep up to date with it and I've included it below. I will say if you are an ffmpeg expert and you see something I can improve let me know.

if [ -z "$1" ]; then
  shot_path=$(date +%Y-%m-%d-%H-%M-%S).mp4


trap ctrl_c INT

function ctrl_c() {
  echo "** Trapped CTRL-C"
  echo "** Downloading screencast"
  sleep 2

  adb shell am broadcast -a -e command exit
  adb pull /sdcard/Movies/$shot_path .

  if [ -x $(which "$ffmpeg") ] && [ -e "$n6_frame" ]
    $ffmpeg -i $n6_frame -i $shot_path  -filter_complex "[1:v]scale=480:-1[scaled_overlay],[0:v][scaled_overlay]overlay=x=(main_w-overlay_w)/2:y=(main_h-overlay_h)/2" $shot_path-frame.mp4


function setup() {
   adb shell settings put global sysui_demo_allowed 1
   adb shell am broadcast -a -e command network -e mobile show -e datatype lte -e level 4
   adb shell am broadcast -a -e command battery -e level 100 -e plugged false
   adb shell am broadcast -a -e command network -e wifi show -e level 4
   # Tweak this if you want the clock to changed
   adb shell am broadcast -a -e command clock -e hhmm 0440
   # Remove this if you want notifications to be availalbe
   adb shell am broadcast -a -e command notifications -e visible false
   echo When finished, run: adb shell am broadcast -a -e command exit

function alldone() {
  adb shell am broadcast -a -e command exit


adb shell screenrecord --bit-rate 6000000 /sdcard/Movies/$shot_path

echo "Finished"

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

I love to learn about what you are building, and how I can help with Chrome or Web development in general, so if you want to chat with me directly, please feel free to book a consultation.

I'm trialing a newsletter, you can subscribe below (thank you!)