Always On, Always Connected Week 4 - Location and Mobile Media

Location

Cordova leverages the HTML5 Geolocation capabilities with the following plugin: https://github.com/apache/cordova-plugin-geolocation Install it:

cordova plugin add cordova-plugin-geolocation

Example:

if (navigator.geolocation) {

	navigator.geolocation.watchPosition(successCallback, errorCallback, {});

	function successCallback(currentPosition) {
		var lat = currentPosition.coords.latitude;
		var lon = currentPosition.coords.longitude;

		console.log(lat + " " + lon);				
	}
	
	function errorCallback(e) {
		console.log(e);
	}
}

Map

Basic Google Maps Usage (static maps)

var mapElem = document.getElementById('map');
mapElem.innerHTML = '<img src="http://maps.googleapis.com/maps/api/staticmap?markers=' + lat + ',' + long + '&zoom=20&size=300x300&sensor=false" />';

Google Maps JavaScript API v3

Google Maps JavaScript API v3

To use, first visit the API console, create a new project, enable the service, and retrieve the simple API key.

Three things to add to your code to use:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

var mapOptions = {
  center: { lat: -34.397, lng: 150.644},
  zoom: 8
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

<div id="map-canvas"></div>

Mobile Media

What is the world's best camera?

Mobile phones have cameras built in that rival the best point and shoot cameras out there. Some even have optical zoom, built-in flashes and so on.

Not only capture but … (capture, storage, editing, viewing, sharing)

Impossible before, possible now:

Polaroid Android and Samsung Galaxy Camera

Say, Can You Make Phone Calls on That Camera?

Phone with Thermal Camera

HDR 35 Fantastic HDR Pictures

Instagram

Vine and Vinepeek

Snapchat

What about?

Cameras, the new lighter

The rise of the camera-phone
Everywhere you go, there are people with camera-phones - many of us record, document, and upload the minutae of our lives. But, ultimately, should we be doing it just because we can?

Why are we compelled to document everything? Are we missing anything in the process?

What about privacy? Activism/Protest? Surveillance?
Illicit photos?

Vancouver Riot Identify Suspects
Arab Spring
How to Remove Location Information from Mobile Photo

PhoneGap Media APIs

Displaying Images

Image Tag

	
<img src="img/scene.jpg">

You'll probably also want to style it

<style>
	#mypicture {
		width: 90%;
		height: auto;
	}
</style>

<img id="mypicture" src="img/scene.jpg">

Base64 URL Encoding

One relatively new thing is using Data URLs which allow you to have images inline with HTML and also more accessible via JavaScript

<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." />

Capturing Pictures with PhoneGap

Using the Camera plugin. First add it to the project

phonegap cordova plugin add cordova-plugin-camera

Then you can use it in your JavaScript:

function onDeviceReady() {
	alert("Device Ready");		
    takePicture();
}	

function takePicture() {

	navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
    	destinationType: Camera.DestinationType.FILE_URI
	});
}

function onSuccess(imageData) {
    var image = document.getElementById('mypicture');
    //image.src = "data:image/jpeg;base64," + imageData;
    console.log(imageData);
    image.src = imageData;

}

function onFail(message) {
    alert('Failed because: ' + message);
}

Options

There are a lot of differnt options that you can pass in the "getPicture" function. For instance you can use

  destinationType : Camera.DestinationType.DATA_URL

to get a data url instead of a file path. You can use

sourceType: Camera.PictureSourceType.PHOTOLIBRARY

to get a picture from the library/gallery rather than from the camera.

Manipulating Photos

Assuming you have a "canvas" element, you could draw the image to it and then manipulate it there

var canvas = document.getElementById("canvas_id");
var ctx = canvas.getContext("2d");

var image = new Image();
	// This should be the data url of the image you just captured
	image.src = "data:image/jpg;base64,iVBORw0KGgoAAAANSUhEUgAA...";
	image.onload = function() {
    ctx.drawImage(image, 0, 0);
};

Capturing Video with PhoneGap Media-Capture Plugin

There is a built-in plugin: Media Capture

phonegap cordova plugin add cordova-plugin-media-capture

Here is some simple JavaScript which illustrates it's use:

function onDeviceReady() {
	alert("Device Ready");		

	// start video capture
	navigator.device.capture.captureVideo(captureSuccess, captureError, {limit:1});
}	

function captureSuccess(mediaFiles) {
	// An array of media files is returned.  In this case, only interested in the first one.

	console.log(mediaFiles[0].fullPath);
	// Use JQuery to add a "src" attribute to the video tag and play it.
	$("#myvideo").attr("src", mediaFiles[0].fullPath).get(0).play();
}

function captureError(error) {
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
}

Capturing Video with VideoCapturePlus Plugin

VideoCapture Plus is a 3rd party plugin is pretty nice and adds some features on the media-capture one Install it:

phonegap cordova plugin add https://github.com/EddyVerbruggen/VideoCapturePlus-PhoneGap-Plugin.git
phonegap cordova prepare

Import it into your index.html (don't forget to copy the file):

<script type="text/javascript" src="js/VideoCapturePlus.js"></script>

Here is some JavaScript (requires three divs, with ids "video_container", "video_meta_container", and "video_meta_container2"):

				
function captureSuccess(mediaFiles) {
	mediaFile = mediaFiles[0];
	console.log(mediaFile.fullPath);
	
	mediaFile.getFormatData(getFormatDataSuccess, getFormatDataError);

	// This time we'll create a video element the normal way
    var vid = document.createElement('video');
    vid.id = "theVideo";
    vid.width = "240";
    vid.height = "160";
    vid.controls = "controls";
    
    var source_vid = document.createElement('source');
    source_vid.id = "theSource";
    source_vid.src = mediaFile.fullPath;
    vid.appendChild(source_vid);

    document.getElementById('video_container').innerHTML = '';
    document.getElementById('video_container').appendChild(vid);
    document.getElementById('video_meta_container2').innerHTML = parseInt(mediaFile.size / 1000) + 'KB ' + mediaFile.type;	
}

function getFormatDataSuccess(mediaFileData) {
  document.getElementById('video_meta_container').innerHTML = mediaFileData.duration + ' seconds, ' + mediaFileData.width + ' x ' + mediaFileData.height;
}

function getFormatDataError(error) {
  alert('A Format Data Error occurred during getFormatData: ' + error.code);
}

function captureError(error) {
    navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
}

Media File Uploads

This PHP script receives uploaded media files and saves them to a directory on a server: uploader.php.zip Once that is in place you can use the File Transfer plugin to perform an upload:

	
  function uploadFile(mediaFile) {
            var ft = new FileTransfer(),
            path = mediaFile.fullPath,
            name = mediaFile.name;

            ft.upload(path,
                      "http://www.yourdomain.com/path/to/uploader.php",
                      function(result) {
	                      console.log('Upload success: ' + result.responseCode);
    	                  console.log(result.bytesSent + ' bytes sent');
        	        	},
                      function(error) {
                      console.log('Error uploading file ' + path + ': ' + error.code);
                      	},
                      { fileName: name, fileKey: 'bytes', mimeType: 'video/3gpp' });
        }