ASP.NET 网络摄像头显示答案

【问题标题】：ASP.NET Webcam DisplayASP.NET 网络摄像头显示
【发布时间】：2015-06-13 23:06:58
【问题描述】：

我正在用 VB 编写一个 asp.net 站点，并试图通过 javascript 集成网络摄像头功能。我正在使用 webcam.js（在这里找到：https://github.com/jhuckaby/webcamjs）。当我创建一个新项目来测试它并解决问题时，它运行良好。但是，当我尝试将其集成到我的主项目中时，视频没有加载，我只剩下一个空白屏幕。我可以确认它确实可以在 IE、firefox 和 chrome 的辅助项目中工作，但在将其集成到我的主项目中后，它们都不能工作。集成过程并不复杂，主要是复制粘贴，添加必要的引用。起初我遇到了无法识别“网络摄像头”的问题，但在我在 webcam.js 文件的确切位置进行编码后，问题就消失了（我知道这稍后会成为问题，但我更担心得到它现在在调试模式下工作，所以很好）。我的代码如下：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebcamPart.aspx.vb" Inherits="IMHmfgb_VerJon.WebCamPart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager EnablePageMethods="true" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <script src="location of webcam.js"></script>
    <div id="my_camera" style="width:640px; height:480px"></div>
    <asp:Label ID="Label1" runat="server" Font-Size="12"></asp:Label>
    <script type="text/javascript">
        function showCam() {
            Webcam.attach('my_camera');
        }
    </script>
    <asp:Button ID="Button2" runat="server" OnClientClick="showCam();return false" Text="Show Cam" /><asp:Button ID="Button1" runat="server" OnClientClick="take_snapshot();return false" Text="Scan" />
    <script type="text/javascript">
        function take_snapshot() {
            Webcam.snap(function (data_uri) {
                PageMethods.BarcodeScan(data_uri, onSuccess, onFailure);
            })
        };
        function onSuccess(result) {
            document.getElementById('<%=Label1.ClientID%>').innerHTML = result;
        };
        function onFailure(result) {
        document.getElementById('<%=Label1.ClientID%>').innerHTML = result;
        };
    </script>
            </ContentTemplate>
            </asp:UpdatePanel>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="500">
        <ProgressTemplate>
            <asp:Image ImageUrl="~\Pictures\Loading.gif" runat="server" ImageAlign="Middle" />
        </ProgressTemplate>
    </asp:UpdateProgress>
    </form>
</body>
</html>

我不认为上面的代码是问题所在，因为如上所述，它本身就可以正常工作。这让我相信在我的主项目中某处有一些设置或一段代码干扰了视频的加载，但我不知道在哪里寻找或寻找什么。

【问题讨论】：

网络浏览器调试器中的任何错误？
@goldeneye 我看不到，显示的只是我的两个按钮。我激活了 showCam 按钮，然后尝试右键单击网络摄像头视频的位置，显示的唯一两件事是“电影未加载...”灰显和“关于 Adobe Flash Player 17.0.0.134...”。如果我单击快照按钮，将弹出一个消息框，显示“Webcam.js 错误：尚未加载网络摄像头”。
听起来文件的顺序可能有误？我记得我的也有同样的错误，结果是调用脚本的顺序错误。
@goldeneye 你能详细点吗？你是什么意思文件可能是错误的顺序？
查看您的 sn-p 代码似乎没有问题..我会尝试在我自己的 IDE 上复制它

标签： javascript asp.net webcam webcam.js

【解决方案1】：

而且，经过大量故障排除后，我解决了自己的问题。显然，仅在以下代码块中声明 webcam.js 文件的位置是不够的：

<script src="location of webcam.js"></script>

您需要将 webcam.js 和 webcam.swf 文件放在与使用它们的页面相同的文件夹中。我通过查看 chrome 中的错误控制台发现了这一点。我认为 IE 中的错误是相同的，并且由于我的网站是为在 IE 中运行而构建的，所以我首先在那里检查。

【讨论】：