How to add a webphone to a webpage (Flash camera and microphone access)



Download: 02_Web2Web_video.zip

Ozeki VoIP SIP SDK makes it possible to add a webphone to a webpage. In this article you will learn how to provide Flash microphone and camera access in webphones by Ozeki VoIP SIP SDK. After reading through this page you will be fully familiar with all the essential terms concerning Flash microphone and camera handling and what you will need for creating your own solution using Ozeki VoIP SIP SDK.


Flash is an Adobe formerly Macromedia tool for displaying multimedia data on the web. It can be used for creating webphone client application that can be connected to an Ozeki VoIP SIP SDK supported server. The Flash technology can be programmed by using Adobe Flash Builder. It has its own function for audio and video peripheral handling so you only need to call the provided functions for reaching the microphone or the camera.(Figure 1)

Figure 1 - Flash camera and microphone access

The program you can download here was written in C# (server-side) and Adobe Flash (client-side). If you want to use the program you will need to have Visual Studio 2010 and Adobe Flash Builder installed on your computer.

Integrating a Flash webphone in your site

When you have built a Flash webphone, you can easily put it on your website by placing some scripts and extra code into the .html code. Figure 2 shows a basic example web page with a company logo and a webphone for video phoning.

Figure 2- The sample web page with a Flash video webphone

You can place the webphone on a page wherever you want by using the following tools. At first you will need to extend the style sheet data with a new style "#flashContent" like it is shown in Code 1. This style will be used for a replaceable content definition that will be replaced with the Flash content if both Javascript and Flash is enabled in the browser you use.

<style type="text/css" media="screen">
    html, body  { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center;
           background-color: #ffffff; }
    object:focus { outline:none; }
    #flashContent { display:none; }

Code 1 - Style definition

You need to use some Javascript code in your html page (Code 2). Some of this is defined by the Adobe Flash builder, you only need to specify here the .js file location.

The example .html page also contains a Javascript code segment for checking the Flash environment version. If the Flash is enabled and the Flash Player version is proper, the replaceable content defined by the #flashContent style will be replaced by the Flash content.

The Javascript function also defines some display settings for the Flash player. You can set the location of the Flash object, the background color and the .swf file that will be displayed on the page. The replacing instruction is a function call. The embedSWF function of the separated .js file will be called with the .swf file and the div style as parameter. The environment will replace the defined div with the .swf file if it is possible.

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
    var swfVersionStr = "10.2.0";
    // To use express install, set to playerProductInstall.swf, otherwise the empty string.
    var xiSwfUrlStr = "playerProductInstall.swf";
    var flashvars = {};
    var params = {};
    params.quality = "high";
    params.bgcolor = "#ffffff";
    params.allowscriptaccess = "sameDomain";
    params.allowfullscreen = "true";
    var attributes = {};
    attributes.id = "Main";
    attributes.name = "Main";
    attributes.align = "middle";
        "Main.swf", "flashContent",
        "531", "332",
        swfVersionStr, xiSwfUrlStr,
        flashvars, params, attributes);
    // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
    swfobject.createCSS("#flashContent", "display:block;text-align:left;");

Code 2 - Javascript code support

Code 3 shows the Flash embedding part of the .html code. First there is the div definition with the flashContent style. This div will be replaced with the Flash content if possible. The Flash object is defined after the replaceable content definition. There are some basic settings like background and displaying quality. You can also set some special parameters like allowing full screen displaying etc.

You can see that the Internet Explorer needs some special handler instructions, IE6 does not have the support for Adobe Flash Player version 10.2.0 automatically.

<div id="flashContent">
        To view this page ensure that Adobe Flash Player version
        10.2.0 or greater is installed.
    <script type="text/javascript">
        var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
        document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
                        + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' />" );

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="531" height="332" id="Main">
        <param name="movie" value="Main.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="true" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="Main.swf" width="531" height="332">
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="allowScriptAccess" value="sameDomain" />
            <param name="allowFullScreen" value="true" />
        <!--[if gte IE 6]>-->
                Either scripts or active content are not permitted to run or Adobe Flash Player version
                10.2.0 or greater is not installed.
            <a href="http://www.adobe.com/go/getflashplayer">
                <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
        <!--[if !IE]>-->

Code 3 - Embedding Flash content

You can see how you can embed a simple webphone into any web page. You can use the above seen codes without any modification, or you can customize them according to your taste, but it is sure that you can use a webphone easily from your site with these methods.

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:
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