how to integrate camera live view into web application 20111130 20111201 002

wwwacticom

ACTi Knowledge Base

Category Installation amp Configuration Note

Sub-category Integration

Model All

Firmware NA

Software NA Author

Published 20091230 Reviewed 20111130

1

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 camerarsquos live view and control

Display more channels live view

How to show live view on other browsers

FAQ

Reference

wwwacticom

2

Introduction

You may want to embed your cameras live image into your specially designed webpage in

order to let users see the live view anywhere eg 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 Chromeetc

Multimedia players Quick time VLC Media Playeretc

Browsers Internet

explorer

Firefox Safari Google

Chrome

ACTi Camera VideoAudioAll

control

VideoAudio VideoAudio VideoAudio

Note You need to

install ActiveX

control

automatically

You need to use the URL command

httpipportcgi-bincmdencoderGET_STREAM

Please refer to another article

How to Watch Live Video Using iPhone and iPad

Multimedia

players

VLC Quick Time Other Application

ACTi

Camera

VideoAudio VideoAudio VideoAudioPTZ

Note RTSP URL

rtspIP_addressRTSP port or

rtspaccountpasswordIP_addressRTSP

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

ACTi ldquoMobile GOrdquo can work on

iphoneiPAD

Please install ACTi NVR server

and broadcast server

wwwacticom

3

Web server

ACTi

NVR server

ACTi

Broadcast server ACTi ldquoMobile Gordquo

Scenario 1 Show live streaming on IE browser

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

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 ldquoMobile Serverrdquo in ACTi Utility first

Note ldquoACTi MobileGordquo is available on iTunes it allows you to view and control cameras on

iPad iPhone and iPod

If you want to understand ldquoMobile Gordquo please visit ACTi website to read ldquoACTi MobileGordquo 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

wwwacticom

4

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 mdash small program building blocks mdash 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 ldquonvEPLMediacabrdquo into firmware when user

connect to camerarsquos web page the Internet Explorer will allow embedding the ActiveX control

then user can view the video streaming in camerarsquos web page

If you want to embed our ActiveX control into your specially designed webpage the ActiveX

control ldquo nvUnifiedControlocxrdquo can work with all ACTi cameras whatever the camera firmware

is earlier or not

Here is latest ACTi camerarsquos ActiveX control

ACTi

Camera

ActiveX control Digital signature Internet Explorer

ACM File Name nvUnifiedControlocx

Version 129124

Date 682011

Valid from

9232009 to

9242012

32-bit version

TCM

KCM

Internet Explorers 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


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 ldquoActiveX control Installation Packziprdquo after

unzipping the file executerdquo Register OCXbatrdquo it will install the necessary ActiveX control into

user system

wwwacticom

5

Start building application with sample code for IE browser

You can find sample code attached to this article named as ldquoLiveDemoSamplehtmrdquo

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

ltTITLEgtACTi - Live DemoltTITLEgt

Line47 Modify the camera IP address

NV1MediaSource = 101185

Line49-50 Modify the camera User Name and Password

NV1MediaUserName = Admin

NV1MediaPassword = 123456

Line51-56 Modify the camera port setting

NV1HttpPort = 80

NV1RegisterPort = 6000

NV1ControlPort = 6001

NV1StreamingPort = 6002

NV1MulticastPort = 5000

NV1RTSPPort = 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

ltOBJECT id=NV1 codeBase=httpactiftphosting4lesscomACTIGENERAL

APampManualLive20DemonvUnifiedControlocx height=480 width=720 data=

dataapplicationx-oleobjectbase64P2zpuA6i0WvxKqCVl4L+BAHAABhJAAAzhgAAA==

classid=CLSIDF8E691A0-C92E-4E42-9CDA-62FC07A9483B VIEWASTEXTgt

wwwacticom

6

Snapshot for Live Demo sample

wwwacticom

7


You can find sample code attached to this article named as

ldquoLiveDemoSample_forPTZcamerahtmrdquo



this sample


ltTITLEgtACTi - PTZ camera Live DemltTITLEgt







NV1HttpPort = 80





NV1RTSPPort = 7070

Line58-64 Modify the camerarsquos PTZ setting The example is for ACM-8511 For KCM

zoom camera you can use Vender=ldquoSONYrdquo Protocol=rdquoVISCArdquo or Vender=ldquoPELCOrdquo

