Following is the aspx code :
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" IsSticky="True" EnableSkinTransparency="true" Transparency="40" >
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="Button1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="TestDiv"/>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="Button3">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="abcd"/>
<telerik:AjaxUpdatedControl ControlID="TestDiv" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManagerProxy>
<asp:Button ID="Button3" runat="server" Text="Make Visible" OnClick="Button3_Click" />
<asp:Button ID="Button4" runat="server" Text="Make Invisible" OnClick="Button4_Click" />
<div id="abcd" runat="server" class="col-md-16 text-align-right top-margin-10" >
<div class="col-md-7">
</div>
<div class="col-md-9">
<div class="col-md-5" runat="server" style="display:block; text-align:center; ">
<fieldset class="border-for-div">
<legend class="caption-for-div"> Video streaming </legend>
<video id="video" autoplay="autoplay" width="200" height="120" style="border:solid; border-width:1px;" runat="server"></video>
</fieldset>
</div>
<div class="col-md-5" runat="server" style="display:block; text-align:center; ">
<fieldset class="border-for-div">
<legend class="caption-for-div"> Take Photo </legend>
<canvas width='160' height='120' style="border:solid; border-width:2px;" > </canvas>
</fieldset>
</div>
<div class="col-md-5">
<img id="Img1" runat="server" style="border:solid; border-width:5px;" width="160" height="120" visible="false" />
</div>
</div>
<br />
<input type="button" value="start capture" onclick="startCapture()" />
<input type="button" value="take snapshot" onclick="takePhoto()" />
<%--<input type="button" value="stop capture" onclick="stopCapture()" />--%>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static"></asp:TextBox>
</div>
<div id="TestDiv" class="col-md-16 text-align-right top-margin-10" runat="server" >
<asp:textbox ID="textbox5" runat="server" Text="textbox5"></asp:textbox>
</div>
<script type="text/javascript">
var localMediaStream = null;
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
function takePhoto() {
if (localMediaStream) {
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 160, 120);
//document.querySelector('img').src = canvas.toDataURL('image/jpeg');
var base64 = canvas.toDataURL('image/jpeg');
document.getElementById('TextBox1').value = base64;
}
}
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL;
function startCapture() {
navigator.getUserMedia({ video: true }, function (stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, function (e) {
console.log(e);
});
}
function stopCapture() {
video.pause();
localMediaStream.stop();
}
</script>
Following is C# code :
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
abcd.Attributes["style"] = "Display:Normal;"; //None
TestDiv.Attributes["style"] = "Display:None;"; //Normal
}
}
protected void Button3_Click(object sender, EventArgs e)
{
abcd.Attributes["style"] = "Display:Normal;"; //None
video.Attributes["style"] = "Display:Normal;"; //None
TestDiv.Attributes["style"] = "Display:None;"; //Normal
}
protected void Button4_Click(object sender, EventArgs e)
{
abcd.Attributes["style"] = "Display:None;"; //None
video.Attributes["style"] = "Display:None;"; //None
TestDiv.Attributes["style"] = "Display:Normal;"; //Normal
}
The problem is as follows :
When the page is loaded and I click on Start Capture the video streaming starts. Click on Take Snapshot also puts an image on the canvas.
Now click on the button Make Invisible. This will hide the div in which the video and captured image are displayed and show the div with one textbox.
Now click on the button Make Visible. This will show the div in which the video and captured image are to be displayed and hide the div with one textbox.
The problem starts from here. Now if I press Start Capture button the web camera is started. but the video streaming is not visible.
I tried disabling the compression in my web.config file but still the problem is not resolved.
If I stop using radajaxmanager then every thing works fine.
Can any body help me in resolving this ?
Thanks
Milind Shevade
PS : This was earlier posted under General discussion(Link - https://www.telerik.com/forums/how-to-use-web-cam-for-streaming-video-with-radajaxmanager). But I feel I should have posted it here. So posting it again. Sorry for the inconvinence