65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Dynamsoft 完全控制您的网络摄像头

Dynamsoft
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2012 年 9 月 21 日

CPOL

3分钟阅读

viewsIcon

31870

downloadIcon

1348

在 IE、Firefox、Chrome、Safari 和 Opera 中捕获来自您摄像头的图像和视频流。

引言

DirectShow 是 Microsoft 为软件开发人员提供的多媒体框架和 API，用于对媒体文件或流执行各种操作。对于开发人员来说，使用该 API 与摄像头交互是一个不错的选择，例如捕获视频流、图像配置文件、患者图表、客户身份证等。

但是，任何试图直接使用该 API 的人都会发现它难以学习和实现到他们的应用程序中。虽然它可能是应用程序的重要组成部分，但它也只是一个小部分。因此，不值得花太多时间在上面。开发人员，尤其是 Web 应用程序开发人员，确实需要解决这个问题。考虑到这一点，Dynamsoft 开发了 ImageCapture Suite，这是一个用于图像捕获的浏览器插件。此 SDK 基于 DirectShow API，并且可以很好地与所有 USB 视频设备类 (UVC) 和 Windows 图像采集 (WIA) 兼容的摄像头配合使用。除了捕获图像之外，该 SDK 还允许您轻松编辑图像并将图像上传到您的 Web 服务器或数据库。

在本文中，我将与您分享 ImageCapture Suite 的主要功能和一些示例代码。如果您有兴趣，还提供了30 天免费试用下载链接。

主要特点

  • 从 UVC 和 WIA 兼容的摄像头捕获图像和实时视频流。
  • 与 Windows 上的 IE（32 位和 64 位）、Firefox、Chrome、Safari 和 Opera 兼容。
  • 自定义用于捕获图像的设置，包括分辨率、亮度、对比度、色调、饱和度等。
  • 以旋转、裁剪、镜像、翻转、擦除和更改图像大小等方式编辑捕获的图像。
  • 放大/缩小选定的图像。
  • 将图像保存到本地磁盘。
  • 将图像上传到 Web 服务器、FTP 站点或数据库。
  • 支持 SSL 以实现安全图像数据传输。
  • 支持 BMP、JPEG、PNG、（多页）TIFF 和（多页）PDF。

示例代码

在本节中，我将向您展示示例代码片段（您可以在下载的示例代码中找到相同的代码）以实现三个基本的图像处理过程：图像抓取、编辑和上传。

  1. 从您的摄像头捕获图像。 
DWObject.IfShowUI = document.getElementById("ShowUIForWebcam").checked; //whether to show the user interface of the webcam
        
    if (DW_InWindows) {
        DWObject.SelectMediaTypeByIndex(document.getElementById("MediaType").selectedIndex);
        DWObject.SelectResolutionForCamByIndex(document.getElementById("ResolutionWebcam").selectedIndex);

    }
    }
    DWObject.IfDisableSourceAfterAcquire = true;

您可以选择一个摄像头驱动程序并从选定的摄像头捕获图像。

 

编辑捕获的图像。 

捕获图像后，您可以编辑它们以更好地满足您的要求。

//====================Edit Image=====================//

function btnShowImageEditor_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.ShowImageEditor();
    DW_TempStr = DW_TempStr +"Show Image Editor: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}

function btnRotateRight_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.RotateRight(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Rotate right: " ;
    if (DW_CheckErrorString()) {
        return;
}

function btnMirror_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.Mirror(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Mirror: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}
function btnFlip_onclick() {
    if (!DW_CheckIfImagesInBuffer()) {
        return;
    }
    DWObject.Flip(DWObject.CurrentImageIndexInBuffer);
    DW_TempStr = DW_TempStr +"Flip: " ;
    if (DW_CheckErrorString()) {
        return;
    }
}

如您在上面看到的，我用几行代码添加了“显示图像编辑器”、“向右旋转”和“更改图像大小”功能。根据您的要求，您还可以向 Web 应用程序添加裁剪、添加文本等功能。以下是内置图像编辑器的快照

 

将捕获的图像保存到您的本地磁盘。
现在您可能想将捕获的图像保存到您的本地磁盘。下面的示例代码向您展示了如何保存图像。

function btnSave_onclick(){

    var i, strimgType_save;
    var NM_imgType_save = document.getElementsByName("imgType_save");
    for(i=0;i<5;i++){
        if(NM_imgType_save.item(i).checked == true){
            strimgType_save  = NM_imgType_save.item(i).value;
            break;
        }
    }
    DWObject.IfShowFileDialog = true;
    txt_fileNameforSave.className = "";
   

    var strFilePath = "C:\\" + txt_fileNameforSave.value + "." + strimgType_save;
    if (strimgType_save == "tif" && MultiPageTIFF_save.checked) { //save as multi-page tif
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            bSave = DWObject.SaveAllAsMultiPageTIFF(strFilePath); 
        }
        else {
            bSave = DWObject.SaveSelectedImagesAsMultiPageTIFF(strFilePath);
        }
    }
    else if (strimgType_save == "pdf" && document.getElementById("MultiPagePDF_save").checked) { //save as multi-page pdf
        if ((DWObject.SelectedImagesCount == 1) || (DWObject.SelectedImagesCount == DWObject.HowManyImagesInBuffer)) {
            bSave = DWObject.SaveAllAsPDF(strFilePath);
        }
        else {
            bSave = DWObject.SaveSelectedImagesAsMultiPagePDF(strFilePath);
        }
    }
    else {
        switch (i) { //save as a single page bmp/jpg/tif/png/pdf
            case 0: bSave = DWObject.SaveAsBMP(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 1: bSave = DWObject.SaveAsJPEG(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 2: bSave = DWObject.SaveAsTIFF(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 3: bSave = DWObject.SaveAsPNG(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
            case 4: bSave = DWObject.SaveAsPDF(strFilePath, DWObject.CurrentImageIndexInBuffer); break;
        }
    }
}

部署

一个好的组件应该易于开发人员部署，更重要的是，对客户来说易于安装和使用。完整的源代码可以从文章中下载。

有一个 "Scripts\ProductKey.js" 文件，其中包含一个临时试用产品密钥。如果在运行示例时出现许可证错误，您可以从 Dynamsoft 的网站下载 ImageCapture Suite 以获取有效的试用许可证。ImageCapture Suite 30 天免费试用下载

要从不同的客户端机器运行示例，您可以简单地将包含 ImageCapture Suite 的示例代码复制到您的 Web 服务器（IIS、Apache 或 Tomcat）。用户只需在第一次访问网页时下载并安装浏览器中的 ActiveX/插件。有关如何部署 ImageCaptureSuite 的更多详细信息

在线演示也供您参考。
ImageCapture Suite 在线演示

如果您有任何问题，请随时通过 support@dynamsoft.com 与我们的支持团队联系。

© . All rights reserved.