Notice: Firmware Links Under Maintenance We are currently undergoing maintenance on all firmware links. If any links are inaccessible, please email or contact Tech Support for the firmware. We appreciate your patience during the maintenance, thank you for your understanding.
Difference between revisions of "Remote Access/Embed Video Feed On Website"
(Created page with "==Embed Video Feed on Website== ===Description=== This article will show you how to take a video feed from an IP Camera, DVR, or NVR and embed the live video on a website. ===...") |
(→Step by Step Instructions) |
||
(46 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
*Port 554 forwarded in the gateway of the network the IP Camera, DVR or NVR is connected | *Port 554 forwarded in the gateway of the network the IP Camera, DVR or NVR is connected | ||
*Website where you want to host the video | *Website where you want to host the video | ||
− | ===Example of | + | ===Example of RTSP URL=== |
− | <blockquote style="background-color: lightgrey; border: solid thin grey;"> | + | <blockquote style="background-color: lightgrey; width:600px; border: solid thin grey;"> |
+ | rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=1 | ||
+ | </blockquote> | ||
+ | *stream = Device Account | ||
+ | *stream1 = Device Password | ||
+ | *98.189.113.44 = Public IP address | ||
+ | *554 = RTSP Port | ||
+ | *channel=1 =Device Channel | ||
+ | *subtype=1 =Substream 1, subtype=0 for Main Stream | ||
+ | |||
+ | ===Example of Code=== | ||
+ | <pre> | ||
+ | <html> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <head> | ||
+ | <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | ||
+ | </head> | ||
+ | |||
+ | <object | ||
+ | classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" | ||
+ | codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" | ||
+ | id="vlc" | ||
+ | name="vlc" | ||
+ | class="vlcPlayer" | ||
+ | events="True"> | ||
+ | <param name="Src" value="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=3&subtype=1" /> <!-- ie --> | ||
+ | <param name="ShowDisplay" value="True" /> | ||
+ | <param name="AutoLoop" value="True" /> | ||
+ | <param name="AutoPlay" value="True" /> | ||
+ | <!-- win chrome and firefox--> | ||
+ | <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=3&subtype=1" ></embed> | ||
+ | </object> | ||
+ | </pre> | ||
+ | |||
+ | ===Example of Working RTSP Feed(Internet Explorer or Firefox Only)=== | ||
<html> | <html> | ||
Line 25: | Line 61: | ||
class="vlcPlayer" | class="vlcPlayer" | ||
events="True"> | events="True"> | ||
− | <param name="Src" value="rtsp://stream:stream1@ | + | <param name="Src" value="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=1&subtype=1" /> <!-- ie --> |
<param name="ShowDisplay" value="True" /> | <param name="ShowDisplay" value="True" /> | ||
<param name="AutoLoop" value="True" /> | <param name="AutoLoop" value="True" /> | ||
<param name="AutoPlay" value="True" /> | <param name="AutoPlay" value="True" /> | ||
<!-- win chrome and firefox--> | <!-- win chrome and firefox--> | ||
− | <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://stream:stream1@ | + | <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=1&subtype=1" ></embed> |
</object> | </object> | ||
+ | </html> | ||
+ | |||
+ | ===Step by Step Instructions=== | ||
+ | 1. From a PC on the same network as the IP Camera, DVR, or NVR; go to www.CanYouSeeMe.org and check port 554. Port 554 should be open. | ||
+ | *Note: The IP address displayed on this page. We will need that later. | ||
+ | |||
+ | [[file:EmbedRTSPonWebsite0.png|600px]] | ||
+ | |||
+ | 2. Login to your device, and create a new User Account. | ||
+ | |||
+ | [[File:EmbedRTSPonWebsite1.png|600px]] | ||
+ | |||
+ | 3. Ensure this account only has the ability to, "Monitor" or "Live" is enabled for the specific channel you intend on embedding on the website. | ||
+ | |||
+ | [[File:EmbedRTSPonWebsite2.png|600px]] | ||
+ | |||
+ | 4. At this point we should have several pieces of information: | ||
+ | *Device's LAN IP Address | ||
+ | *Device's Public IP Address | ||
+ | *Devices RTSP Port: Default 554 | ||
+ | *Dedicated Account with Limited System Access | ||
+ | |||
+ | Example Information: | ||
+ | |||
+ | Device Local IP: 192.168.1.16 | ||
+ | |||
+ | Device Public IP: 98.189.113.44 | ||
+ | |||
+ | RTSP Port: 554 | ||
+ | |||
+ | Account User: stream | ||
+ | |||
+ | Account Pass: stream1 | ||
+ | 5. Lets take the above information, and create a RTSP URL. Then we can test it using VLC. | ||
+ | <blockquote style="background-color: lightgrey; width:600px; border: solid thin grey;"> | ||
+ | rtsp://<Username>:<Password>@<IP Address>:<Port>/cam/realmonitor?channel=1&subtype=0 | ||
+ | </blockquote> | ||
+ | For this test we will use the local IP address of an IP Camera, and the default credentials. | ||
+ | <blockquote style="background-color: lightgrey; width:600px; border: solid thin grey;"> | ||
+ | rtsp://admin:admin@192.168.1.16:554/cam/realmonitor?channel=1&subtype=0 | ||
</blockquote> | </blockquote> | ||
− | === | + | This URL will do the following: |
− | < | + | *Login to the IP camera using admin for the username |
− | === | + | *Login to the IP camera using admin for the password |
− | + | *Access IP Camera from IP address of 192.168.1.16 | |
+ | *Will request channel 1, since this is a camera there is only one channel. | ||
+ | *Will request a primary stream from the IP Camera | ||
+ | |||
+ | 6. Open VLC, and go to, "Media->Open Network Stream" | ||
+ | |||
+ | [[File:EmbedRTSPonWebsite4.png|600px]] | ||
+ | |||
+ | 7. Input the URL you created earlier into the box, and click, "Play" | ||
+ | |||
+ | [[File:EmbedRTSPonWebsite5.png|600px]] | ||
+ | |||
+ | 8. If the video feed is displaying in VLC we have confirmed that we have a working URL. | ||
+ | |||
+ | [[File:EmbedRTSPonWebsite6.png|600px]] | ||
+ | |||
+ | 9.Next we want to replace the, "XXX" in the below code to the RTSP URL we created earlier, using the public IP address: | ||
+ | |||
+ | Before: | ||
+ | <pre> | ||
+ | <html> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <head> | ||
+ | <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | ||
+ | </head> | ||
+ | |||
+ | <object | ||
+ | classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" | ||
+ | codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" | ||
+ | id="vlc" | ||
+ | name="vlc" | ||
+ | class="vlcPlayer" | ||
+ | events="True"> | ||
+ | <param name="Src" value="XXX" /> <!-- ie --> | ||
+ | <param name="ShowDisplay" value="True" /> | ||
+ | <param name="AutoLoop" value="True" /> | ||
+ | <param name="AutoPlay" value="True" /> | ||
+ | <!-- win chrome and firefox--> | ||
+ | <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="XXX" ></embed> | ||
+ | </object> | ||
+ | </html> | ||
+ | </blockquote></pre> | ||
+ | After: | ||
+ | <pre><blockquote style="background-color: lightgrey; width:600px; border: solid thin grey;"> | ||
+ | <html> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <head> | ||
+ | <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> | ||
+ | </head> | ||
+ | |||
+ | <object | ||
+ | classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" | ||
+ | codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" | ||
+ | id="vlc" | ||
+ | name="vlc" | ||
+ | class="vlcPlayer" | ||
+ | events="True"> | ||
+ | <param name="Src" value="rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=0" /> <!-- ie --> | ||
+ | <param name="ShowDisplay" value="True" /> | ||
+ | <param name="AutoLoop" value="True" /> | ||
+ | <param name="AutoPlay" value="True" /> | ||
+ | <!-- win chrome and firefox--> | ||
+ | <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=0" ></embed> | ||
+ | </object> | ||
+ | </html> | ||
+ | </blockquote></pre> | ||
+ | |||
+ | 10. Add the entire string of code to your website, and refresh the page. If everything is working, the video feed should display on your web browser. | ||
− | + | [[File:EmbedRTSPonWebsite7.png|600px]] | |
+ | [[Category:HCVR]] | ||
+ | [[Category:IP Camera]] | ||
+ | [[Category:Remote Access]] | ||
+ | [[Category:VLC]] |
Latest revision as of 21:51, 11 August 2016
Contents
Embed Video Feed on Website
Description
This article will show you how to take a video feed from an IP Camera, DVR, or NVR and embed the live video on a website.
Prerequisites
- Internet Explorer or Firefox Note: Chrome will not work.
- IP Camera, DVR, or NVR that is connected to a network
- Local IP address of device
- Port 554 forwarded in the gateway of the network the IP Camera, DVR or NVR is connected
- Website where you want to host the video
Example of RTSP URL
rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=1
- stream = Device Account
- stream1 = Device Password
- 98.189.113.44 = Public IP address
- 554 = RTSP Port
- channel=1 =Device Channel
- subtype=1 =Substream 1, subtype=0 for Main Stream
Example of Code
<html> <body> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc" name="vlc" class="vlcPlayer" events="True"> <param name="Src" value="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=3&subtype=1" /> <!-- ie --> <param name="ShowDisplay" value="True" /> <param name="AutoLoop" value="True" /> <param name="AutoPlay" value="True" /> <!-- win chrome and firefox--> <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://stream:stream1@98.189.113.44:554/cam/realmonitor?channel=3&subtype=1" ></embed> </object>
Example of Working RTSP Feed(Internet Explorer or Firefox Only)
Step by Step Instructions
1. From a PC on the same network as the IP Camera, DVR, or NVR; go to www.CanYouSeeMe.org and check port 554. Port 554 should be open.
- Note: The IP address displayed on this page. We will need that later.
2. Login to your device, and create a new User Account.
3. Ensure this account only has the ability to, "Monitor" or "Live" is enabled for the specific channel you intend on embedding on the website.
4. At this point we should have several pieces of information:
- Device's LAN IP Address
- Device's Public IP Address
- Devices RTSP Port: Default 554
- Dedicated Account with Limited System Access
Example Information:
Device Local IP: 192.168.1.16
Device Public IP: 98.189.113.44
RTSP Port: 554
Account User: stream
Account Pass: stream1
5. Lets take the above information, and create a RTSP URL. Then we can test it using VLC.
rtsp://<Username>:<Password>@<IP Address>:<Port>/cam/realmonitor?channel=1&subtype=0
For this test we will use the local IP address of an IP Camera, and the default credentials.
rtsp://admin:admin@192.168.1.16:554/cam/realmonitor?channel=1&subtype=0
This URL will do the following:
- Login to the IP camera using admin for the username
- Login to the IP camera using admin for the password
- Access IP Camera from IP address of 192.168.1.16
- Will request channel 1, since this is a camera there is only one channel.
- Will request a primary stream from the IP Camera
6. Open VLC, and go to, "Media->Open Network Stream"
7. Input the URL you created earlier into the box, and click, "Play"
8. If the video feed is displaying in VLC we have confirmed that we have a working URL.
9.Next we want to replace the, "XXX" in the below code to the RTSP URL we created earlier, using the public IP address:
Before:
<html> <body> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc" name="vlc" class="vlcPlayer" events="True"> <param name="Src" value="XXX" /> <!-- ie --> <param name="ShowDisplay" value="True" /> <param name="AutoLoop" value="True" /> <param name="AutoPlay" value="True" /> <!-- win chrome and firefox--> <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="XXX" ></embed> </object> </html> </blockquote>
After:
<blockquote style="background-color: lightgrey; width:600px; border: solid thin grey;"> <html> <body> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </head> <object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" codebase="http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab" id="vlc" name="vlc" class="vlcPlayer" events="True"> <param name="Src" value="rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=0" /> <!-- ie --> <param name="ShowDisplay" value="True" /> <param name="AutoLoop" value="True" /> <param name="AutoPlay" value="True" /> <!-- win chrome and firefox--> <embed id="vlcEmb" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" width="640" height="480" target="rtsp://admin:admin@98.189.113.44:554/cam/realmonitor?channel=1&subtype=0" ></embed> </object> </html> </blockquote>
10. Add the entire string of code to your website, and refresh the page. If everything is working, the video feed should display on your web browser.