JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires
Upcoming SlideShare
Loading in...5
×
 

JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires

on

  • 2,576 views

 

Statistics

Views

Total Views
2,576
Views on SlideShare
2,561
Embed Views
15

Actions

Likes
3
Downloads
11
Comments
0

4 Embeds 15

http://lanyrd.com 7
http://us-w1.rockmelt.com 5
https://twitter.com 2
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires JavaScript APIs - The Web is the Platform - MozCamp, Buenos Aires Presentation Transcript

  • JavaScript APIs - The Web is the Platform
  • @robertnyman@mozhacks
  • pdf.js
  • Fullscreen
  • <button id="view-fullscreen">Fullscreen</button><script type="text/javascript">(function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); }})(); </script>
  • mozRequestFullScreenWithKeys?
  • html:-moz-full-screen { background: red;}html:-webkit-full-screen { background: red;}
  • Camera
  • <input type="file" id="take-picture" accept="image/*">
  • takePicture.onchange = function (event) { // Get a reference to the taken picture or chosen file var files = event.target.files, file; if (files && files.length > 0) { file = files[0]; // Get window.URL object var URL = window.URL || window.webkitURL; // Create ObjectURL var imgURL = URL.createObjectURL(file); // Set img src to ObjectURL showPicture.src = imgURL; // Revoke ObjectURL URL.revokeObjectURL(imgURL); }};
  • WebRTC
  • var liveVideo = document.querySelector("#live-video");navigator.getUserMedia( {video: true}, function (stream) { liveVideo.src = stream; }, function (error) { console.log("An error occurred: " + error); });
  • Pointer Lock API
  • var docElm = document.documentElement;// Requesting Pointer LockdocElm.requestPointerLock = elem.requestPointerLock || elem.mozRequestPointerLock || elem.webkitRequestPointerLock;docElm.requestPointerLock();
  • document.addEventListener("mousemove", function(e) { var movementX = e.movementX || e.mozMovementX || e.webkitMovementX || 0, movementY = e.movementY || e.mozMovementY || e.webkitMovementY || 0; // Print the mouse movement delta values console.log("movementX=" + movementX, "movementY="+ movementY);}, false);
  • IndexedDB
  • // IndexedDBvar indexedDB = window.indexedDB || window.webkitIndexedDB ||window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction || window.OIDBTransaction ||window.msIDBTransaction, dbVersion = 1;// Create/open databasevar request = indexedDB.open("elephantFiles", dbVersion);
  • createObjectStore = function (dataBase) { // Create an objectStore dataBase.createObjectStore("elephants");}// Currently only in latest Firefox versionsrequest.onupgradeneeded = function (event) { createObjectStore(event.target.result);};
  • request.onsuccess = function (event) { // Create XHR var xhr = new XMLHttpRequest(), blob; xhr.open("GET", "elephant.png", true); // Set the responseType to blob xhr.responseType = "blob"; xhr.addEventListener("load", function () { if (xhr.status === 200) { // Blob as response blob = xhr.response; // Put the received blob into IndexedDB putElephantInDb(blob); } }, false); // Send XHR xhr.send();}
  • putElephantInDb = function (blob) { // Open a transaction to the database var transaction = db.transaction(["elephants"], IDBTransaction.READ_WRITE); // Put the blob into the dabase var put = transaction.objectStore("elephants").put(blob, "image"); // Retrieve the file that was just stored transaction.objectStore("elephants").get("image").onsuccess = function (event) { var imgFile = event.target.result; // Get window.URL object var URL = window.URL || window.webkitURL; // Create and revoke ObjectURL var imgURL = URL.createObjectURL(imgFile); // Set img src to ObjectURL var imgElephant = document.getElementById("elephant"); imgElephant.setAttribute("src", imgURL); // Revoking ObjectURL URL.revokeObjectURL(imgURL); };};
  • Battery
  • // Get battery level in percentagevar batteryLevel = battery.level * 100 + "%";// Get whether device is charging or notvar chargingStatus = battery.charging;// Time until the device is fully chargedvar batteryCharged = battery.chargingTime;// Time until the device is dischargedvar batteryDischarged = battery.dischargingTime;
  • battery.addEventLister("levelchange", function () { // Devices battery level changed}, false);battery.addEventListener("chargingchange", function () { // Device got plugged in to power, or unplugged}, false);battery.addEventListener("chargingtimechange", function () { // Devices charging time changed}, false);battery.addEventListener("dischargingtimechange", function () { // Devices discharging time changed}, false);
  • Boot to Gecko
  • https://github.com/andreasgal/B2Ghttps://github.com/andreasgal/gaia
  • Telephony & SMS
  • // Telephony objectvar tel = navigator.mozTelephony;// Check if the phone is muted (read/write property)console.log(tel.muted);// Check if the speaker is enabled (read/write property)console.log(tel.speakerEnabled);// Place a callvar call = tel.dial("123456789");
  • // Receiving a calltel.onincoming = function (event) { var incomingCall = event.call; // Get the number of the incoming call console.log(incomingCall.number); // Answer the call incomingCall.answer();};// Disconnect a callcall.hangUp();
  • // SMS objectvar sms = navigator.mozSMS;// Send a messagesms.send("123456789", "Hello world!");// Receive a messagesms.onreceived = function (event) { // Read message console.log(event.message);};
  • Vibration
  • (function () { document.querySelector("#vibrate-one-second").addEventListener("click", function () { navigator.mozVibrate(1000); }, false); document.querySelector("#vibrate-twice").addEventListener("click", function () { navigator.mozVibrate([200, 100, 200, 100]); }, false); document.querySelector("#vibrate-long-time").addEventListener("click", function () { navigator.mozVibrate(5000); }, false); document.querySelector("#vibrate-off").addEventListener("click", function () { navigator.mozVibrate(0); }, false);})();
  • WebAPI
  • Dev tools
  • Try new things
  • "So we saved the worldtogether for a while,and that was lovely." -Lost
  • Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/