This is a migrated thread and some comments may be shown as answers.

How to use web cam for streaming video with radajaxmanager

0 Answers 8 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Milind
Top achievements
Rank 1
Milind asked on 23 Oct 2017, 08:23 AM

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">
                &nbsp;
            </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">&nbsp;Video streaming&nbsp;</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">&nbsp;Take Photo&nbsp;</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

No answers yet. Maybe you can help?

Tags
General Discussions
Asked by
Milind
Top achievements
Rank 1
Share this question
or