在 ASP.NET WebForms 中，最推荐的方式是纯 HTML5 + JavaScript 实现摄像头调用和拍照，无需安装任何插件，电脑和手机浏览器都能用。下面给你详细方案。 640 480-340 255 要匹配适应手机。
其它项目挂在https网站虚拟目录下，不必独立再建立网站，只是该项目的配置文件web.config可能与https有部分冲突，在线调试，根据提示添加或补充配置节即可。
推荐方案：HTML5 getUserMedia + Canvas（零依赖）
这是目前最通用的方案，兼容 Chrome、Edge、Firefox、Safari 以及手机浏览器（iOS 11+、Android 5+）。
前端页面代码（FaceCapture.aspx）
html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FaceCapture.aspx.cs" Inherits="YourProject.FaceCapture" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta charset="utf-8" />
<title>人脸识别拍照</title>
<style>
#video { width: 640px; height: 480px; border: 1px solid #ccc; display: block; margin: 10px auto; }
#canvas { display: none; }
#snapshot { width: 640px; height: 480px; border: 1px solid #ccc; display: none; margin: 10px auto; }
.btn { padding: 8px 20px; margin: 5px; font-size: 14px; cursor: pointer; }
#status { text-align: center; color: #666; margin: 10px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<h2 style="text-align:center;">人脸识别 — 请拍照</h2>
<video id="video" autoplay playsinline></video>
<canvas id="canvas"></canvas>
<img id="snapshot" alt="抓拍结果" />
<div style="text-align:center; margin-top:10px;">
<button type="button" class="btn" id="btnOpen" onclick="openCamera()">打开摄像头</button>
<button type="button" class="btn" id="btnCapture" onclick="capturePhoto()" style="display:none;">拍照</button>
<button type="button" class="btn" id="btnRetake" onclick="retake()" style="display:none;">重拍</button>
</div>
<div id="status"></div>
<!-- 隐藏字段，存放 base64 图片数据，提交给后端 -->
<asp:HiddenField ID="hfBase64Image" runat="server" />
<div style="text-align:center; margin-top:15px;">
<asp:Button ID="btnSubmit" runat="server" Text="提交识别" CssClass="btn" OnClientClick="return submitPhoto();" />
</div>
</form>
<script>
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var snapshot = document.getElementById('snapshot');
var status = document.getElementById('status');
var ctx = canvas.getContext('2d');
var base64Data = '';
// 打开摄像头
async function openCamera() {
try {
var constraints = {
video: {
width: { ideal: 640 },
height: { ideal: 480 },
facingMode: 'user' // 手机用前置摄像头，电脑用默认摄像头
}
};
var stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
video.style.display = 'block';
document.getElementById('btnOpen').style.display = 'none';
document.getElementById('btnCapture').style.display = 'inline-block';
snapshot.style.display = 'none';
status.textContent = '摄像头已打开，请调整角度后拍照';
} catch (err) {
status.textContent = '摄像头打开失败：' + err.message;
console.error(err);
}
}
// 拍照
function capturePhoto() {
// 将 video 画面绘制到 canvas
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// 转为 base64（JPEG 格式，质量 0.8）
base64Data = canvas.toDataURL('image/jpeg', 0.8);
// 显示抓拍结果
snapshot.src = base64Data;
snapshot.style.display = 'block';
video.style.display = 'none';
document.getElementById('btnCapture').style.display = 'none';
document.getElementById('btnRetake').style.display = 'inline-block';
status.textContent = '拍照成功，可点击"重拍"重新拍摄或直接提交';
}
// 重拍
function retake() {
snapshot.style.display = 'none';
video.style.display = 'block';
document.getElementById('btnRetake').style.display = 'none';
document.getElementById('btnCapture').style.display = 'inline-block';
status.textContent = '请重新拍照';
}
// 提交照片到后端
function submitPhoto() {
// 将 base64 存入 HiddenField，表单提交时传给后端
document.getElementById('<%= hfBase64Image.ClientID %>').value = base64Data;
return true;
}
</script>
</body>
</html>
后端代码（FaceCapture.aspx.cs）
csharp
using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
namespace YourProject
{
public partial class FaceCapture : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string base64Image = hfBase64Image.Value;
if (string.IsNullOrEmpty(base64Image))
{
Response.Write("未收到图片数据");
return;
}
// 去掉 data:image/jpeg;base64, 前缀
string base64String = base64Image.Contains(',')
? base64Image.Substring(base64Image.IndexOf(',') + 1)
: base64Image;
// 转成 byte[]（如果需要存文件或进一步处理）
byte[] imageBytes = Convert.FromBase64String(base64String);
// 调用百度人脸识别
var loginResult = YourLoginClass.LoginUser(
userName: "张三",
imageBase64: base64String // 直接传 base64 字符串给百度 API
);
Response.Write(loginResult["success"].ToString() == "True"
? "识别成功：" + loginResult["message"]
: "识别失败：" + loginResult["message"]);
}
}
}
}
|