Easiest Way to Debug Chromebox Web App

When you run your web app in Chromebox, you cannot call out the DevTools to check the error in console or inspect elements. Instead, there is another way to do so.

Firstly, do not run web app in kiosk mode, and quit fullscreen mode. Open Chrome browser, in address bar, type: chrome://inspect

On left menu, click Apps, you will find the web app you are running, click inspect to call out the DevTools for that web app.

Then you can do your debugging as usual.

Debug Chromebox Web App

Solve React Native custom shell script stuck for long time in Xcode

Disclaimer, I develop React Native app in Windows platform and Android version first. For iOS version, compile in Xcode is my last process for testing or deploy. So the following tip may not suitable for your case.

Each time, when build React Native app in Xcode, no matter it is build for simulator or device, the long building time is a painful waiting process.

It stuck at custom shell script process, which is running ../node_modules/react-native/scripts/react-native-xcode.sh

This script compile js files together for embed in the app and it takes a very long time for scan through all node_modules

Since I develop in Windows platform, I can use this command to package js files faster react-native bundle --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle --platform ios

In Xcode, I can skip this custom shell script process by tick Run script only when installing, it will disable react-native-xcode.sh actually, file main.jsbundle will not include in the app and the app cannot run.

So we have to include the main.jsbundle by add them to Copy Bundle Resources

Build the app again, you will find the compile speed is much faster now.

If you have (new added) image files, this trick will not bundle the image files into app, so please go through the normal process first. This trick is for update js files only.

Config Raspberry Pi for auto-login, disable Alt+F4, Ctrl+Alt+Del keys, auto-run python code

Just finished the first job on Raspberry Pi, using python code as a kiosk program, some common config you may needed:

My Raspberry Pi is running with RASPBIAN Debian Wheezy

After boot up the Raspbian, if you want to auto-login with username: pi, password: raspberry.
sudo nano /etc/inittab
1:2345:respawn:/sbin/getty --noclear 38400 tty1
change to:
1:2345:respawn:/bin/login -f pi tty1 dev/tty1 2>&1

My job has keyboard connect, to prevent user press the unwanted keys.
Disable Ctrl+Alt+Del keys
ca:12345:ctrlaltdel:/sbin/shutdown -t1 -a -r now
disable it by comment the above line (add # in the front of the line)
#ca:12345:ctrlaltdel:/sbin/shutdown -t1 -a -r now

User can also use key combine Alt+F1…Alt+F6 to switch between different consoles, to disable it and stay on one console only:
Disable multiple virtual consoles
Comment the following lines:
#2:23:respawn:/sbin/getty 38400 tty2
#3:23:respawn:/sbin/getty 38400 tty3
#4:23:respawn:/sbin/getty 38400 tty4
#5:23:respawn:/sbin/getty 38400 tty5
#6:23:respawn:/sbin/getty 38400 tty6

save it and then type:
sudo nano /etc/default/console-setup
find 1-6 and change to 1-1

Auto-run python code
sudo nano /etc/profile
add the below line to the end:
sudo python /home/pi/yourcode.py

After finished all above config, reboot:
sudo reboot

First Try on Erlyvideo

Erlyvideo is another free/commercial Flash Media Server alternative, I notice it because it claimed it can streaming video to iPhone. I am looking for a solution directly streaming flv to iPhone for a long time, but still cannot find any.

Movie file location setting
Edit erlyvideo/priv/erlyvideo.conf, parameter: file_dir

iPhone streaming path

Testing result: mp4, mp3 can stream in iPhone successfully, but mp3 playing is not smooth. flv can produce segment file, but cannot play in iPhone.

Abbreviate TextField Characters According to Rows Count

Before AS3, we can only use substr to abbreviate string characters number for TextField, but we have to guess a extract number to fit our UI design, e.g. only show two lines, we have to guess in this font size, font face, what is maximum numbers of character can be shown. It is a problem which is hard to solve for a long time.

When come to AS3, TextField class have a new method call getLineLength(), it can return each line, number of characters are shown. So I have written this small class to help me limit the number of rows can be shown in TextField

Download MaxRowsTextField class file
Download demo source

This class is extended from TextField class:
var tf:MaxRowsTextField = new MaxRowsTextField();
tf.width = 290;
tf.multiline = tf.wordWrap = true;

// 0 mean unlimited, default is 0
tf.maxRows = 4;

// change abbreviate symbol, default is "..."
tf.moreStr = "...(more) ";

// if you want to limit rows count, use this, otherwise, you can just use text or htmlText
tf.text2 = "This is a vey long message";

This class is extracted and simplified from my VCASMO 2.0 project.

Flash Player 10.1, Client-side Microphone Recording Demo

Thanks Flash Player 10.1, now we can record the sound through microphone directly in browser without the use of Flash Media Server, you can download the wav file converted from ByteArray immediately, you can download mp3 which I send wav file to server and using LAME to encode as mp3. Hope AS3 mp3encoder can come out in one day, then a pure client side microphone recording dream will come true since Flash Player 6!


To learn how to use microphone to record sound, you can check this devnet article.

Trouble with Hotlink Protection and HTTP Referer in Different Browsers

To save bandwidth, most of servers will practice some hotlink protection, usually using either following script to check whether the HTTP referer is come from the same server, most script are focus on image file, but it can slightly modified for FLV protection. There are two common methods to do that:

Edit in .htaccess RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(flv|mp3)$ - [NC,F,L]

Edit in httpd.conf, first enabled this:
LoadModule setenvif_module modules/mod_setenvif.so
then put it inside <VirtualHost>, just before </VirtualHost>
SetEnvIfNoCase Referer "^http(s)?://(www\.)?yourdomain.com(/|$)" local_ref=1
SetEnvIfNoCase Referer "^$" local_ref=1
<FilesMatch "\.(flv|mp3)">
Order Allow,Deny
Allow from env=local_ref

However, FLV need to play through Flash Player, different browsers and even minor versions handle plugin HTTP referer differently, so it make such hotlink protection through HTTP referer means impossible 🙁

Browser sends the URL of the requesting plug-in (i.e. the best situation, url of SWF) does not send a referer sends the embedding page URL
IE X    
Firefox   X  
Safari (MAC)     X
Safari (Win)   X  
<Chrome 3     X
Chrome 3+ X    
<=Opera 9     X
Opera 10+ X    

The hotlink protection cause problem when you let other people embed your video player in their site (like Youtube do), from the above table, you can find the third column will not work, for example in safari (MAC), the video cannot play because Apache think the FLV is linked by third party website and forbid FLV to be accessed.