How to Integrate Camera Live View into Web Application? - ACTi

ACTi
Knowledge Base
Category: Installation & Configuration Note
Sub-category: Integration
Model: All
Firmware: N/A
Software: N/A Author:
Published: 2009/12/30 Reviewed: 2011/06/30
How to Integrate Camera Live View into Web
Application?
Contents
Introduction
Applications
Live View page introduction
ActiveX control technology
How to install ActiveX control to your system
Start building application with sample code
Display PTZ camera’s live view and control
Display more channels live view
How to show live view on other browsers
FAQ
Reference
1
www.acti.com

Introduction
You may want to embed your camera's live image into your specially designed webpage, in
order to let users see the live view anywhere, e.g. live traffic on highway, live view from famous
tourist attractions, have a look at pets and see what they are doing, etc. User can view the
video on various devices via different internet types, such as wired LAN, wireless LAN, 3G
network. This article explains how it all works and how to set it up.
Applications
You can use browsers or multimedia players to display the live streaming.
General browsers: Microsoft Internet explorer, Firefox, Safari, Google Chrome,etc.
Multimedia players: Quick time, VLC, Media Player,etc.
Browsers Internet
explorer
ACTi Camera Video/Audio/All
Multimedia
players
control
You need to
install ActiveX
control
automatically.
Firefox Safari Google
2
Chrome
Video/Audio Video/Audio Video/Audio
You need to use the URL command
http://ip:port/cgi-bin/cmd/encoder?GET_STREAM
Please refer to another article:
How to Watch Live Video Using iPhone and iPad
VLC Quick Time Media Player Other Application
ACTi Camera Video/Audio Video/Audio NA Video/Audio/PTZ
RTSP URL:
Rtsp://IP_address:RTSP port
It’s only for project
requirement
ACTi “Mobile GO!” can
work on iphone/iPAD.
Please install ACTi
NVR server and
broadcast server.
www.acti.com

Scenario 1: Show live streaming on IE browser
Web server
Scenario 2: To embed multimedia player on html file for verious browsers
Scenario 3: Get snapshot from camera and show it on browser directly.
Scenario 4: Broadcast server will send live stream to verious browser or target devices, and
cameras can keep live streaming to software NVR for recording.
ACTi
NVR server
3
ACTi
Broadcast server
ACTi “Mobile Go!”
Note** Broadcast server spec to be defined depends on potential number of clients using the
service, if you want to understand more about broadcast server, please contact ACTi sales or
can visit ACTi website to read “Mobile Server” in ACTi Utility first.
Note** “ACTi MobileGo” is available on iTunes, it allows you to view and control cameras on
iPad, iPhone and iPod!
If you want to understand “Mobile Go!”, please visit ACTi website to read “ACTi MobileGo!” in
ACTi Utility.
In the following page, we will teach you how to design the html page for live view on IE
browser.
Network
Network
www.acti.com

Live View page Introduction
If your browser is Microsoft Internet Explorer, you need to install the ActiveX control on your
computer. This document contains information about how to use ActiveX control to integrate
the camera live view window into web application. User can embed a camera live view window
into web application, or create a customized live view web page.
ActiveX Control Technology
ActiveX controls — small program building blocks — can serve to create distributed
applications that work over the Internet through Microsoft Internet Explorer web browser.
Examples include customized applications for gathering data, viewing certain kinds of files,
and displaying animation.
ACTi camera also included ActiveX control “nvEPLMedia.cab” into firmware, when user
connect to camera’s web page, the Internet Explorer will allow embedding the ActiveX control,
then user can view the video streaming in camera’s web page.
If you want to embed our ActiveX control into your specially designed webpage, the ActiveX
control “ nvUnifiedControl.ocx” can work with all ACTi cameras whatever the camera firmware
is earlier or not.
Here is latest ACTi camera’s ActiveX control.
ACTi
Camera
ActiveX control Digital signature Internet Explorer
ACM File Name: nvUnifiedControl.ocx
TCM
KCM
Version: 1.2.91.24
Date: 6/8/2011
4
Valid from
9/23/2009 to
9/24/2012
32-bit version
Internet Explorer's default security settings require that any software available for download must
have a digital signature before download can occur, the file types which will need digital signature,
such as .exe, .cab, .dll, .ocx, .msi, .xpi.
How to install ActiveX control to your system
Generally ActiveX control will be pushed to user system automatically. However, there may be
some cases when the user may not be able to download and install the ActiveX control from
the web application. In such case user will need to install the ActiveX control manually.
You can find one attachment in this KB named as “ActiveX control Installation Pack.zip”, after
unzipping the file, execute” Register OCX.bat”, it will install the necessary ActiveX control into
user system.
www.acti.com

