How to make a DIY 360° Street View camera reusing your old smartphone

Do you have an old smartphone lying around and want to find a creative way to reuse it? Let's make a Do-It-Yourself 360° Street View camera and record your own hyperlapse videos!

DIY 360° Street View Camera mounted on the car

What you will need:

1. Old smartphone - I used iPhone 4s, but any phone with full HD camera should be fine,
2. Kogeto Dot - dirt cheap 360° smartphone camera lens,
3. Magnetic sheet - at least 1.5 mm thick (or 60 g/cm³ pull force rating),
4. Smartphone case - to glue the magnetic sheet to,
5. Car - to put your camera on.

How to make it:

1. Install any time-lapse camera app on your old smartphone. I have chosen iMotion, which is free, captures photos every 0.5 s, exports them to the photo library and has a focus lock,
2. Stick the Kogeto Dot lens onto a rear camera. If you don't have an iPhone 4s, cut the plastic bindings and glue the bare lens to your smartphone so that the ring is fully visible through the camera.
3. Clip the magnetic sheet to your smartphone's dimensions and glue it to the bottom of a smartphone cover. Cut a window on top of it for the Dot lens.
4. Start a time-lapse app on your fully-charged smartphone, put it into the case and stick on a clean roof of your car. Now it's time to have a ride!
   Warning: in order not to loose your new Street View camera, do not drive fast or protect it with a duct tape!
5. After a ride, take off the smartphone, stop the app and export photos to the photo library,
6. Copy images to your computer using a USB cable,
7. Unwrap circular 360° images using e.g. the free 0-360 UnWrapper, optionally adjusting the contrast, saturation and sharpness of JPG images.
8. Create a video from your unwrapped panoramic 360° images using e.g. the open source ffmpeg:
   ffmpeg -framerate 24 -start_number 1 -i IMG_%04d.JPG -vf scale=iw*2:ih*2,pad=iw:ih*2:0:ih/2 -c:v libx264 output.mp4
   What it does: create a 24 FPS MP4 video from a series of images starting with IMG_0001.JPG, upscale by 2x and letterbox by 2x.
9. Inject 360° metadata to the output MP4 file using Spatial Media Metadata Injector and selecting My video is spherical (360).
10. Upload the 360° video to YouTube, Vimeo or Facebook.

Have a look at the demo videos below. You can pan the viewport during play using your mouse or W/A/S/D keys. The quality is not the best, but it could be improved using a smartphone with a better resolution camera or the Fishball.

Ziproxy vs Janus vs PageSpeed Module - comparison of compression proxies

Only 27% of the global population has access to a fast internet (over 10 Mbps) and hundreds of millions of people around the world have a limited Internet connection. This is where a data compression proxy (a.k.a. web accelerator) comes to the rescue. It optimizes loading of web pages by minimizing HTML/CSS/JS, enabling gzip compression, re-encoding images, etc.

Some time ago I was comparing proxies in the cloud: Mozilla Janus, Opera Turbo and Google Compression Proxy. Now I am testing open source HTTP forwarding proxies: Ziproxy, Mozilla Janus and Google PageSpeed Module (mod_pagespeed) for Apache with mod_proxy, all installed on my premise. This time the primary factor is not loading time, but total size of various web pages.

	Ziproxy	Janus	PageSpeed	Direct
ZDNet	1026 KB	1117 KB	802 KB	1225 KB
TheNextWeb	3768 KB	3638 KB	3672 KB	4156 KB
New Yorker	4528 KB	4872 KB	4782 KB	5357 KB
AntyWeb	1258 KB	2750 KB	1928 KB	3493 KB
iStockPhoto	2905 KB	3699 KB	3444 KB	3756 KB
Total	13485 KB (25% saved)	16076 KB (11% saved)	14628 KB (19% saved)	17987 KB

The best compressing HTTP proxy is Ziproxy with 25% of data savings. The second place goes to Google PageSpeed with 19%. Mozilla Janus was the worst with only 11% saved.

All the proxies were tested with equal image quality settings (60%).

Google Chrome Data Saver extension leaked

Google Chrome for iOS and Android have been using Data Compression Proxy for a while. This feature has been brought to desktop thanks to the open source Data Compression Proxy extension by niu tech. Now Google is developing its own extension entitled Data Saver (codenamed Flywheel Desktop), screenshot of which has recently leaked:

