Intro

I recently recorded a demo of Webex Calling Site Survivability, in which I was showing in (near) real-time the displays of Cisco IP Phones inside a browser frame.

It turns out people liked this little trick, so I’m making it available to the public. In the screenshots below you get the idea of what the end result looks like (the content of the display is the actual content of the physical phone to which the frame is connected to).

Sample Phone 7821

Sample Phone 8841

The two templates are for the 7821 and 8841/8851/8861, but are easily extendable to more phone models.

Visualize your Phone!

Just fill the values below (phone model and IP address):

Which phone do you have:

Disclaimer

Part 1

I’m not a front–end developer, so please consider this for what it is: a quick hack that I built in a couple of hours to make the demo more compelling and visually pleasing.

I’m certain there are better ways to tackle this problem, so if you have ideas for improvement: this is an open repository on GitHub, all contributions are welcome 😉

Part 2

Before someone brings this up: I know there is an SDK that allows screenshot capturing, but I could not use the remote SDK in my particular lab environment. If you want to enhance the templates to account for that, that would be really cool.

Self Host on Your Server

Requirements

The setup has been tested with MPP firmware 11.3 and early versions of 12.0 as of March 2023. It is possible that future changes in the firmware could make this setup unusable.

  1. The phones must not have password-restricted admin access (Note: all phones running on Webex Calling are password restricted);
  2. You must have direct network connectivity to the phone’s web interface.

Note

Phones do not allow for a refresh shorter than approximately 2 seconds. So keep in mind the display will necessarily exibit some lag between any action taken on the phone and the corresponding reflection on the screenshot.

Instructions

  1. Store the templates with the respective frame pictures in a folder on your web server;
  2. Start serving the page templates from your web server of choice (also a local python http server will do just fine);
  3. Open the URL destination of your page by adding the URL parameter “ip=nn.nn.nn.nn”, where nn.nn.nn.nn is the IP address of the IP Phone.

Example

http://webserver/7821.html?ip=192.0.2.1

In this example 192.0.2.1 is the IPv4 address of the phone in your network.

Note

The phone might not serve the request if there is a Referer header in it. To work around this I originally changed the network.http.sendRefererHeader flag in Firefox (or any equivalent mechanism in Chromium), but this is not necessary anymore thanks to an improvement in the template related to referrer policies in HTML.

About the Phone Images

Phone images are sourced from Cisco Brand Exchange Public Collection and as such are here “Courtesy of Cisco Systems, Inc. Unauthorized use not permitted.”. The full license is available in Cisco-bx-license.txt inside this repository.

Call to Action

If you have interest in expanding the use of these templates to more IP Phone models, please submit your templates to the community repo, so all can benefit. Ideally the template should be composed of the html page and the phone frame png file.

Where to find the repo

Click here to access the repository ⬅️

For comments or suggestions please contact me, or open an issue in github 🚧
👋