How to deploy a HTML5 project on Google App Engine (http://appspot.com)

How to deploy a HTML5 project on Google App Engine (appspot.com)

Step-by-step tutorial showing how to use appspot.com to deploy and host your HTML5 projects.

Steps

1. Signup to Google App Engine
2. Download, install, and setup Eclipse IDE
3. Deploy your application

Before we get started, let me give you a few features that makes Google App Engine a really good alternative to you host your projects.

App Engine applications are easy to build, easy to maintain, and easy to scale as your traffic and data storage needs grow. With App Engine, there are no servers to maintain: You just upload your application, and it's ready to serve your users.

With App Engine, you only pay for what you use. There are no set-up costs and no recurring fees. The resources your application uses, such as storage and bandwidth, are measured by the gigabyte, and billed at competitive rates. You control the maximum amounts of resources your app can consume, so it always stays within your budget.

App Engine costs nothing to get started. All applications can use up to 1 GB of storage and enough CPU and bandwidth to support an efficient app serving around 5 million page views a month, absolutely free.

• Run your web applications on Google's infrastructure.
• Google App Engine is fully-integrated development environment
• You can serve your applications with your own domain (such as http://example.com), or you can use the App Engine domain for free (just like http://emersonestrella.appspot.com)
• You can use server side languages such as PHP, Java, Python, and Go.
• For storage on Google App Engine you can use the App Engine

1. Signup to Google App Engine (Appspot)

Go to http://appengine.google.com and signup to App Engine with your Google Account. After that you can create your application on Google App Engine using the Admin Console. Just click the button "Create Application"...

Fill up the form...

2. Download, install, and setup Eclipse

Go to http://www.eclipse.org/downloads/ and download the lasted version "Eclipse IDE for Java EE Developers"...

Then extract and execute the binary.

Next step is to configure Google Plug-in for Eclipse. Open the Eclipse IDE and go to "Help" -> "Install new software"...

Click in the "Add..." button to add a new update site and then fill the field location with one of the following urls based on the version of Eclipse you have installed:

• Eclipse 3.6: http://dl.google.com/eclipse/plugin/archive/3.2.4/3.6
• Eclipse 3.5: http://dl.google.com/eclipse/plugin/archive/3.1.2/3.5
• Eclipse 3.4: http://dl.google.com/eclipse/plugin/archive/2.3.3/3.4

After you add the new update site you can go back to "Help" -> "Install new software" and select the Google Plugin Update Site from the list...

... a list of available plugins and tools will be populated. Choose the "Google Plugin for Eclipse" and click "Next >". After that restart Eclipse and the Google Plugin will be available.

3. Deploy your application

Create a new project on Eclipse to "hold" your application. To do that go to "File" -> "New Project" -> "Google" -> "Web Application Project"...

Add the project files under the folder "war" that is inside your project folder on Eclipse Workspace.

Before deploy your application to Google App Engine you have to link your Eclipse project to the application that you have created using the App Engine Console (Step #1). To do that you have to edit two little things in the file: "../war/WEB-INF/appengine-web.xml"

• Add the same name of the application you have created on App Engine Console between the application tag...
• <application>my-application</application>
• Add the application version number between the version tag...
• <version>0.1</version>

Now you're ready to deploy your application. Sign in with your Google Account by clicking in the bottom right button "Sign in to Google"...

And finally, click on the Google button in the menu bar and choose the option: "Deploy to App Engine"...

After that the upload process will start and in a few seconds your application will be available on Google App Engine.

That is all. Hope that help you guys who are wondering how to use Google App Engine. If you find any problem during this process, please leave a comment. Thanks!

Focus on process, not outcome

Focus on process, not outcome

By default we tend to be forward-looking, goal-pursuing, results-focused.

But focusing on process rather than outcome is a much better strategy. Why?

• It eliminates the noise of external factors.
• It encourages experimentation.
• It lets you enjoy the process more.
• And you also enjoy and benefit more from the outcomes.

by Tom Murcko

HTML5 Shape Puzzle - HTML5 Version of the game the preschool kids love

HTML5 Shape Puzzle - HTML5 Version of the game the preschool kids love

Including music, sound, touch support, responsive design, and 20 stages

http://shapepuzzle.appspot.com

HTML5 Shape Puzzle Game

How to grab YouTube playback video files

How to grab YouTube playback video files

Step-by-step tutorial showing how to get all available video source files from a video on YouTube using only Javascript. No plugins and/or server side scripts are required.

First of all I want to list here a few benefits from being able to do that.

1. You can download any video from YouTube without plugins or server-side scripts. You just need a browser.
2. You can use YouTube as an encoder. Let's say you have to convert a FLV video to MP4 or
   WebM.
3. You can set a cron job to run once a week to download all available video files from any channel.
4. You can play any YouTube video out of the YouTube player (not recommend).
5. You can play YouTube videos on HTML5 canvas and go crazy! Check this out at: http://videopuzzle.possum-cms.com

How to do it

Live demo: http://keepvideos.possum-cms.com or http://keepvideos.appspot.com

Source code: https://github.com/edse/keepvideos

Step 1: Extract YouTube video ID from URL

  var url = 'http://www.youtube.com/watch?v=yntfUjenls0';  
  var video_id = '';  
  var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;  
  var match = url.match(regExp);  
  if(match){  
   video_id = match[1];  
  }  

Step 2: Request YouTube playback files information

Easy as pie. Just make an Ajax request to: http://www.youtube.com/get_video_info sending the desired video ID...

  $.ajax({  
   url: "http://www.youtube.com/get_video_info?video_id="+video_id,  
   dataType: "text"  
  }).done(function(data) {  
   ...  
  });  

Step 3: Parse the response data information from YouTube

The information that we are looking for is "url_encoded_fmt_stream_map". This variable contains all streams available for the requested movie.

 function(data) {  
  var info = {};  
  parse_str(data, info);  
  var streams = explode(',', info['url_encoded_fmt_stream_map']);  
  ...  

Step 4: Trick. Parse again each one of the streams

YouTube encode the information twice, so you have to parse it again.
There is other trick here, You also have to add a signature value on each stream url, otherwise it won't work.

  var results = [];  
  for(var i=0; i<streams.length; i++){  
   var real_stream = {};  
   parse_str(streams[i], real_stream);  
   real_stream['url'] += '&signature=' + real_stream['sig'];  
   results.push(real_stream);  
  }  

Step 5: Have fun!

By now you should have a variable "results" with all YouTube video files available for the requested movie.

You can do whatever you want with the files. For example: display a link, play the video, grab snap shots of the video... Have fun!

To display the a link for each video file available...

   if(results.length > 0){  
    $.each(results, function(index, value) {  
     $('#results').append('<a href="'+value.url+'">'+value.quality+' - '+value.type</a>');  
    });  
   }  

How to play a video on HTML5 canvas tag

How to play a video on HTML5 canvas tag

Step-by-step tutorial on how to play a video on HTML5 canvas tag

LIVE DEMO

First you need a video file. Actually, two. One video file in ogg format (for Chrome and Firefox) and the other one in mp4 format (for Safari). To get any video in these file formats you can use a website like www.online-convert.com or www.mediaconverter.org.

Once you have the video files, the next step is to create a simple HTML page with one canvas tag, and one video tag. Just like the code below.

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 </head>  
 <body>  
  <video id="video" autoplay="true" loop="true">  
   <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
   <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
  </video>  
  <canvas id="canvas"></canvas>  
 </body>  
 </html>  

Right now, you should be able to test the video and check if it is playing well on Chrome Safari and Firefox.

Next, we add some CSS and a new hidden div wrapping the video tag.

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 </head>  
 <body>  
  <video id="video" autoplay="true" loop="true">  
   <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
   <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
  </video>  
  <canvas id="canvas"></canvas>  
 </body>  
 </html>  

Since we will be rendering the video on canvas, we need to make the video hidden. But we will be using the audio from the video tag.

Now the only missing piece is the javascript that renders the video on canvas. To do this we need to grab a image from the video and then paint this image on canvas. If we repeat this process every X milliseconds... TA-DA! We have the video playing on canvas.

Here is the full source code:

 <!DOCTYPE html>  
 <head>  
 <title>Playing YouTube video on HTML5 canvas</title>  
 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />  
 <style type="text/css">  
  html, body {  
   width: 100%;  
   height: 100%;  
   padding: 0px;  
   margin: 0px;  
  }  
  #canvas {  
   padding: 0px;  
   margin: 0px;  
   top:0;  
   left:0;  
   z-index: 30;  
   position: absolute;  
   width: 100%;  
   height: 100%;  
  }  
 </style>  
 </head>  
 <body>  
  <div style="display: none;">  
   <video id="video" autoplay="true" loop="true">  
    <source src="./video/BigBuckBunny_640x360.ogv" type="video/ogg" />  
    <source src="./video/BigBuckBunny_640x360.mp4" type="video/mp4" />  
   </video>  
  </div>  
  <canvas id="canvas"></canvas>  
  <script>  
  document.addEventListener('DOMContentLoaded', function(){  
   var v = document.getElementById('video');  
   var canvas = document.getElementById('canvas');  
   var context = canvas.getContext('2d');  
   //var cw = Math.floor(canvas.clientWidth / 100);  
   //var ch = Math.floor(canvas.clientHeight / 100);  
   var cw = Math.floor(canvas.clientWidth);  
   var ch = Math.floor(canvas.clientHeight);  
   canvas.width = cw;  
   canvas.height = ch;  
   v.addEventListener('play', function(){  
    draw(this,context,cw,ch);  
   },false);  
  },false);  
  function draw(v,c,w,h) {  
   if(v.paused || v.ended) return false;  
   c.drawImage(v,0,0,w,h);  
   setTimeout(draw,20,v,c,w,h);  
  }  
  </script>  
 </body>  
 </html>  

If you want to play a video from YouTube, check this tutorial: Playing YouTube videos on HTML5 canvas with Javascript.

If you want to download a video from YouTube, check this one: Download YouTube video files with Javascript

Next, I'll show you how to make a simple HTML5 game puzzle. Stay tuned!

Download YouTube video files with Javascript

UPDATED! 

Check the new blog post: http://coding-everyday.blogspot.com/2013/03/how-to-grab-youtube-playback-video-files.html

Live demo: http://keepvideos.possum-cms.com or http://keepvideos.appspot.com

---

Download YouTube video files with Javascript

How to download YouTube videos files with Javascript only! Is it possible?

YES! It is possible! And without relying in any kind of server side scripts!

LIVE DEMO: KeepVideos

Libraries needed to do this:

• jQuery

Step-by-step: Downloading YouTube videos with Javascript.

• Part 1: Get the YouTube video URL from an input and validate the URL using regular expression. 

  var url = $('#url').val();  
  var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;  
  var match = url.match(regExp);  
  if(match){  
   $('#download-btn').fadeOut('fast');  
   $('#loading').fadeIn('slow');  
   setTimeout("getVideo('"+match[1]+"')",2000);  
  }  
  else{  
   alert('Invalid URL!');  
   $('#url').val("");  
   $('#url').focus();  
  }  

• Part 2: Retrive raw video information from YouTube
• Make an Ajax call to http://www.youtube.com/get_video_info?video_id=XXX
  
  

   $.ajax({  
    url: "http://www.youtube.com/get_video_info?video_id="+id,  
    dataType: "text"  
   }).done(function(data) {
    ...  




• Part 3: Prepare information to be parsed. We need to do 3 things:
• a) Replace all occurrences of the character "\" to "%20"
  
  

   data = (data+'').replace(/\+/g, '%20');  
  

  
  
• b) Replace all occurrences of the string "url%3D" to "\n\r<break>"
  
  

   data = data.replace(/url%3D/g, '\n\r\n\r<break>');  
  

  
  
• c) Replace all occurrences of the string "sig%3D" to "signature%3D"
  
  

   data = data.replace(/sig%3D/g, 'signature%3D');  
  




• Part 4: Grab all files URLs from this YouTube video

  var urls = data.split('<break>');   
  for(var u = 0; u < urls.length; u++){   
  var result = {};   
  ...   
  }   

• Part 5: Prepare each URL to be parsed
• a) Decode the URL
  
  

   decodeURIComponent((urls[u]+'')  
  

• b) Replace all occurrences of the character "\" to "%20"
  
  

   url = url.replace(/\+/g, '%20');  
  

• c) Unescape the result twice
  
  

   url = unescape(unescape(url));  
  

• d) Replace all occurrences of the string '="' to '%3D%22'
  
  

   url = url.replace(/="/g, '%3D%22');  
  

• e) Replace all occurrences of the character '"' to "%22"
  
  

   url = url.replace(/"/g, '%22');  

• Part 6: Return a list for the videos URLs present in the YouTube results.
• a) Parse all variables present in each URL
  
  

   var vars = [], hash;  
   var hashes = d.slice(d.indexOf('?') + 1).split('&');  
   for(var i = 0; i < hashes.length; i++){  
    hash = hashes[i].split('=');  
    vars.push(hash[0]);  
    vars[hash[0]] = unescape(hash[1]);  
   }  
  

