`

jsp调用摄像头拍照,控制摄像头操作

阅读更多
代码下载在最下面,使劲的往下拽吧
代码下载在最下面,使劲的往下拽吧
代码下载在最下面,使劲的往下拽吧
--------------------------------------------------------------------

1.前台jsp页面代码
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>video cap control demo</title>
<script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="test1.js"></script>
</head>
<body>

<form action="<%=request.getContextPath()%>/servlet/VideoCap" id="cap_form" method="post">
<input type="hidden"  id="picData" name="picData">
<object classid="clsid:34681DB3-58E6-4512-86F2-9477F1A9F3D8"
id="WebVideoCap1" codebase="<%=request.getContextPath()%>/cabs/Package.cab#version=1,0,0,50" width="636" height="238">
<param name="Visible" value="0">
<param name="AutoScroll" value="0">
<param name="AutoSize" value="0">
<param name="AxBorderStyle" value="1">
<param name="Caption" value="WebVideoCap">
<param name="Color" value="4278190095">
<param name="Font" value="宋体">
<param name="KeyPreview" value="0">
<param name="PixelsPerInch" value="96">
<param name="PrintScale" value="1">
<param name="Scaled" value="-1">
<param name="DropTarget" value="0">
<param name="HelpFile" value>
<param name="PopupMode" value="0">
<param name="ScreenSnap" value="0">
<param name="SnapBuffer" value="10">
<param name="DockSite" value="0">
<param name="DoubleBuffered" value="0">
<param name="ParentDoubleBuffered" value="0">
<param name="UseDockManager" value="0">
<param name="Enabled" value="-1">
<param name="AlignWithMargins" value="0">
<param name="ParentCustomHint" value="-1">
</object>
<hr/>
<input type="button" value="隐藏控制按钮" id="btn_hidden_btns">
<input type="button" value="显示控制按钮" id="btn_show_btns">
<input type="button" value="开始捕获" id="btn_start">
<input type="button" value="停止捕获" id="btn_stop">
<input type="button" value="照相" id="btn_cap_only">
<input type="button" value="照相并用ajax方式提交" id="btn_cap">
<input type="button" value="照相并用非ajax方式提交" id="btn_submit">
<input type="button" value="不照相直接提交" id="btn_submit_only">
<input type="button" value="只获取base64数据" id="btn_getdata_only">
<input type="button" value="清除数据" id="btn_clear">


<hr/>
jpeg格式base64编码数据内容:
<textarea rows="30" cols="50" id="base64_jpeg" name="base64_jpeg"></textarea>
bmp格式base64编码数据内容:
<textarea rows="30" cols="50" id="base64_bmp" name="base64_bmp"></textarea>

</form>
</body>
</html>

------------------------------------------------------------------
2.js文件 test1.js

String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2);
}

$(function() {

$('#btn_hidden_btns').click(function() {
document.getElementById('WebVideoCap1').hiddenControllButtons();
document.getElementById('WebVideoCap1').autofill(636, false);

}), $('#btn_show_btns').click(function() {
document.getElementById('WebVideoCap1').showControllButtons();
document.getElementById('WebVideoCap1').autofill(636, true);
}), $('#btn_start').click(function() {
document.getElementById('WebVideoCap1').start();

}), $('#btn_stop').click(function() {
document.getElementById('WebVideoCap1').stop();

}), $('#btn_cap_only').click(function() {
document.getElementById('WebVideoCap1').cap();

}), $('#btn_cap').click(function() {
document.getElementById('WebVideoCap1').cap();
document.getElementById('base64_jpeg').value = document
.getElementById('WebVideoCap1').jpegBase64Data;
document.getElementById('base64_bmp').value = document
.getElementById('WebVideoCap1').bmpBase64Data;
document.getElementById("picData").value = document
.getElementById('WebVideoCap1').jpegBase64Data;

ajax_post();
}), $('#btn_submit_only').click(function() {
document.getElementById('WebVideoCap1').cap();
document.getElementById('base64_jpeg').value = document
.getElementById('WebVideoCap1').jpegBase64Data;
document.getElementById('base64_bmp').value = document
.getElementById('WebVideoCap1').bmpBase64Data;
document.getElementById("picData").value = document
.getElementById('WebVideoCap1').jpegBase64Data;

alert(document.getElementById("picData").value.length);
document.forms[0].submit();

}), $('#btn_getdata_only').click(function() {
document.getElementById('base64_jpeg').value = document
.getElementById('WebVideoCap1').jpegBase64Data;
document.getElementById('base64_bmp').value = document
.getElementById('WebVideoCap1').bmpBase64Data;
document.getElementById("picData").value = document
.getElementById('WebVideoCap1').jpegBase64Data;

alert(document.getElementById("picData").value.length);
}), $('#btn_clear').click(function() {
        document.getElementById('WebVideoCap1').clear();
}), $('#btn_submit').click(function() {
document.getElementById('WebVideoCap1').cap();
document.getElementById('base64_jpeg').value = document
.getElementById('WebVideoCap1').jpegBase64Data;
document.getElementById('base64_bmp').value = document
.getElementById('WebVideoCap1').bmpBase64Data;
document.getElementById("picData").value = document
.getElementById('WebVideoCap1').jpegBase64Data;

alert(document.getElementById("picData").value.length);
document.forms[0].submit();
});

});

function ajax_post() {
var base64_data = document.getElementById('WebVideoCap1').jpegBase64Data;
$.ajax({
url : 'http://localhost:8080/VideoCap/servlet/VideoCap4Ajax',
type : 'POST',
dataType : 'jason',
data : {
picData : "'" + base64_data + "'"
},
timeout : 1000,
success : callbackfun
});

}

function callbackfun(data) {
var obj = eval('(' + data + ')');

if ('ok' == obj.savestatus) {
alert('照片采集成功!');
}

}

3.java代码
-------------------------------------------------------------------
package com.demo;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import sun.misc.BASE64Decoder;

/**
* Servlet implementation class VideoCap
*/
public class VideoCap extends HttpServlet {
private static final long serialVersionUID = 1L;
private String savePath;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public VideoCap() {
        super();
        // TODO Auto-generated constructor stub
    }

/**
* @see Servlet#init(ServletConfig)
*/
public void init(ServletConfig config) throws ServletException {
savePath=config.getServletContext().getRealPath("/")+"//pics//";
File tmp_path=new File(savePath);
tmp_path.mkdirs();

System.out.println("照片数据保存路径:"+savePath);
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String pic_base_64_data=request.getParameter("picData");
//System.out.println("图片数据:"+pic_base_64_data);
BASE64Decoder decode=new BASE64Decoder();
byte[] datas=decode.decodeBuffer(pic_base_64_data);
String filename=String.valueOf(System.currentTimeMillis())+".jpg";
File file=new File(this.savePath+filename);
OutputStream fos=new FileOutputStream(file);
System.out.println("照片文件名称:"+filename);
fos.write(datas);

fos.close();
response.setContentType("text/html");
PrintWriter out=response.getWriter();

out.print("<img src='"+request.getContextPath()+"//pics//"+filename+"'/>");
out.flush();
out.close();
}

}
分享到:
评论
7 楼 fdx会爬出这个坑 2016-09-19  
1楼,js报错那个解决了吗?
6 楼 aiyuaichou 2014-09-28  
如果我想页面获取服务端的摄像头视频该怎么办啊,目前的ocx控件获取的是客户端摄像头,并播放视频。能否把获取摄像头设备放后台,然后前台直接插入一个播放器播放url呢
5 楼 tianqiulian 2013-06-19  
现在正在做这方面的项目,下载楼主的代码学习学习
4 楼 wxf80magic2010 2012-07-02  
3 楼 ygvbnh 2012-03-21  
是啊 js报错啊 怎么解决
2 楼 effort_fan 2010-10-25  
学习了,谢谢,可能有些难
1 楼 半条恶棍 2010-08-26  
document.getElementById('WebVideoCap1').start(); 等的时候,
在调用object的时候,报出了javascript错误,说是不支持属性或方法。

我是用代码中的普通网页来试演的,为什么呢?

能给解释一下吗?

相关推荐

    多种方式ASP调用摄像头拍照并保存插件

    标题中的“多种方式ASP调用摄像头拍照并保存插件”是指在不同的Web开发环境中,如ASP、ASP.NET、JSP和PHP,实现调用用户电脑或服务器上的摄像头进行拍照,并将拍摄的照片保存到服务器的技术解决方案。这个插件可能...

    JSP调用摄像头拍照上传服务器.zip

    JSP调用手机摄像头拍照上传至阿里云服务器,亲测可用。

    在jsp中通过flash调用摄像头拍照

    在JavaServer Pages (JSP) 中,通过Flash技术来调用摄像头进行拍照是一种常见的功能实现方式,尤其是在Web应用程序中创建在线拍照或者视频聊天等场景。本文将详细讲解如何在JSP中集成Flash来调用用户的摄像头,并...

    java调用电脑摄像头拍照

    以上步骤是基础的Java调用摄像头拍照的流程。如果需要更高级的功能,比如预览、调整摄像头参数或者处理实时视频流,JavaCV库提供了丰富的API供开发者使用。同时,考虑到跨平台兼容性,确保在不同操作系统上测试代码...

    简单js html实现调用摄像头扫码功能-js解析二维码

    在现代Web开发中,利用JavaScript和HTML可以实现许多丰富的交互功能,其中之一就是调用摄像头进行实时扫码。这个功能常用于移动应用或者网页上的快速信息录入,例如登录验证、支付确认等场景。本项目通过简单的JS和...

    flash网页调用摄像头制作头像

    jsp+servlet实现,包括后台保存为图片代码。 两种模式: 1:直接修改网上图片 ...2:接用本地摄像头,拍照后处理上传。 整个工程,源码一起上传,下载eclipse导入后直接可以测试。 flash为:AvatarEditor.swf

    html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载

    3.控件方法调用说明 01 //启动摄像头 02 Camer.initCamer(0,10); 03 //点击拍照 04 Camer.TakePhoto("D:/test1.bmp"); 05 //关闭摄像头 06 Camer.CloseDev(); 07 //上传已拍照的相片 08 Camer.UpFileNew("D...

    调用手机摄像头拍照并保存到本地

    在移动应用开发中,调用手机摄像头拍照并保存到本地是一项常见的功能,广泛应用于社交、电商、生活服务等各种类型的APP中。本知识点将详细介绍如何实现这一功能,主要涉及Android和iOS两大主流移动操作系统。 首先...

    html5实现摄像头拍照并使用java进行照片保存

    在本文中,我们将深入探讨如何使用HTML5实现摄像头拍照功能,并结合Java技术将拍摄的照片保存到服务器。HTML5的WebRTC(Real-Time Communication)API为我们提供了访问用户设备摄像头的能力,而Java作为后端语言,...

    jsp flash 摄像头源码下载

    在摄像头操作方面,Flash提供了ACTIONSCRIPT API,可以调用用户的摄像头设备,进行图像捕获、视频流处理等操作。 **知识点三:Flash与摄像头交互** Flash通过`Camera`对象可以访问用户的摄像头,并通过`NetStream`...

    flash摄像头拍照上传,支持jsp,php,asp,.net,采用base64加密图片

    在摄像头拍照上传的场景中,Flash提供了一个API接口,使得网页应用可以调用用户的电脑摄像头。 2. **摄像头支持**:Flash提供了一套API,名为`Camera`对象,可以用来获取用户的摄像头流,并允许用户进行拍照或录像...

    使用jQuery-webcam摄像头拍照demo

    在本文中,我们将深入探讨如何使用jQuery-webcam插件实现在Web页面上调用摄像头进行拍照的功能。jQuery-webcam是一款非常实用的JavaScript库,它允许开发者轻松地将摄像头功能集成到网页中,为用户提供实时预览、...

    flash实现网页调用摄像头制作头像

    jsp+servlet实现,包括后台保存为图片代码。 两种模式: 1:直接修改网上图片 ...2:接用本地摄像头,拍照后处理上传。 整个工程,源码一起上传,下载eclipse导入后直接可以测试。 flash为:AvatarEditor.swf

    java调用摄像头printScreen4web源码借鉴.pdf

    标题中的"java调用摄像头printScreen4web源码借鉴.pdf"指的是一个Java项目,该项目旨在实现Web应用程序调用用户电脑的摄像头进行图像捕获、截图,并将这些图像上传到服务器的功能。描述中提到,开发者已经成功实现了...

    jsp实现在线拍照并上传至服务器

    在IT行业中,尤其是在Web开发领域,用户经常需要上传图片或者进行在线交互操作,例如在线拍照并上传至服务器。本教程将深入探讨如何使用JavaServer Pages(JSP)结合Flash技术来实现这一功能。JSP是一种动态网页技术...

    ImageCapOnWeb20121012版本

    ImageCapOnWeb控件20121012版本,用于解决web编程中的摄像头拍照及web编程中的图形图像编辑,适合在jsp,asp.net,php等程序内集成使用。 这个版本增加了N多的新特性: 1.支持在拍照后及编辑后直接显示图像文件大小。...

Global site tag (gtag.js) - Google Analytics