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/11/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 cameras live view and control Display more channels live view How to show live view on other browsers FAQ Reference

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

Firefox

Safari

Google Chrome

ACTi Camera

Video/Audio/All control

Video/Audio

Video/Audio

Video/Audio

Note

You need to install ActiveX control automatically.

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

Multimedia players ACTi Camera Note

VLC

Quick Time

Other Application

Video/Audio

Video/Audio

Video/Audio/PTZ

RTSP URL: rtsp://IP_address:RTSP port or rtsp://account:password@IP_address:RTSP

ACTi Mobile GO! can work on iphone/iPAD. Please install ACTi NVR server and broadcast server.

if you use RTSP, the camera will use UDP to send the image, please make sure there is no firewall between camera and player. ACTi has software NVR can offer more functions and good quality. ACTi will not guarantee third party software solution can work always due to they may update library or have quality concern.

www.acti.com

Scenario 1: Show live streaming on IE browser

Network

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.

Network

ACTi NVR server Note**

ACTi Broadcast server ACTi Mobile Go!

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. ACTi MobileGo is available on iTunes, it allows you to view and control cameras on

Note**

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.

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 cameras web page, the Internet Explorer will allow embedding the ActiveX control, then user can view the video streaming in cameras 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 cameras ActiveX control. ACTi Camera ACM TCM KCM File Name: nvUnifiedControl.ocx Version: 1.2.91.24 Date: 6/8/2011 Valid from 9/23/2009 to 9/24/2012
32-bit version

ActiveX control

Digital signature

Internet Explorer

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 <TITLE>ACTi - Live Demo</TITLE>

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.

<OBJECT id="NV1" codeBase="http://actiftp.hosting4less.com/ACTIGENERAL/ AP&Manual/Live%20Demo/nvUnifiedControl.ocx" height="480" width="720" data= "data:application/x-oleobject;base64,P2/zpuA6i0WvxKqCVl4L+BAHAABhJAAAzhgAAA==" classid="CLSID:F8E691A0-C92E-4E42-9CDA-62FC07A9483B" VIEWASTEXT>

www.acti.com

Snapshot for Live Demo sample:

www.acti.com

Display PTZ cameras 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 <TITLE>ACTi - PTZ camera Live Dem</TITLE>

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 cameras 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;

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.

<OBJECT id="NV1" codeBase="http://actiftp.hosting4less.com/ACTIGENERAL/ AP&Manual/Live%20Demo/nvUnifiedControl.ocx" height="480" width="720" data= "data:application/x-oleobject;base64,P2/zpuA6i0WvxKqCVl4L+BAHAABhJAAAzhgAAA==" classid="CLSID:F8E691A0-C92E-4E42-9CDA-62FC07A9483B" VIEWASTEXT> Snapshot for Live Demo sample:

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:

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 cameras 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, the camera will send the image with dynamic UDP port, please make sure there is no firewall between camera and live view site, 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 <TITLE>ACTi - Live Demo</TITLE>

Line9 :

Modify the camera IP address and RTSP port <param value="rtsp://172.16.26.80:7070" name="qtsrc"/>

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

Q3: Why I cannot see the image?

Please check if there is any firewall to block the video. ACTi cameras send image via two TCP ports, user can configure them from cameras web configurator. If you want to use RTSP protocol, we provide two ways to send video image. One is RTP over UDP, camera will use dynamic UDP port to send image. Second is RTP over TCP (the player site need to have RTSP and RTP over HTTP Tunneling ), camera will use HTTP port to send image. Camera Streaming Type TCP Camera will use the ports TCP Control and Streaming ports (default is 6001 for control and 6002 for stream) RTP over UDP (player site may use RTSP protocol) RTP over UDP (player site need to have RTSP and RTP over HTTP Tunneling ) HTTP port RTSP port and Dynamic UDP port

11

www.acti.com

Reference
[1] http://en.wikipedia.org/wiki/ActiveX#ActiveX_controls

12

www.acti.com