This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p><a href="https://paul.kinlan.me/android-screen-recording/">I wrote about screen recording from Android</a> 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".</p>
<p>The process in the past was pretty cumbersome, I would grab the screen recording using my script and
then use <code>Screenflow</code> 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.</p>
<p>I needed to automate this because each video was probably about 20 minutes worth of work.</p>
<p>I have known for a long time of <a href="https://ffmpeg.org">ffmpeg</a>. O.M.G, it's incredibly powerful and incredibly complex
especially for a noob like me to get started.</p>
<p>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.</p>
<p>This is the commandline that I came up with and it seems to work reasonably well.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell">ffmpeg <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> -i n6-background.png <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> -i screenrecording.mp4 <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> -filter_complex <span style="color:#e6db74">"[1:v]scale=480:-1[scaled_overlay],[0:v][scaled_overlay]overlay=x=(main_w-overlay_w)/2:y=(main_h-overlay_h)/2"</span> <span style="color:#ae81ff">\
</span><span style="color:#ae81ff"></span> output.mp4
</code></pre></div><ul>
<li>n6-background is white backgroud with a device frame on it at 1920x1080 resolution.</li>
<li>screenrecording.pn4 is, well, the screenrecording from the device.</li>
<li>fileter_complex is the ffmpeg processing language you have to use. In this case takes the 2nd video stream and scales it
and then overlays and centers it on top of the video stream that is created by the background image</li>
</ul>
<p>It works pretty well. Now on to also making a GIF out of it... ;)</p>
<p>This code is on <a href="https://gist.github.com/PaulKinlan/2fdb0c8a6b6f6a646f87">github if you want to keep up to date with it</a> 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.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-shell" data-lang="shell"><span style="color:#66d9ef">if</span> <span style="color:#f92672">[</span> -z <span style="color:#e6db74">"</span>$1<span style="color:#e6db74">"</span> <span style="color:#f92672">]</span>; <span style="color:#66d9ef">then</span>
shot_path<span style="color:#f92672">=</span><span style="color:#66d9ef">$(</span>date +%Y-%m-%d-%H-%M-%S<span style="color:#66d9ef">)</span>.mp4
<span style="color:#66d9ef">else</span>
shot_path<span style="color:#f92672">=</span><span style="color:#e6db74">"</span>$*<span style="color:#e6db74">"</span>
<span style="color:#66d9ef">fi</span>
ffmpeg<span style="color:#f92672">=</span><span style="color:#e6db74">"ffmpeg"</span>
n6_frame<span style="color:#f92672">=</span><span style="color:#e6db74">"n6-background.png"</span>
trap ctrl_c INT
<span style="color:#66d9ef">function</span> ctrl_c<span style="color:#f92672">()</span> <span style="color:#f92672">{</span>
echo <span style="color:#e6db74">"** Trapped CTRL-C"</span>
echo <span style="color:#e6db74">"** Downloading screencast"</span>
sleep <span style="color:#ae81ff">2</span>
adb shell am broadcast -a com.android.systemui.demo -e command exit
adb pull /sdcard/Movies/$shot_path .
<span style="color:#66d9ef">if</span> <span style="color:#f92672">[</span> -x <span style="color:#66d9ef">$(</span>which <span style="color:#e6db74">"</span>$ffmpeg<span style="color:#e6db74">"</span><span style="color:#66d9ef">)</span> <span style="color:#f92672">]</span> <span style="color:#f92672">&&</span> <span style="color:#f92672">[</span> -e <span style="color:#e6db74">"</span>$n6_frame<span style="color:#e6db74">"</span> <span style="color:#f92672">]</span>
<span style="color:#66d9ef">then</span>
$ffmpeg -i $n6_frame -i $shot_path -filter_complex <span style="color:#e6db74">"[1:v]scale=480:-1[scaled_overlay],[0:v][scaled_overlay]overlay=x=(main_w-overlay_w)/2:y=(main_h-overlay_h)/2"</span> $shot_path-frame.mp4
<span style="color:#66d9ef">fi</span>
alldone
<span style="color:#f92672">}</span>
<span style="color:#66d9ef">function</span> setup<span style="color:#f92672">()</span> <span style="color:#f92672">{</span>
adb shell settings put global sysui_demo_allowed <span style="color:#ae81ff">1</span>
adb shell am broadcast -a com.android.systemui.demo -e command network -e mobile show -e datatype lte -e level <span style="color:#ae81ff">4</span>
adb shell am broadcast -a com.android.systemui.demo -e command battery -e level <span style="color:#ae81ff">100</span> -e plugged false
adb shell am broadcast -a com.android.systemui.demo -e command network -e wifi show -e level <span style="color:#ae81ff">4</span>
<span style="color:#75715e"># Tweak this if you want the clock to changed</span>
adb shell am broadcast -a com.android.systemui.demo -e command clock -e hhmm <span style="color:#ae81ff">0440</span>
<span style="color:#75715e"># Remove this if you want notifications to be availalbe</span>
adb shell am broadcast -a com.android.systemui.demo -e command notifications -e visible false
echo When finished, run: adb shell am broadcast -a com.android.systemui.demo -e command exit
<span style="color:#f92672">}</span>
<span style="color:#66d9ef">function</span> alldone<span style="color:#f92672">()</span> <span style="color:#f92672">{</span>
adb shell am broadcast -a com.android.systemui.demo -e command exit
<span style="color:#f92672">}</span>
setup
adb shell screenrecord --bit-rate <span style="color:#ae81ff">6000000</span> /sdcard/Movies/$shot_path
echo <span style="color:#e6db74">"Finished"</span>
</code></pre></div>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