Start building application with sample code for IE browser
You can find sample code attached to this article, named as “LiveDemoSample.htm”.
This sample is a useful example to set up a live demo page for guest viewers.
We will highlight the necessary modification which can help you to get successful preview with
this sample.
Line 3: Modify the display of the web page title bar
ACTi - Live Demo
Line47: Modify the camera IP address
NV1.MediaSource = "10.1.1.85";
Line49-50: Modify the camera User Name and Password
NV1.MediaUserName = "Admin";
NV1.MediaPassword = "123456";
Line51-56: Modify the camera port setting
NV1.HttpPort = "80";
NV1.RegisterPort = "6000";
NV1.ControlPort = "6001";
NV1.StreamingPort = "6002";
NV1.MulticastPort = "5000";
NV1.RTSPPort = "7070";
Line72: Modify the live view time. This setting is useful to limit the access time for each
connection, you can set this value as 0 if you wish to provide a permanent connection.
var nLivingTime = 0;
Line121: Modify the URL which locates the ActiveX control component. You may
choose to host this file on your website, or let your user download from ACTi server. If you wish
to host ActiveX control yourself, just replace the bold text with your URL. If you do not wish to
host it yourself, you can leave the settings unchanged to let your users download from ACTi
server. Please do not modify other settings in this tag.
5
www.acti.com

Snapshot for Live Demo sample:
6
www.acti.com

Display PTZ camera’s live view and control
You can find sample code attached to this article, named as
“LiveDemoSample_forPTZcamera.htm”.
This sample is a useful example to set up a live demo page for guest viewers.
We will highlight the necessary modification which can help you to get successful preview with
this sample.
Line 3: Modify the display of the web page title bar
ACTi - PTZ camera Live Dem
Line47: Modify the camera IP address
NV1.MediaSource = "10.1.1.85";
Line49-50: Modify the camera User Name and Password
NV1.MediaUserName = "Admin";
NV1.MediaPassword = "123456";
Line51-56: Modify the camera port setting
NV1.HttpPort = "80";
NV1.RegisterPort = "6000";
NV1.ControlPort = "6001";
NV1.StreamingPort = "6002";
NV1.MulticastPort = "5000";
NV1.RTSPPort = "7070";
Line58-64: Modify the camera’s PTZ setting. The example is for ACM-8511. For KCM
zoom camera, you can use Vender=“SONY” Protocol=”VISCA” or Vender=“PELCO”
Protocol=”PELCO-D”, it depends what PTZ Vendor setting on camera.
NV1.Vendor="SONY";
NV1.Protocol="VISCA";
NV1.AddressID="1";
NV1.PTZPostMode="1";
NV1.Parity="N81";
NV1.BaudRate="9600";
NV1.PTZPanSpeed = 5;
7
www.acti.com

Line120: Modify the live view time. This setting is useful to limit the access time for each
connection, you can set this value as 0 if you wish to provide a permanent connection.
var nLivingTime = 0;
Line169: Modify the URL which locates the ActiveX control component. You may
choose to host this file on your website, or let your user download from ACTi server. If you wish
to host ActiveX control yourself, just replace the bold text with your URL. If you do not wish to
host it yourself, you can leave the settings unchanged to let your users download from ACTi
server. Please do not modify other settings in this tag.
Snapshot for Live Demo sample:
8
www.acti.com

Display more channels live view
You can refer to the sample code attached to this article, named as
“LiveDemoSample_4channelPreview.htm”.
This sample is a useful example to set up a live demo page for guest viewers.
Snapshot for 4 channels Live Demo sample:
9
www.acti.com

How to show live view on other browsers
Due to other browsers do not support ActiveX, such as Firefox, Google Chrome,etc. You can
input the URL command to show camera’s video.
Please refer to another article: How to Watch Live Video Using iPhone and iPad
http://www.acti.com/support/KnowledgeBase/outside/detail.asp?KB_ID=KB20091222001
If the camera supports RTSP, you can plug-in media application to show live video, here is an
example which we use Quicktime application.
There is a sample code attached to this article, named as
“LiveDemoSample_plugin_quicktime.html”.
This sample is a useful example to set up a live demo page for guest viewers.
We will highlight the necessary modification which can help you to get successful preview with
this sample.
Line 2: Modify the display of the web page title bar
ACTi - Live Demo
Line9 : Modify the camera IP address and RTSP port
Line18: Modify the camera IP address and RTSP port
qtsrc="rtsp://172.16.26.80:7070"
Snapshot for Live Demo sample:
10
www.acti.com

FAQ
Q1: I have bandwidth limitation, if the live view is slow, how should I do?
You can use snapshot and upload the camera’s snapshot to FTP server, then your web page
can get file from FTP server directly by the time. ACTi camera supports Event Handler
function, it can upload snapshot file to FTP server directly.
Or you can select the camera which supports dual stream or multiple streams, then user can
use different resolution and frame rate, so the recording will keep on good quality ,and the live
view can use lower quality to save the bandwidth.
Q2: What should I think about when embedding the live view in my website?
You may concern some factors
1. Bandwidth limitation on your server site and remote user site.
2. Offer remote user control function on the camera, such as PTZ and record functions
3. Display live view on different browsers, such as IE, Firefox, Safari, Google Chrome.
4. Remote User will use various devices, such as PDA, iphone.
Reference
[1] http://en.wikipedia.org/wiki/ActiveX#ActiveX_controls
11
www.acti.com