Webseiten Integration - HD Kameras ActiveX

Integration of the live video stream in your website

There is two ways to integrate the HD video stream of your camera in your website.

• h264: This method will use the H264 video stream of your camera. This will need a computer to have the Apple QuickTime Plugin installed. When using Internet Explorer an ActiveX Plugin will be needed.
• MJPEG: This method will work with every web browser. We will recommend you to use this way of integration to make sure the video stream of your camera can be displayed in any web browser.

Edit the HTML Page

Step 1: Please download our HTML package and unpack the ZIP file. The ZIP file can be found here.

Download and unzip the files.

Step 2: If you want to integrate the H264 video stream in your website please open the file h264_video.html in order to make modifications for your camera.

In order to access your camera over the internet (PORTFORWARDING) or your internal network you have to fill in the DDNS or IP address of your camera. You will also need to type in the username and the password of your camera. Optional you can also select the video resolution which you want to display.

Please change the following parameters:

var url = 'http://192.168.1.165:80';

var streamnum = 11; // Videostream 11 for 1280 x 720 pixel, 12 for 640 x 352 pixel and 13 for 320 x 176 pixel resolution

var name0 = 'admin'; // Camera Username

var password0 = 'instar'; // Camera Password

Edit the h264_video.html file if you want to integrate the HD camera´s h.264 video stream.

Step 3: If you want to integrate the MJPEG stream please modify the file mjpeg_video.html in the same way as explained in step 2 above.

Edit the mjpeg_video.html file if you want to integrate the HD camera´s MJPEG video stream.

Upload the Page to your Server

Step 4: Now please use a FTP client in order to upload the files to your web space. In our example we are using the software FileZilla. If you are not so familiar with HTML we recommend you to upload all files in the same folder where your index.html file is located which is normally the main page of your website.

Edit the mjpeg_video.html file if you want to integrate the HD camera´s MJPEG video stream.

Step 4.1: Afterwards all files should be in the same folder as shown below.

Edit the mjpeg_video.html file if you want to integrate the HD camera´s MJPEG video stream.

Step 5: All you need to do is either to link the file h264_video.html or mjpeg_video.html in your website. If you are familiar with HTML you can also simply integrate the HTML code in an existing site in order to integrate the video stream in any of your existing websites.

In case of questions please feel free to contact us any time.

UPDATE:

<!--
Man muss den unten stehenden Codeteil so abändern das die IP Adresse die dort jetzt hinterlegt ist, auf die DDNS Adresse verweist inkl. Port unter der die Kamera aus dem Internet erreichbar ist. Dort wo http... steht, wird die DDNS Adresse gefolgt von dem HTTP Port verwendet. Beispiel: abcd12.ddns3-instar.de:8081
Dort wo rtmp://... steht, da müssen Sie den RTMP Port anstatt dem HTTP Port angeben. Wichtig ist, das man diesen Port ebenfalls frei gibt im Router. So müssen Sie dort also eine Portweiterleitung für den HTTP und eine für den RTMP Port haben. Der RTMP Port ist by default 1935, wenn Sie eine zweite Kamera nutzen, muss der Port auf z.B. 1936 erhöht werden. Beim RTMP Port ist es zudem ganz wichtig das der interne und externe Port bei der Portweiterleitung immer identisch sind. Wenn die Kamera also intern den Port 1936 hat, dann muss dieser auch von extern freigegeben werden.
Des weiteren ist es wichtig, das man Benutzername und Passwort als Base64 Verschlüsselt abspeichert.
Im Codebeispiel ist YWRtaW46dmFsbGE z.B. der Teil der die Base64 Codierung von Benutzer und Passwort wiederspiegelt. Dazu müssen Sie Benutzername:Passwort codieren. Also z.B. admin:instar
Wichtig ist das der Benutzername mit einem Doppelpunkt getrennt wird vom Passwort.
Sie finden im Internet viele Seiten dazu wenn Sie nach "Base64 Encode" suchen.
-->

<embed src="http://192.168.2.125:80/flash/StrobeMediaPlayback.swf" mode="flash" width="960" height="540" flashvars="&amp;src=rtmp://192.168.2.125:1935/flash/12:YWRtaW46aW5zdGFy=&amp;streamType=live&amp;autoPlay=true" type="application/x-shockwave-flash">