Embedding Live Hikvision NVR RTSP Stream into custom Website
Here is how to embed the Hikvision RTSP stream into a web page.
Copy the following HTML code and save it in a .html file and you can view the Hikvision NVR streams using it. Change the IP, Username and Password to match your setup. Change the subtream by changing the ending of if the URL from 2 to 1 (such as 101 instead of 102).
HTML CODE:
Excuse the bad code and formatting, I am not a web developer. But it works!
It works on both Linux and Windows, I find it works best when you have VLC plugin installed.
Here is how to embed the Hikvision RTSP stream into a web page.
Copy the following HTML code and save it in a .html file and you can view the Hikvision NVR streams using it. Change the IP, Username and Password to match your setup. Change the subtream by changing the ending of if the URL from 2 to 1 (such as 101 instead of 102).
HTML CODE:
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<title>Hikvision NVR Live View</title>
<center>
</head>
<body border="0" bgcolor="black">
<h1 style="color:white;">Hikvision NVR Live View</h>
<table border="1" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td>
<p style="color:white;" align="center">Camera 1 Substream</p>
</td>
<td>
<p style="color:white;" align="center">Camera 2 Substream</p>
</td>
</tr>
<tr>
<td>
<object ID="MediaPlayer" WIDTH="320" HEIGHT="320" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab">
<embed TYPE="application/x-mplayer2" SRC="rtsp://admin:12345@192.168.1.100/Streaming/Channels/102" NAME="MediaPlayer" WIDTH="320" HEIGHT="320" autostart="1" showcontrols="0"></embed></object>
</td>
<td>
<object ID="MediaPlayer" WIDTH="320" HEIGHT="320" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab">
<embed TYPE="application/x-mplayer2" SRC="rtsp://admin:12345@192.168.1.100/Streaming/Channels/202" NAME="MediaPlayer" WIDTH="320" HEIGHT="320" autostart="1" showcontrols="0"></embed></object>
</td>
</tr>
<tr>
<td>
<p style="color:white;" align="center">Camera 3 Substream</p>
</td>
<td>
<p style="color:white;" align="center">Camera 4 Substream</p>
</td>
</tr>
<tr>
<td>
<object ID="MediaPlayer" WIDTH="320" HEIGHT="320" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab">
<embed TYPE="application/x-mplayer2" SRC="rtsp://admin:12345@192.168.1.100/Streaming/Channels/302" NAME="MediaPlayer" WIDTH="320" HEIGHT="320" autostart="1" showcontrols="0"></embed></object>
</td>
<td>
<object ID="MediaPlayer" WIDTH="320" HEIGHT="320" CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab">
<embed TYPE="application/x-mplayer2" SRC="rtsp://admin:12345@192.168.1.100/Streaming/Channels/402" NAME="MediaPlayer" WIDTH="320" HEIGHT="320" autostart="1" showcontrols="0"></embed></object>
</td>
</td></tr>
</tbody></table>
</center>
</body></html>
Excuse the bad code and formatting, I am not a web developer. But it works!
It works on both Linux and Windows, I find it works best when you have VLC plugin installed.
