GeoVision How do I embed a camera stream into a webpage?


GeoVision
Back to GeoVision Support | Support Home

Method 1A: Use Multicam and the Following HTML Code with Firefox, Chrome, and Safari

1. In Multicam, make sure Web is enabled and under the Password Settings, Make sure the Guest account is enabled and the particular camera that
needs to be viewed is enabled.

2. Please use the following Code in Chrome / Firefox /Safari

Code: Select all
Code Format
http://[IP Address]/mjpeg?cam=[camera#]

Ex. http://192.168.0.50/mjpeg?cam=1

Note: Integrating it into a HTML webpage will give you much better results

<html>
<head>
<title>My camera Page</title>
</head>
<body>
<img src="http://192.168.0.50/mjpeg?cam=1" height="360" width="480">
</body>
</html>





Method 1B: Use GV-Mobile Server and the Following HTML Code with Firefox, Chrome, and Safari ( Old Method )

Note: The following methods assume you are making connections directly from the DVR/NVR installed on the same Computer. Direct Connection to IP Devices such as IP Cameras or Third Party Cameras require a USB NVR License to enable such functionality. This method is known to work with both with both Firefox and Chrome as internet explorer does not support HTTP-MJPEG streaming at this time.

Steps to Embed a Geovision Camera on a Web Page in Chrome or Firefox

1. Download GV-Mobile Server from the Geovision.com.tw Downloads Page and then click on the Mobile Server on the upper left hand side.
2. Enable HTTP-MJPEG Streaming from GV-Mobile Server by clicking on the HTTP-MJPEG Tab.
3. Click on the Camera on the left hand side and make sure to enable the camera and click apply. Make sure it shows green indicating it is connected correctly.
4. Please be aware that Stream 2 can only be used for the RTSP Stream and not for the MJpeg Stream.
5. Enable port forwarding for port 8080 or whichever port you are using for the HTTP-MJPEG Stream.
6.Use the Following HTML Embed code in your Web Page:

Code: Select all
Code Format
<img src="http://<GV-Mobile Server IP>:<Http Port>/cam_video_rs.cgi.jpg?cam=<CamNo>" height= "360" width="480" />

<img src="http://<GV-Mobile Server IP>:<Http Port>/jpeg?cam=<CamNo>" height= "360" width="480">
or
Ex. <img src="192.168.0.50:8080/jpeg?cam=1" height="360" width="480">

Ex.
<html>
<head>
<title>My camera Page</title>
</head>
<body>
<img src="192.168.0.50:8080/jpeg?cam=1" height="360" width="480">
</body>
</html>






Method 2: Embed a Geovision Camera on a Webpage in Internet Explorer Using Active X Plugins ( Beta )

This Demo currently provide the Demo page in which demonstrates all our cameras integrated into this page. This demo requires
that you have installed either GV-NVR/DVR on your system. All you need to change is:
A. IP Address ( usavision.dipmap.com in this case )
B. Default Ports of 4550. 5550, 6550, 80 ( unless using different Ports )
C. Username and password to the NVR/DVR of Choice



Method 3: Transcode the RTSP feed to a .FLV for use a compatible Flash Player such as JWPlayer

Summary: Using a combination of VLC and JWplayer, it will transcode the RTSP Feed from your Geovision Camera to a .Flv Extension and will allow it to be embedded using the JWPlayer Flash Player.

....Under Progress

Integration Requirements
1. RTSP Transcoding Application
2. Embedded Video Codec Player
3. HTML which makes a call to the Embeded Video Codec Player to play and stream the RTSP Feed




Resources

Geovision RTSP Camera Format

RTSP to FLV and RTMP Streaming

Embedding FLV or RTMP Players into Web Broswers