UPDATE: The official extension is now available in Chrome Web Store.

You can also compare Chrome Compression Proxy with Opera Turbo and Mozilla Janus.

Source: crbug.com

Chrome Data Compression Proxy vs Mozilla Janus vs Opera Turbo

Most of web browser vendors provide a way to speed up browsing by using compression proxy. Opera has long been known for its Turbo/Off-road mode, Google Chrome has the Data Compression Proxy and Mozilla has recently introduced the Janus Proxy, which you can access system-wide using a PAC file at http://janus.allizom.org.

I have tested onload event times of various web pages using all three compression proxies and a direct 5 Mb/s connection over WiFi on my PC. Total times as well as Numion YourSpeed results are shown below:

	Chrome DCP	Mozilla Janus	Opera Turbo	Direct
ZDNet	11.5 s	24.5 s	11.4 s	11.1 s
CNN	14.3 s	20.0 s	12.2 s	10.7 s
BBC	7.3 s	27.3 s	11.7 s	6.6 s
NYtimes	6.5 s	10.7 s	6.1 s	5.6 s
eBay	8.7 s	14.5 s	7.8 s	8.1 s
Amazon	5.3 s	10.6 s	3 s	5 s
Pinterest	7.4 s	12 s	9.2 s	7.3 s
Wikipedia	3.8 s	6.3 s	3 s	3 s
Total	64.8 s	125.9 s	64.4 s	57.4 s
Numion YourSpeed	218 kb/s	119 kb/s	216 kb/s	308 kb/s

Surprisingly, the fastest is a direct Internet connection, but this would depend on your local bandwidth. Opera Turbo and Chrome Compression Proxy go head to head, both using WebP image format. The slowest is Janus, using MozJPEG instead.

Download Chrome Dev Editor developer pre-release

Chrome Dev Editor is a web development environment running as a packaged app inside Google Chrome. It is based on the open source project Spark developed by Google since November 2013 using the Dart language and Polymer elements. Chrome Dev Editor supports building JavaScript & Dart web apps, Chrome apps, Polymer elements and widgets. It is going to be officially announced at Google I/O 2014, but you can download the developer pre-release version 0.13 below. Keep in mind, that you use it at your own risk.

To install Chrome Dev Editor, you would probably need a developer channel of Google Chrome. Go to chrome://extensions, drag and drop the CRX file there. You will be asked to install the packaged app.

On the first run, the app could hang at a splash screen for a while:

 In the main window, you can click the wrench icon to check the settings:

You can create your new project, deploy it or clone the Git repository using the hamburger icon:

You can run the HTML file using the context menu or the play icon:

Chrome Dev Editor provides code autocompletion and highlighting:

It even provides an integrated web server and supports Web Starter Kit out of the box:

Download Chrome Dev Editor packaged app (CRX)



Disclaimer: This is an unofficial developer pre-release. I am not affiliated with Google.

Speed up your Google Chrome for desktop by using Data Compression Proxy

Google has added a Chrome Data Compression Proxy to its mobile Google Chrome browser for iOS and Android. Like Opera Turbo, it speeds up web browsing by greatly reducing size of transferred HTTP packets, by using a SPDY protocol, compressing resources, optimizing images to WEBP format and tunneling all traffic via secure HTTPS connection. Unfortunately, it has been available only to mobile users. Until now.

Browsing the net, I have just found an experimental Google Chrome extension, which brings Data Compression Proxy to desktop. This is an unofficial add-on, so it could potentially break some web pages or stop working some day, but for now it works great and accelerates web browsing significantly. What is more, it is open source, so anybody can check its source and contribute to it.

UPDATE: Google has released the official Data Saver extension for Chrome.

Download Data Saver from Chrome Web Store

The best Android browser is... Opera!

I have tested the most popular web browsers on Android Jelly Bean: Stock Android Browser, Google Chrome 29, Opera 16, Opera Mobile Classic 12.1, Mozilla Firefox 24 and Dolphin Browser 10 with Jetpack. While Opera and Opera Classic have an Off-road or Turbo mode, which speeds up loading websites, it was disabled for this test. Here is the comparison table, two best results are green:

