Silverlight solutions

How to add a webphone to a webpage (silverlight camera and mic access)



This article is a detailed guide about Silverlight webphone client-side technology provided by Ozeki VoIP SIP SDK. After reading through this page you will be fully familiar with all the essential terms concerning Silverlight technology in webphone solutions and what you will need for creating your own solution using Ozeki VoIP SIP SDK.


Microsoft Silverlight is a multimedia tool for displaying media streams mainly embedded in web pages. It has its own method set and can be programmed from Visual Studio. Silverlight is defined for multimedia display, therefore it has its own camera and microphone handler methods (Figure 1).

webphone solution silverlight camera-control
Figure 1 - Silverlight microphone and camera access

The basic problem with Silverlight peripheral handling is that it needs a direct user interaction to allow the reach of the microphone or the web cam.

The program code, you can download from this page uses the background support of Ozeki VoIP SIP SDK, therefore you will need to download and install the SDK on your computer before starting to use the program code. You will also need to have Visual Studio 2010 or compatible IDE and .NET Framework installed on your system, as the program code below is written in C# language.

Placing a Silverlight webphone on a web page

Placing a Silverlight display on a website needs some basic settings and script writing. You will have a little Javascript code for the Silverlight support and set some style information for the web page, then you can easily place your SL webphone on your site.

Figure 2 shows a basic .html site with a company logo and a Silverlight webphone placed on it.

silverlight webphone integration
Figure 2 - A simple example web page with a silverlight click to call webphone

For the example .html page, the style definitions are made inline, but you can also use them in a .css file. The Silverlight display style is defined using the following settings seen in Code 1.

#silverlightControlHost {
    height: 100%;

Code 1 - Style definition

As for the display support, the example .html file contains a Javascript code that can be seen in Code 2. The first script definition refers to a separate .js file that is defined by the Visual Studio for the webphone client. The second script is written inline and is used for Silverlight error handling. These scripts can be used without modification while building your own website, but make sure that you set the Silverlight.js file location properly.

<script type="text/javascript" src="Silverlight.js">
<script type="text/javascript">
        function onSilverlightError(sender, args) {
            var appSource = "";
            if (sender != null && sender != 0) {
              appSource = sender.getHost().Source;

            var errorType = args.ErrorType;
            var iErrorCode = args.ErrorCode;

            if (errorType == "ImageError" || errorType == "MediaError") {

            var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;

            errMsg += "Code: "+ iErrorCode + "    \n";
            errMsg += "Category: " + errorType + "       \n";
            errMsg += "Message: " + args.ErrorMessage + "     \n";

            if (errorType == "ParserError") {
                errMsg += "File: " + args.xamlFile + "     \n";
                errMsg += "Line: " + args.lineNumber + "     \n";
                errMsg += "Position: " + args.charPosition + "     \n";
            else if (errorType == "RuntimeError") {
                if (args.lineNumber != 0) {
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " +  args.charPosition + "     \n";
                errMsg += "MethodName: " + args.methodName + "     \n";

            throw new Error(errMsg);

Code 2 - Javascript support

You also need to place your Silverlight object on the site. Code 3 shows the .html code for this purpose. You can place it anywhere on your page and the webphone will be instantly usable when two clients are connected to the server.

In the object definition you need to set the Silverlight application type, the location of the .xap file to run and the event handler for the errors. This last one is the inline defined Javascript code that was mentioned before. You can also do some other settings, like changing the background color, setting the runtime environment version etc.

 <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
                  <param name="source" value="ClientBin/01_Webphone_Silverlight_Web2Web_Voice.xap"/>
                  <param name="onError" value="onSilverlightError" />
                  <param name="background" value="white" />
                  <param name="minRuntimeVersion" value="4.0.60310.0" />
                  <param name="autoUpgrade" value="true" />
                  <a href="" style="text-decoration:none">
                           <img src="" alt="Get Microsoft Silverlight" style="border-style:none"/>
            </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>

Code 3 - Putting the SL object on the page

The example program you can download from this page only supports web to web voice calls, but the website integration is the same for any Silverlight clients too.

If you have any questions or need assistance, please contact us at

You can select an Ozeki VoIP SIP SDK license for webphone development on Pricing and licensing information page

Related Pages

Operating system:
Development environment:
Programming language: C#.NET
Supported .NET framework:
Software development kit: (Download)
VoIP connection: 1 SIP account
System memory:
Free disk space:

More information