Question

I am looking to create an ASP.Net website where the user can capture an image from there web camera and save it to a database on my server. I have tried using TWAIN but cannot seem to find any new cameras that support this. Same when trying to use Silverlight and WIA. Has anyone had any success in doing this?

The client computer will have whatever web camera I recommend so if you know of a model that works, please share. I have tried both Microsoft LifeCam and Logitech with no luck.

If you have done this or now how I would really appreciate some help. Thanks for you time.

Answer 1

I was able to accomplish what I wanted by having the user install Google Chrome Frame on there computer and then using the canvas tag to get the image. Works well here’s some sample code:

    <div>

        <p id="status" style="color:red">
            <noscript>JavaScript is disabled.</noscript>
        </p>


        <table>
            <tr>
                <td>
                    <input id="btnTakePicture" type="button" value="Take Picture"; />
                </td>
                <td>
                    <input id="btnSave" type="button" value="Save Picture"; />
                </td>
            </tr>
        </table>


        <asp:Button ID="btnSavePicture" runat="server" Text="HiddenSave" OnClick="btnSavePicture_Click" CssClass="hiddencol"  />

        <asp:Panel ID="pnlHide" runat="server" style="display:none" >    
            <textarea id="eventdata" rows="18" cols="1" style="width: 100%" runat="server"></textarea>
        </asp:Panel>

        <script type="text/javascript">

                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia;

                var webcam = (function () {


                    var video = document.createElement('video'),
                    photo = document.createElement('canvas');

                    function play() {

                        if (navigator.getUserMedia) {

                            navigator.getUserMedia({ video: true, audio: true, toString: function () { return "video,audio"; } }, onSuccess, onError);

                        } else {

                            changeStatus('getUserMedia is not supported in this browser.', true);
                        }

                    }

                    function onSuccess(stream) {

                        var source;

                        if (window.webkitURL) {

                            source = window.webkitURL.createObjectURL(stream);

                        } else {

                            source = stream; // Opera and Firefox
                        }


                        video.autoplay = true;

                        video.src = source;

                        changeStatus('Connected.', false);

                    }

                    function onError() {

                        changeStatus('Please accept the getUserMedia permissions! Refresh to try again.', true);

                    }

                    function changeStatus(msg, error) {
                        var status = document.getElementById('status');
                        status.innerHTML = msg;
                        status.style.color = (error) ? 'red' : 'green';
                    }


                    // allow the user to take a screenshot
                    function setupPhotoBooth() {
                        //var takeButton = document.createElement('button');
                        var takeButton = document.getElementById('btnTakePicture');
                        //takeButton.innerText = 'Take Picture';
                        takeButton.addEventListener('click', takePhoto, true);
                        //document.body.appendChild(takeButton);

                        //var saveButton = document.createElement('button');
                        var saveButton = document.getElementById('btnSave');
                        //saveButton.id = 'btnSave';
                        //saveButton.innerText = 'Save Picture';
                        saveButton.disabled = true;
                        saveButton.addEventListener('click', savePhoto, true);
                        //document.body.appendChild(saveButton);

                    }

                    function takePhoto() {

                        // set our canvas to the same size as our video
                        photo.width = video.width;
                        photo.height = video.height;

                        var context = photo.getContext('2d');
                        context.drawImage(video, 0, 0, photo.width, photo.height);

                        // allow us to save
                        var saveButton = document.getElementById('btnSave');
                        saveButton.disabled = false;

                        var data = photo.toDataURL("image/png");

                        data = data.replace("image/png", "");

                        document.getElementById("<%= eventdata.ClientID %>").value = data;

                    }

                    function savePhoto() {
                        //                        var data = photo.toDataURL("image/png");

                        //                        data = data.replace("image/png", "image/octet-stream");

                        //                        document.getElementById("<%= eventdata.ClientID %>").value = data;
                        //                        document.location.href = data;

                        SendBack();
                    }

                    return {
                        init: function () {

                            changeStatus('Please accept the permissions dialog.', true);

                            video.width = 320;
                            video.height = 240;

                            document.body.appendChild(video);
                            document.body.appendChild(photo);

                            navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia);

                            play();
                            setupPhotoBooth();

                        } ()

                    }


                })();

            function SendBack() {
                var btn = document.getElementById("<%= btnSavePicture.ClientID %>");
                btn.click();
            }

    </script>

    </div>