info@voip-sip-sdk.com Tel: +36 1 371 0150

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

Explanation

Prerequisities

Download: 01_Web2Web_Voice.zip

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.

Introduction

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).


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.


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%;
    text-align:center;
}

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") {
              return;
            }

            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="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60310.0" style="text-decoration:none">
                           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
                  </a>
            </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>

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 info@voip-sip-sdk.com

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

Related Pages

Operating system: Windows 10 Windows 8, Windows 7, Vista, 200x, XP
Development environment: Visual Studio 2012, Visual Studio 2010, Visual Studio 2008, Visual Studio 2005
Programming language: C#.NET
Supported .NET framework: .NET Framework 4.5, .NET Framework 4.0, .NET Framework 3.5 SP1
Software development kit: OZEKI VoIP SIP SDK (Download)
VoIP connection: 1 SIP account
System memory: 512 MB+
Free disk space: 100 MB+

Ozeki Cookie Policy
Ozeki Informatics Ltd uses cookies to provide you the best experience on this website. The further use of the website will be considered as an agreement to the use of cookies. For more information read this website.

Cookies are enabled You are browsing the optimized version of this website. For more information read this website.