By
As discussed and shown in Mozilla’s Boot to Gecko – The Web is the Platform and Gaia, Mozilla’s user interface for Boot to Gecko, the web is becoming a very powerful platform! Therefore I want to introduce you to two exciting APIs, from our WebAPI initiative: WebTelephony and WebSMS.
WebTelephony
The basis of accessing the phone functionality is simply through navigator.mozTelephony. Once you have a reference to that object you can start placing and recieving calls. Here are a few examples:
// Telephony object
var 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 call
var call = tel.dial("123456789");
// Events for that call
call.onstatechange = function (event) {
/*
Possible values for state:
"dialing", "ringing", "busy", "connecting", "connected",
"disconnecting", "disconnected", "incoming"
*/
console.log(event.state);
};
// Above options as direct events
call.onconnected = function () {
// Call was connected
};
call.ondisconnected = function () {
// Call was disconnected
};
// Receiving a call
tel.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 call
call.hangUp();
// Iterating over calls, and taking action depending on their changed status
tel.oncallschanged = function (event) {
tel.calls.forEach(function (call) {
// Log the state of each call
console.log(call.state);
});
};
Telephony is currently available from the dialer and homescreen in Gaia.
WebSMS
Another part of core functionality in a mobile phone is sending and receiving SMS messages. Here is how to do that:
// SMS object
var sms = navigator.mozSMS;
// Send a message
sms.send("123456789", "Hello world!");
// Recieve a message
sms.onrecieved = function (event) {
// Read message
console.log(event.message);
};
Hack and contribute
If you are interested in delving more into this and its inner workings, I recommend checking out Mozilla’s user interface for Boot to Gecko, Gaia. In there, you can take a look at the dialer.js file and the sms.js file.
And if you think using your web technology skills for developing and customizing mobile phones as well, don’t hesitate to check out and contribute to Gaia!
About Robert Nyman [Editor emeritus]
Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.
12 comments