Browser	Browsermark	Octane Benchmark	HTML5 Test	CSS3 Test
Stock Browser	2132	1175	327 + 14	45
Chrome	2240	1951	429 + 11	60
Opera	2650	2089	443 + 11	62
Opera Classic	1740	571	406 + 12	52
Firefox	2071	2253	426 + 10	58
Dolphin	2008	1544	471 + 3	57

The best Android web browser, in terms of performance and compliance to web standards, is the new Opera! However, Dolphin has the best support for HTML5 and Chrome with Firefox are almost as fast as Opera.

Alternatives to Google Instant Previews

A few days ago Google silently disabled Instant Previews in Google Search. It provided small thumbnails of search results, which you could quickly preview before loading the full web page. Here is a list of alternative extensions for Mozilla Firefox, Google Chrome and Opera web browser:

• SearchPreview for Firefox and Chrome
• CoolPreviews for Firefox and Chrome
• ezLinkPreview for Chrome
• Thumbshots for Firefox
• SearchenginePreview for Opera

What is your favorite one?

How to add Google+ Comments to any website

Google+ Comments is a social wigdet from Google, which works similar to Facebook Comments Box or Disqus. For now, it is available only for blogs on the Blogger platform. But here is an unofficial way to embed Google+ Comments on any website or blog:

1. Edit your website and add this HTML:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <g:comments
       href="[URL]"
       width="642"
       first_party_property="BLOGGER"
       view_type="FILTERED_POSTMOD">
   </g:comments>

   or a valid HTML5 version:
   

   <script src="https://apis.google.com/js/plusone.js">
   </script>
   <div class="g-comments"
       data-href="[URL]"
       data-width="642"
       data-first_party_property="BLOGGER"
       data-view_type="FILTERED_POSTMOD">
   </div>

2. If you want to insert a comments counter, add this HTML code instead of <g:comments>:
   

   <g:commentcount href="[URL]"></g:commentcount>

   or a valid HTML5 version instead of <div class="g-comments">:
   

   <div class="g-commentcount" data-href="[URL]"></div>

3. Replace [URL] with the URL of your web page and fit the width.
4. Link your web page to your Google+ profile.

If you prefer to load Google+ Comments dynamically, insert this HTML code:

<div id="comments"></div>
<script>
gapi.comments.render('comments', {
    href: window.location,
    width: '624',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>

Similarly with Google+ Comments Counter:

<div id="commentscounter"></div>
<script>
gapi.commentcount.render('commentscounter', {
    href: window.location
});
</script>

You can see it in action on the Google+ and Facebook Comments page.

How to use Google Drive as a free web hosting

Do you know that you can host your website for free using Google Drive? There are 4 simple steps you should follow in order to do that:

1. Go to your Google Drive and create a new folder.
2. Make this folder public, by selecting it on the list and clicking the Share button. Then choose Public on the web and click Save.
3. Upload your HTML, CSS, JS files and images to this folder. You can create subfolders too. The file named index.html will become the default page. Note: Google Drive doesn't support PHP, JSP or ASP scripts yet!
4. Look at the address bar and copy the folder ID, which comes at the end of the URL:
   
   https://drive.google.com/#folders/0BzEbtMoF6IXbaVN2Qmx1em9qS0k
   
   Then go to GDriv.es, paste the folder ID there and choose your own short name. After submitting the form, your website will be available under your alias:
   
   http://gdriv.es/<alias>
   
   For example:
   
   http://gdriv.es/cros

The above example is the Cr OS Linux website.

YQL as a free alternative to Google Translate, Google Finance and Google Weather API

Google has closed its free Google Translate API, Google Finance API and the unofficial Google Weather API, which many websites were dependent on. Fortunately, the Yahoo Query Language comes to their rescue. It takes SQL-like statements and provides data from many web services (like SQL tables) in JSON or XML format. You can use the following alternatives for Google APIs:

select * from yahoo.finance.quotes where symbol in ("YHOO","GOOG"); for Yahoo! Finance

select * from weather.bylocation where location='Chicago' and unit='f'; for Yahoo! Weather

select * from wunderground.forecast where location='Chicago'; for Weather Underground

select * from google.translate where q="This is a test" and target="de"; for Google Translate

Tutorials and examples of consuming YQL are provided on Yahoo! website.