sipML5 Demo Chrome Packaged App

[James Mortensen]

Hello,

https://github.com/jamesmortensen/sipML5-chrome-app

I have included a Chrome Packaged App I'd like to share, which uses a slightly modified sipML5 codebase to ensure it will run in Chrome's sandboxed environment and use the correct storage APIs for whatever environment sipML5 is running in.  I'm really hoping the changes I made to the sipML5 codebase can eventually be incorporated into the main tree, as this will make it easier for extension developers and Web developers to work together with this evolving codebase.

Here is a summary of changes:

• Created a storageAPI.js wrapper around all window.localStorage calls in sipML5 called "storageAPI". The JavaScript will determine at runtime whether or not sipML5 is running in the browser or if it's running in a Chrome Packaged app. If it's in the browser, all storage API calls use window.localStorage. If it's an extension/app, it uses chrome.storage.local APIs and passes the stored data from the app to the sandboxed environment.
  

• Moved all of the inline JavaScript from the call.htm and the expert.htm file to new JavaScript files called sipml5-api-util.js and expert.js.  Chrome's new manifest version 2 requires that all code be included in separate JS files.
  

• Created a wrapper HTML file to switch between the softphone and expert mode, since navigation in packaged apps is disabled, or at least very tricky.
  

I verified that I can make calls from Canary both with the code installed as an app as well as by hosting the code on an HTTP server.  No modifications were needed to switch from using the sipML5 code via HTTP or inside a Packaged App.  These changes are helpful for the following reasons:

Benefits:

• Web developers will still seamlessly use and update sipML5, without modifications.
  
• Extension developers will also be able to use sipML5, without modifications, when the sipML5 library is updated.
  

Instructions:

• First, if you do not have Canary, you can get it here:  https://tools.google.com/dlpage/chromesxs
  
• Launch Canary.  
  
• In your address bar, go to chrome://flags
  
• Make sure the following API's are enabled:  MediaSource, PeerConnection, Experimental APIs.
  
• Restart the browser if you had to make changes to the flags.
  
• In the "Tools" menu, select "Extensions" 
  
• In the Extensions Manager, at the top, make sure "Developer Mode" is checked.
  
• Click "Load unpacked extension..."
  
• Browse to the location where you extracted the extension tarball and install.  
  

If everything goes fine, you should see an icon on the "chrome://newtab" page, which you can get to simply by opening a new tab and making sure "Apps" is selected in the footer.  Launch the app.

If all goes well, and you've been following along with the sipML5 development, you should see the sipML5 softphone client in it's own window.  Use the "Expert Mode" button at the top instead of the one below the registration panel.

Please let me know your feedback or if there are any questions or problems.

James

[Mamadou]

cool :)
I've some questions:
- Why do you suggest chrome canary (not stable and buggy) instead of stable?
- Are you planning to add it to chrome store?
- Where could we download the extension tarball?

--
 
 

[Mamadou]

Managed to get It working on canary (24.0.1292.1) but not in stable (22.0.1229.94 m). Nothing happens when I click on the app icon.
Is it possible to remove the scrollbars?

--
 
 

[James Mortensen]

For anyone asking about tarballs, it looks like Github automatically provides them via the download tab:  https://github.com/jamesmortensen/sipML5-chrome-app/downloads   

Also, per Mamadou's suggestion, I added overflow: hidden to remove all of the scrollbars when the code is loaded in the Packaged App.

As an aside, if you load /call.htm and /expert.htm from Chrome Stable from a Web Server, you can make calls to/from Chrome Stable.  Really, I think the only thing preventing the code from running as an app in Stable is the fact that the new Packaged App API is only available in newer versions of Chrome.

James

[James Mortensen]

Hi Mamadou,

I pushed up some changes to make the app work in Chrome stable.  The onLaunched event is part of the experimental APIs in Chrome 22.  Here is what needs to go in main.js to fix the problem:

if(chrome.experimental.app.onLaunched) {

  // Chrome v22

  chrome.experimental.app.onLaunched.addListener(function() {

    chrome.app.window.create('mainpage.html',

      {width: 1190, height: 709});

  });

} else {

  // Chrome v24

  chrome.app.runtime.onLaunched.addListener(function() {

    chrome.app.window.create('mainpage.html',

      {width: 1190, height: 709});

  });

}

James