我有一个在线预订管理系统,需要捕获被预订到系统中的人员的图像。我目前支持从客户端机器上的本地目录(例如 Facebook、LinkedIn 等)手动将图像上传到网站。但是,我还需要能够让客户端单击一个按钮,使他们能够使用连接到客户端计算机的摄像头(网络摄像头或其他方式)来拍摄快照并自动将其上传到服务器。
客户端环境是基于 Windows 的,我的开发环境是 ASP.Net MVC 3。
是否有任何第三方 ActiveX 或 Flash 控件可以做到这一点?
我有一个在线预订管理系统,需要捕获被预订到系统中的人员的图像。我目前支持从客户端机器上的本地目录(例如 Facebook、LinkedIn 等)手动将图像上传到网站。但是,我还需要能够让客户端单击一个按钮,使他们能够使用连接到客户端计算机的摄像头(网络摄像头或其他方式)来拍摄快照并自动将其上传到服务器。
客户端环境是基于 Windows 的,我的开发环境是 ASP.Net MVC 3。
是否有任何第三方 ActiveX 或 Flash 控件可以做到这一点?
我找到了一个 3rd 方开源 Flash + JavaScript 库,它使这个相当简单,称为“ jpegcam ”。
以下代码是针对Asp.Net MVC 3 (Razor View + T4MVC)
.
第 1 步:包含 javascript 库
<script type="text/javascript" src="@Url.Content("~/Scripts/jpegcam/htdocs/images.js")"></script>
第 2 步:设置 jpegcam 并连接必要的挂钩
<script type="text/javascript">
webcam.set_api_url('@Url.Action(MVC.Images.Snapshot())');
webcam.set_swf_url('@Url.Content("~/Scripts/jpegcam/htdocs/webcam.swf")');
webcam.set_quality(90); // JPEG quality (1-100)
webcam.set_shutter_sound(false, '@Url.Content("~/Scripts/jpegcam/htdocs/shutter.mp3")');
webcam.set_hook('onComplete', 'upload_complete');
document.write(webcam.get_html(320, 240));
function upload() {
webcam.freeze(); // Snapshot the image from the camera
webcam.upload(); // POST the data w/ content type 'image/jpeg'
}
function upload_complete(response) {
var json = jsonParse(response);
if (json.Redirect) {
window.location.replace(json.Redirect);
} else if (json.Error) {
Notifier.Error('Error', json.Error.Message);
webcam.reset();
} else {
Notifier.Error('Error', 'An unknown error has occurred.');
webcam.reset();
}
}
</script>
注意:webcam.set_api_url()
调用设置 POST url。
第 3 步:连接视图中的按钮
<p class="actions">
<input id="capture-configure" class="secondary-button" type="button" value="Configure..." onclick="webcam.configure()" />
<input id="capture-submit" class="primary-button" type="button" value="Snap Mugshot" onclick="upload()" />
<span class="alternate">
or <a class="cancel" href="@Url.Action(MVC.Images.View())">Cancel</a>
</span>
</p>
第 4 步:创建控制器操作以服务于 POST
[HttpPost]
public virtual ActionResult Snapshot()
{
var image = new System.Web.Helpers.WebImage(Request.InputStream);
// Do fun, amazing things with the jpeg image
return RedirectToAction(MVC.Images.View());
}
注意:System.Web.Helpers.WebImage
是“microsoft-web-helpers”NuGet 包的一部分。
也许您可以为此使用 Silverlight 4?版本 4 支持网络摄像头。