How to broadcast 3D Video to a website

Ozeki Phone System XE gives a standalone possibility to display 3D video
calls on your website. With this outstanding feature you can revolutionize
the communication of your company with streaming any event in 3D on your
website. Among others this can be a fantastic way to give a lecture for
your audience, even though you cannot be present there.

You only need to install the Ozeki Phone System XE on your computer, the
Ozeki XD Softphone and develop a simple website that will receive the
incoming 3D video and dislpay it for the website audience.

In this site you can see detailed installation guide about how to configure
your Ozeki Phone System XE and develop a web page using the Javascript
API of the PBX for making a 3D call between the Ozeki XD Phone and your
website.

Step 1: Install a new Webphone Outside Line

In order to make 3D video call between a web browser and a VoIP phone, a
Webphone outside line needs to be installed on your Ozeki Phone System.
In this step you can see how to install and configure it.

After you have installed Ozeki Phone System
XE to your computer, login with username and password that was given
during installation.

Figure 2 - Login screen

On the main screen, click on Add button in the Outside section to install
a new Outside line.

Figure 3 - Main screen

On the next page find the Webphone outside line, and click on Install
button to install a new one.

Figure 4 - Install Webphone

During the webphone installation you need to do the configuration of the o
utside line. Under the General tab, you need to specify a unique name
for this connection. It cannot contain spaces and special characters.

Figure 5 - General tab

Then select the Webphone tab, where you need to select the Developer friendly
webphone type that allows you to fully customize your webphone.

Figure 6 - Webphone types

After you have done the configuration, click on OK button to save your
configuration.

Step 2: Install a new SIP Extension

To connect your Ozeki XD Phone to Ozeki Phone System XE, you need to install
a new SIP Extension. On the Home screen, click on Add button that belongs
to the Extensions section of the web page.

Figure 7 - Add new Extension

On the next page, find SIP Extension and click on Install button.

Figure 8 - Install a SIP Extension

Then, please specify the SIP account details that will be used by the 3D
phone. You need to provide a phone number, an authentication name and a
password.

Figure 9 - Specify SIP Account

After you have given the SIP account data, click on OK button to confirm
your settings.

Step 3: Download and configure Ozeki XD Phone

After you have downloaded and installed
Ozeki XD Phone on your computer, you need to configure it to be registered
to Ozeki Phone System XE.

First, you need to open the settings window by pressing the magnifier
button on your 3D softphone.

Figure 10 - Click on settings

Now, the Ozeki XD Phone Preferences window has been opened, where you can
setup your SIP account. Here, you need to specify the IP address of your
previously configured PBX, the specified phone number and password.

Figure 11 - Specify SIP account

Under the Audio/Video devices tab, you need to select the Microphone and
the Speaker you want to use, and you need to select a 3D camera in the 3D
camera settings section (if you use a 3D compatible camera, you will
probably see the same camera as the left and right camera).

Figure 12 – Audio/Video Devices

Then click on OK button to finish the configuration.

Step 4: Align your cameras

Now, it is time to align your cameras. If you use a 3D compatible webcamera, just
put it on the top of your monitor and move on the next step.
However, if you use two conventional webcameras, take a
look at Figure 13 for our tip about the right camera placement.
Be sure that the distance between your cameras is approximately 65 mm.

Figure 13- Camera placement

Step 5: Create an HTML file on your webserver

Code 1 shows an example about how to make a webphone on your
website that can broadcast a 3D video call coming from an Ozeki XD Phone
through Ozeki Phone System XE PBX. If you click on See full code
button, you can see the whole source code. Scrolling down, you can read
about the main parts and functions of the source code.

To display a 3D call on your web browser, you need to develop a webphone
that will be responsible for showing the remote video that is coming from
the Ozeki XD Phone. In this step you can see a simple example about how
to make a video call with your website.

For using WebPhoneAPI of Ozeki Phone System XE a webserver is needed that
your code will be placed on. In this example, Wampserver and Apache are
used. After that, open the folder where your Wamp has been installed,
then select the www folder and create an index.html file with the following
content in it:

Now, declare the call object, the ConnectionInformation object and use
jQuery to wait for the website to be loaded. Then, we register to the
onConnectionStateChanged event and try to connect to the webphone outside
line. In the connect method, you need to specify the IP address of the
PBX, and the name of the Webphone Outside Line.

When an onConnectionStateChanged event occurs, the parameter of the event
is called, which is the connectionStateChanged function. This function
gets the current connection state in its state parameter and save it to
the ConnectionInformation variable that will be used later. If the Connection
State is ACCESS_GRANTED, it subscribe for incoming calls and activates the
Button on the website that makes it possible to call the startCall() method
for making calls.

Code example 5 - Function which subscribe to the connection state change event

If you click on the Button on the website, the startCall method will be
called. This is responsible for initiating a call. Use the phone number
of the VoIP phone as a parameter in the createCall method and specify the
calltype with the CallType.VIDEO. This method makes a call object that
has the name ’call’. Run the start method on this object to call the VoIP
phone. Then register on the onCallStateChanged event with the callStateChanged
function.

If you check the callStateChanged function, you can see that if the call
is in IN_CALL state then the incoming 3D video will be displayed in the
div with remoteVideo ID, furthermore it disables the Make call button, and
enables the Hang up button.

The following code shows how to receive an incoming call. The accept()
method can be used to accept an incoming call, and the previously used
setRemoteDisplay can be used to show the incoming 3D picture. In addition,
here you need to disable and enable the Make call and the Hang up buttons
properly for the connection state.

Finally, we will make a test call between the web browser and the Ozeki
XD Phone. It is also possible to call a 3D phone based on the previously
provided phone number (in the createcall object), or receive a 3D video
call from a 3D softphone. In this case, you need to add a new Outbound routing
rule with the help of you can call a Webphone outside line from your Ozeki
XD Phone. In this example you can see how to call a remote Ozeki XD Phone.

If you have opened and registered your 3D phone to your Ozeki
Phone System XE, you only need to open the web page where the 3D video call
will be streaming. Here, click on the Make 3D Video Call button, then allow
the website to access your camera and microphone.

Figure 13 – Camera and Microphone settings

Then a pop-up window of the Ozeki XD Phone will appear, where you need to
click on the Video Call button to accept the incoming call.

Figure 14 – Incoming call on Ozeki the XD Phone

Then the local 3D video can be seen in the window of Ozeki XD Phone, and
the remote video can also be seen in the web browser.

Figure 15 – 3D stream on a web browser

In this guide, you could see a breath-taking form of communication that can
bring extra profit for your company. If you have any questions or need
assistance, please contact us at
info@ozekiphone.com