Protocol=rdquoPELCO-Drdquo it depends what PTZ Vendor setting on camera

NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9


You can refer to the sample code attached to this article named as

ldquoLiveDemoSample_4channelPreviewhtmrdquo


Snapshot for 4 channels Live Demo sample

wwwacticom

10


Due to other browsers do not support ActiveX such as Firefox Google Chromeetc You can

input the URL command to show camerarsquos video

Please refer to another article How to Watch Live Video Using iPhone and iPad

httpwwwacticomsupportKnowledgeBaseoutsidedetailaspKB_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

ldquoLiveDemoSample_plugin_quicktimehtmlrdquo



this sample



Line9 Modify the camera IP address and RTSP port

ltparam value=rtsp1721626807070 name=qtsrcgt


qtsrc=rtsp1721626807070


wwwacticom

11

FAQ

Q1 I have bandwidth limitation if the live view is slow how should I do

You can use snapshot and upload the camerarsquos 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 camerarsquos 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 Camera will use the ports

TCP TCP Control and Streaming ports

(default is 6001 for control and 6002 for

stream)

RTP over UDP

(player site may use RTSP protocol)

RTSP port and Dynamic UDP port

RTP over UDP

(player site need to have RTSP and RTP

over HTTP Tunneling )

HTTP port

wwwacticom

12

Reference

[1] httpenwikipediaorgwikiActiveXActiveX_controls

wwwacticom

2

Introduction

You may want to embed your cameras live image into your specially designed webpage in

order to let users see the live view anywhere eg 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 Chromeetc

Multimedia players Quick time VLC Media Playeretc

Browsers Internet

explorer

Firefox Safari Google

Chrome

ACTi Camera VideoAudioAll

control

VideoAudio VideoAudio VideoAudio

Note You need to

install ActiveX

control

automatically

You need to use the URL command

httpipportcgi-bincmdencoderGET_STREAM

Please refer to another article

How to Watch Live Video Using iPhone and iPad

Multimedia

players

VLC Quick Time Other Application

ACTi

Camera

VideoAudio VideoAudio VideoAudioPTZ

Note RTSP URL

rtspIP_addressRTSP port or

rtspaccountpasswordIP_addressRTSP

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

ACTi ldquoMobile GOrdquo can work on

iphoneiPAD

Please install ACTi NVR server

and broadcast server

wwwacticom

3

Web server

ACTi

NVR server

ACTi













ACTi Utility


browser

Network

Network

wwwacticom

4
















is earlier or not


ACTi

Camera



Version 129124

Date 682011

Valid from

9232009 to

9242012

32-bit version

TCM

KCM










user system

wwwacticom

5





this sample









NV1HttpPort = 80





NV1RTSPPort = 7070



var nLivingTime = 0










wwwacticom

6


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

3

Web server

ACTi

NVR server

ACTi













ACTi Utility


browser

Network

Network

wwwacticom

4
















is earlier or not


ACTi

Camera



Version 129124

Date 682011

Valid from

9232009 to

9242012

32-bit version

TCM

KCM










user system

wwwacticom

5





this sample









NV1HttpPort = 80





NV1RTSPPort = 7070



var nLivingTime = 0










wwwacticom

6


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

4
















is earlier or not


ACTi

Camera



Version 129124

Date 682011

Valid from

9232009 to

9242012

32-bit version

TCM

KCM










user system

wwwacticom

5





this sample









NV1HttpPort = 80





NV1RTSPPort = 7070



var nLivingTime = 0










wwwacticom

6


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

5





this sample









NV1HttpPort = 80





NV1RTSPPort = 7070



var nLivingTime = 0










wwwacticom

6


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

6


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

7






this sample









NV1HttpPort = 80





NV1RTSPPort = 7070




NV1Vendor=SONY

NV1Protocol=VISCA

NV1AddressID=1

NV1PTZPostMode=1

NV1Parity=N81

NV1BaudRate=9600

NV1PTZPanSpeed = 5

wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

8



var nLivingTime = 0











wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

9






wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

10













this sample






qtsrc=rtsp1721626807070


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

11

FAQ
























stream)

RTP over UDP



RTP over UDP



HTTP port

wwwacticom

12

Reference


wwwacticom

12

Reference


how to integrate camera live view into web application 20111130 20111201 002

Documents