Question

我希望创建一个ASP.Net网站，用户可以从网站上捕获图像并将其保存到我服务器上的数据库中。我尝试过使用TWAIN，但似乎无法找到任何支持此功能的新相机。尝试使用Silverlight和WIA时也一样。这样做有没有人取得任何成功？

客户端计算机将具有我推荐的任何网络摄像头，因此如果您知道有效的型号，请分享。我没试过微软LifeCam和罗技。

如果您已经完成了这项工作或现在我将如何真正感谢您的帮助。谢谢你的时间。

Answer 1

如果您的目标是较新的浏览器（那些支持WebRTC getUserMedia方法的浏览器），那么Photobooth.js可能是您的选择。

引自WebMonkey：'引起我们注意的最新WebRTC热点是开发人员Wolfram Hempel的Photobooth.js，一个用于处理设备摄像头的JavaScript库。'

http://www.webmonkey.com/2012/12/add-an-html5-webcam-to-your-site-with-photobooth-js/

lib本身：

http://wolframhempel.com/2012/12/02/photobooth-js/

希望它适合你！

Answer 2

asp.net是一种服务器端技术，无法连接到客户端网络摄像头。您的浏览器是高度沙盒的，不太可能允许访问用户的网络摄像头。

考虑构建Flash或Silverlight组件以访问网络摄像头。

例外情况是，在许多移动平台上，浏览器可以通过<input type="file" />标签访问相机和图片库。这在Android上已经存在了一段时间，现在是Safari v6的一个选项。我不知道任何允许直接访问连接的网络摄像头的桌面浏览器。

奖励解决方法是让用户拍照，然后通过文件上传来访问它们。

Answer 3

通过让用户在那台计算机上安装Google Chrome Frame然后使用canvas标签来获取图像，我能够实现我想要的效果。这里有一些示例代码：

    <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>

如何从客户端网络摄像头获取图像

3 个答案: