I'm am trying to show video from IP cam in my C# WinForms app. I need to show only video, not camera menu and such. I was thinking of using WebBrowser control and somehow change parameters. If you have any suggestions for this approach or any other please help. I don't know where to start. This is default IP cam page:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<title>IP CAMERA</title>
<link href="style/css.css" rel="stylesheet" type="text/css">
<SCRIPT language="JavaScript" src="js/localization.js"></SCRIPT>
<SCRIPT language="JavaScript" src="js/commfunc.js"></SCRIPT>
<SCRIPT language="JavaScript" src="js/axobjdef.js"></SCRIPT>
<script language="JavaScript" src="js/slider.js"></script>
<SCRIPT language="JavaScript" src="js/vlc.js"></SCRIPT>
<SCRIPT language="Javascript" src="js/plugin_detect.js"></SCRIPT>
<style type="text/css">
.statusBarL{
background-image:url("./style/image/vlc/img_Liveview_L.png");
background-repeat:no-repeat;
height:25px;
width:7px;
}
.statusBarM{
background-image:url("./style/image/vlc/img_Liveview_M.png");
background-repeat: repeat-x;
height:25px;
overflow:hidden;
}
.statusBarR{
background-image:url("./style/image/vlc/img_Liveview_R.png");
background-repeat:no-repeat;
height:25px;
width:7px;
}
.live_btn{
display:block;
float:left;
}
</style>
<script type="text/JavaScript">
<!--
var PLUGIN_LANG=0;
//var INITMODE = "Player";
var VIEW_SIZE = getViewSize();
var PROTOCOL_TYPE=getProtocol();
var INITMODE = "none";
var CAPTEXT = "Live View";
var STATUSBAR = 1;
var TOOLBAR = 1;
var CONTEXTMENU = 0;
var AUTOSTART=1;
var TOOLBARCONF = "stream+rec+mic+zoom+time";
var CheckMac = (navigator.platform.toLowerCase().indexOf("mac") < 0) ? false : true;
GetDeviceInfo_A('view','General.Network.RTSP.Enabled&group=General.Network.RTP.R0.Multicast');
var RTSPEnabled = GetQueryVariable('General.Network.RTSP.Enabled');
var TypeIndex = getCookies("TypeIdx");
if(TypeIndex == null)
{
if(getOs().indexOf("IE") >= 0)
{
TypeIndex = "ocx";
}else{
if(CheckMac)
{
TypeIndex = "quicktime";
}else{
TypeIndex = "vlc";
}
}
}
GetDeviceInfo_A('view','Image');
switch(getVideoFmt())
{
default:
case '1':
CHANNEL = 1;
break;
case '2':
if(RTSPEnabled == "1")
{
CHANNEL = 1;
setVideoFmt(1);
}else{
CHANNEL = 2;
}
break;
}
if(CheckMac && TypeIndex != "jpg")
{
TypeIndex = "quicktime";
}
function mouseOver(index)
{
if(index=="Liveview_Play" || index=="Liveview_Sound" ||
index=="Liveview_Talk" || index=="Liveview_Record")
{
EID(index).src = eval("'./style/image/vlc/btn_Liveview_"+EID(index).title+"_h.png'");
}else{
EID(index).src = eval("'./style/image/vlc/btn_"+index+"_h.png'");
}
}
function mouseOut(index)
{
if(index=="Liveview_Play" || index=="Liveview_Sound" ||
index=="Liveview_Talk" || index=="Liveview_Record")
{
EID(index).src = eval("'./style/image/vlc/btn_Liveview_"+EID(index).title+"_e.png'");
}else{
EID(index).src = eval("'./style/image/vlc/btn_"+index+"_e.png'");
}
}
function mouseDown(index)
{
if(index=="Liveview_Play" || index=="Liveview_Sound" ||
index=="Liveview_Talk" || index=="Liveview_Record")
{
EID(index).src = eval("'./style/image/vlc/btn_Liveview_"+EID(index).title+"_p.png'");
}else{
EID(index).src = eval("'./style/image/vlc/btn_"+index+"_p.png'");
}
}
function mouseUp(index)
{
switch(index)
{
case 'Play':
EID("Liveview_Play").title = "Pause";
mouseOver("Liveview_Play");
break;
case 'Pause':
EID("Liveview_Play").title = "Play";
mouseOver("Liveview_Play");
break;
case 'Stop':
mouseOver("Liveview_Stop");
EID("Liveview_Play").title = "Play";
mouseOut("Liveview_Play");
break;
case 'Sound':
EID("Liveview_Sound").title = "SoundMute";
mouseOver("Liveview_Sound");
break;
case 'SoundMute':
EID("Liveview_Sound").title = "Sound";
mouseOver("Liveview_Sound");
break;
case 'Talk':
EID("Liveview_Talk").title = "TalkMute";
break;
case 'TalkMute':
EID("Liveview_Talk").title = "Talk";
break;
default:
}
}
function changeVolume(value)
{
if(value != 0 && EID("Liveview_Sound").title != "Sound")
{
EID("Liveview_Sound").title = "Sound";
VLC_DoAct("Sound");
mouseOut("Liveview_Sound");
}
A_SLIDERS[0].f_setValue(value);
VLC_DoUpdateVolume(value);
}
var VLC_Version = PluginDetect.getVersion("vlc");
var VLC_Polling_Timer = null;
function onLoad()
{
if( TypeIndex == "vlc" && navigator.platform.toLowerCase().indexOf("mac") < 0 )
{
if(VLC_Version != null)
{
EShow("vlc_control","");
var i=0;
while(EID("statusBor"+i))
{
EID("statusBor"+i).style.borderRight = "1px solid #000";
i++;
}
EShow("table1","");
EShow("table2","none");
VLC_Polling_Timer = setTimeout("CheckVlcPlaying()",5000);
}else{
EShow("table1","none");
EShow("table2","");
}
}else{
EShow("table1","");
EShow("table2","none");
if( TypeIndex == "ocx")
{
AxMediaControl.Play(1);
}
}
}
function CheckVlcPlaying()
{
if(VLC_Polling_Timer != null)
{
clearTimeout(VLC_Polling_Timer);
}
var vlc = getVLC("vlc");
if( vlc )
{
if(VLC_Pause_Flag == false && EID("Liveview_Play").title == "Pause")
{
if(!vlc.playlist.isPlaying)
{
window.location.reload(true);
}
}
}
VLC_Polling_Timer = setTimeout("CheckVlcPlaying()",5000);
}
function onUnload()
{
if(TypeIndex == "ocx")
{
onAxobjUnload();
}else if(TypeIndex == "vlc"){
if(VLC_Version != null)
{
VLC_DoStop();
}
}
}
//-->
</script>
</head>
<body leftmargin="0" topmargin="0" onLoad="onLoad()" onUnload="onUnload()">
<table id="table1" width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
<tr>
<td height="450"> </td>
<td align="center" valign="top">
<script type="text/JavaScript">
<!--
GetDeviceInfo_A('view','Image');
var Codec;
if(CHANNEL == 3) CHANNEL = 1;
switch(CHANNEL)
{
default:
case 1:
Codec = "MPEG4";
break;
case 2:
Codec = "MJPEG";
break;
}
var VideoPath;
if(Codec == "MPEG4")
{
VideoPath = "video.mp4";
}else if(Codec == "MJPEG"){
VideoPath = "video.mjpg";
}
if(CheckMac)
{
if(TypeIndex == "quicktime")
{
var normalSize = VIEW_SIZE;
if(normalSize == null)
{
normalSize = "Medium";
setViewSize(normalSize);
}
if(normalSize == "Medium")
{
normalSize = "320x240";
}else if(normalSize == "Large"){
normalSize = "640x480";
}
if(normalSize.indexOf("x")>=0)
{
resolutionW=normalSize.slice(0,normalSize.indexOf("x"));
resolutionH=normalSize.slice(normalSize.indexOf("x")+1,normalSize.length);
}
document.open();
document.write("<embed SCALE=\"ToFit\" width=\"" + resolutionW + "\" height=\"" + resolutionH + "\"" +
" type=\"video/quicktime\" qtsrc=\"rtsp://" + location.hostname + "/" + VideoPath + "\"" +
" qtsrcdontusebrowser src=\"quicktime.mov\" autoplay=\"true\" controller=\"true\"\>");
document.close();
}else{
CHANNEL = 3;
Viewer();
}
}else{
if(TypeIndex != "vlc")
{
if(TypeIndex == "jpg")
{
CHANNEL = 3;
}
Viewer();
}else{
if(VLC_Version != null)
{
VLC_Viewer(VideoPath);
}
}
}
//-->
</script>
<br>
<script FOR="AxMediaControl" EVENT="OnConnectStateNotify(id, msg)">
if(navigator.appName.toLowerCase().indexOf("microsoft internet explorer") >= 0)
{
if(msg=="video lost")
{
window.top.leftFrame.location.reload();
window.top.mainFrame.location.reload();
}
else if(msg=="full connect")
{
alert(loadLangString("L_Warn_FullConnection",false));
}
else if(msg=="mic occupy")
{
alert(loadLangString("L_MicOccupy",false));
}
}
</script>
</div>
</td>
</tr>
<tr style="height:10px;"></tr>
<tr id="vlc_control" style="display:none;">
<td></td>
<td align="center">
<table cellSpacing="0" cellPadding="0" border="0" bordercolor="#000" style="table-layout:fixed;">
<tr id="statusBar">
<td class="statusBarL"></td>
<td id="statusBor0" class="statusBarM" style="width:80px;">
<div class="live_btn" style="padding:2px 7px 0px 7px;" id="statusBar0">
<img id="Liveview_Play" src="./style/image/vlc/btn_Liveview_Pause_e.png" title="Pause"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseUp(this.title)"
onClick="VLC_DoAct(this.title)">
</div>
<div class="live_btn" style="padding:2px 14px 0px 7px;" id="statusBar1">
<img id="Liveview_Stop" src="./style/image/vlc/btn_Liveview_Stop_e.png" title="Stop"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseUp(this.title)"
onClick="VLC_DoAct(this.title)">
</div>
</td>
<td id="statusBor1" class="statusBarM" style="width:43px;"> <!-- 87 -->
<!--
<div class="live_btn" style="padding:2px 7px 0px 14px;" id="statusBar2">
<img id="Liveview_Record" src="./style/image/vlc/btn_Liveview_Record_e.png" title="Record"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseOver(this.id)"
onClick="VLC_DoAct(this.title)">
</div>
-->
<div class="live_btn" style="padding:2px 14px 0px 14px;" id="statusBar3"> <!-- 2 14 0 7 -->
<img id="Liveview_Snapshot" src="./style/image/vlc/btn_Liveview_Snapshot_e.png" title="Snapshot"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseOver(this.id)"
onClick="VLC_DoAct(this.title)">
</div>
</td>
<form name="form1">
<td class="statusBarM" style="width:150px;"> <!-- 234 -->
<div class="live_btn" style="padding:1px 0px 0px 14px;" id="statusBar5"> <!-- 1 7 0 14 -->
<img id="Liveview_Sound" src="./style/image/vlc/btn_Liveview_Sound_e.png" title="Sound"
style="cursor:pointer;"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseUp(this.title)"
onClick="VLC_DoAct(this.title)">
</div>
<div id="soundSlider" class="divStyle" style="padding-top:5px;margin-left:40px;">
<script style="text/javascript">
<!--
var A_TPL1h = {
'b_vertical' : false,'b_watch': true,'n_controlWidth': 105,'n_controlHeight': 10,
'n_sliderWidth': 5,'n_sliderHeight': 12,'n_pathLeft' : 0,'n_pathTop' : 1,'n_pathLength' : 100,
's_imgControl': 'style/image/blueh_bg.gif','s_imgSlider': 'style/image/blueh_sl.gif','s_imgAlt': '','n_zIndex': 1
}
var A_INIT1h = {
's_form' : 0,'s_name': 'sliderValue1h','n_minValue' : 0,'n_maxValue' : 100,'n_value' : 30,'n_step' : 1
}
new slider(A_INIT1h, A_TPL1h, changeVolume);
//-->
</script>
<input type="hidden" name="soundSlider" id="sliderValue1h" size="2" readonly>
</div>
<!--
<div class="live_btn" style="padding:1px 7px 0px 14px;" id="statusBar6">
<img id="Liveview_Talk" src="./style/image/vlc/btn_Liveview_TalkMute_e.png" title="TalkMute"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseUp(this.title)"
onClick="VLC_DoAct(this.title)">
</div>
<div id="talkSlider" class="divStyle" style=""></div>
-->
</td>
</form>
<!--
<td class="statusBarM" style="width:44px">
<div class="live_btn" style="padding:2px 7px 0px 14px;" id="statusBar7">
<img id="Liveview_Fullscreen"
src="./style/image/vlc/btn_Liveview_Fullscreen_e.png" title="Fullscreen"
style="cursor:pointer"
onMouseOver="mouseOver(this.id)"
onMouseOut="mouseOut(this.id)"
onMouseDown="mouseDown(this.id)"
onMouseUp="mouseOver(this.id)"
onClick="VLC_DoAct(this.title)">
</div>
</td>
-->
<td class="statusBarR"></td>
</tr>
</table>
</td>
</tr>
</table>
<table id="table2" style="display:none;" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<u><a id="vlc_plugin_help" href="./vlc_help.htm" target="blank" style="color:#00000;">Install VLC plugin to watch streaming.</a></u>
</td>
</tr>
</table>
</body>
<script type="text/JavaScript">
<!--
StyleCustomize("main");
//-->
</script>
</html>