• b) Grab the video type and codecs from the URL parameters
  
  

   if(vars['type']!=undefined){  
    result.type = vars['type'];  
    if(vars['type'].indexOf("codecs")>0){  
     var cs = vars['type'].split(';+codecs="');  
     result.type = cs[0];  
     result.codecs = cs[1].replace('"','').replace('+',' ');  
    }  
   }  
  

• c) Grab the video quality from the URL parameters
  
  

   //quality  
   if(vars['quality']!=undefined){  
    result.quality = vars['quality'];  
    if(vars['quality'].indexOf(",")>0){  
     var cs = vars['quality'].split(',');  
     result.quality = cs[0];  
    }  
   }  

That is it. Now you have all information needed in the result object. Here is the full source-code:

 /* Author: Emerson Estrella */  
 $('#again').click(function() {  
  $('#hero2').fadeOut('fast');$('#hero1').fadeIn('slow');  
 });  
 $('#form').submit(function() {  
  var url = $('#url').val();  
  var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;  
  var match = url.match(regExp);  
  if(match){  
   $('#download-btn').fadeOut('fast');  
   $('#loading').fadeIn('slow');  
   setTimeout("getVideo('"+match[1]+"')",2000);  
  }  
  else{  
   alert('Invalid URL!');  
   $('#url').val("");  
   $('#url').focus();  
  }  
  return false;  
 });  
 function getVideo(youtube_video_id){  
  var id = "b4VsluhWVh8";  
  id = youtube_video_id;  
  $.ajax({  
   url: "http://www.youtube.com/get_video_info?video_id="+id,  
   dataType: "text"  
  }).done(function(data) {  
   var results = [];  
   var r = 0;  
   data = (data+'').replace(/\+/g, '%20');  
   data = data.replace(/url%3D/g, '\n\r\n\r<break>');  
   data = data.replace(/sig%3D/g, 'signature%3D');  
   var urls = data.split('<break>');  
   for(var u = 0; u < urls.length; u++){  
    var result = {};  
    var d = unescape(unescape(decodeURIComponent((urls[u]+'').replace(/\+/g, '%20'))));  
    d = d.replace(/="/g, '%3D%22');  
    d = d.replace(/"/g, '%22');  
    var url = d;  
    //console.log(d);  
    //console.log(d.length);  
    if(d.length > 1500){  
     aux = d.split('&has_cc');  
     d = aux[0];  
    }  
    var vars = [], hash;  
    var hashes = d.slice(d.indexOf('?') + 1).split('&');  
    for(var i = 0; i < hashes.length; i++){  
     hash = hashes[i].split('=');  
     vars.push(hash[0]);  
     vars[hash[0]] = unescape(hash[1]);  
    }  
    if(vars['type']!=undefined){  
     result.type = vars['type'];  
     if(vars['type'].indexOf("codecs")>0){  
      var cs = vars['type'].split(';+codecs="');  
      result.type = cs[0];  
      result.codecs = cs[1].replace('"','').replace('+',' ');  
     }  
    }  
    //quality  
    if(vars['quality']!=undefined){  
     result.quality = vars['quality'];  
     if(vars['quality'].indexOf(",")>0){  
      var cs = vars['quality'].split(',');  
      result.quality = cs[0];  
     }  
    }  
    if(result.type && result.quality){  
     result.url = url;  
     results[r] = result;  
     r++;  
    }  
   }  
   //console.log(results);  
   //print results  
   var html = '';  
   html += '<h4 class="alert-heading" style="margin-top: 25px;">All video files found for your request</h4>';  
   html += '<a id="again" style="margin-top: 25px;" class="btn btn-small btn-danger" href="#main" onclick="$(\'#hero2\').fadeOut(\'fast\');$(\'#hero1\').fadeIn(\'slow\');"><i class="icon-repeat icon-white"></i> Make Another Request</a>';  
   html += '<table class="table table-striped musica" style="background: rgba(255,255,255,0.7); margin-top:25px;"><thead><tr><th>Quality</th><th>Format</th><th>Codecs</th><th style="text-align: right;"></th></tr></thead><tbody>';  
   $.each(results, function(index, value) {  
    html += '\n\r<tr>';  
    html += '<td>'+value.quality+'</td>';  
    html += '<td>'+value.type+'</td>';  
    if(value.codecs!=undefined)  
     html += '<td>'+value.codecs+'</td>';  
    else  
     html += '<td>N/A</td>';  
    html += '<td><a class="btn btn-success pull-left" href="'+value.url+'" style="margin-right: 15px;"><i class="icon-download-alt icon-white"></i> Download this video format file</a></td>';  
    html += '</tr>\n\r';  
   });  
   html += '</tbody></table><a style="margin-top: 10px; margin-bottom: 25px;" class="btn btn-small btn-danger" href="#main" onclick="$(\'#hero2\').fadeOut(\'fast\');$(\'#hero1\').fadeIn(\'slow\');"><i class="icon-repeat icon-white"></i> Make Another Request</a>';  
   $('#vid').html(html);  
   $('#vid').fadeIn('slow');  
   $('#loading').hide();  
   $('#hero1').hide();  
   $('#hero2').fadeIn('slow');  
   $('#download-btn').show();  
  });  
 }  

LIVE DEMO: KeepVideos

In the next post I'll explain how to Download YouTube video files from a server side script like PHP. Stay tuned!

Playing YouTube videos on HTML5 canvas with Javascript

Playing YouTube videos on HTML5 canvas with Javascript

How to play YouTube videos on HTML5 canvas tag

This blog post is coming soon. Stay tuned!