能够正常使用的,经过测试的java+jquery+webcam调用本地摄像头拍照,然后将拍照结果上传数据库blob字段功能的实现(一)

时间:2021-12-30 12:54:43

    近期项目中有调用本地摄像头拍照然后将拍照结果上传数据库blob字段的需求,想了很多的解决方案,由于各种原因都pass掉了,几经周折,最终决定采用jquery webcam这个jquery网络摄像头插件。这里是他的官方网站(应该是吧:) )点点点jquery网络摄像头插件官网。但是各位看官可能会发现,我勒个去,英文的+PHP的+案例挺简单的+上网搜各种搜不全的+...,反正接下来的时间是陷入超级dt的干掉bug死循环,找啊找,编啊编最终凑出来一整套能够正常使用的----我不知道叫啥了现在。好了废话说的够多了,接下来跟各位看官分享整个流程中的关键代码。当然,还是那句话,以上及以下均属个人拙见,欢迎各位看官指正,当然,大神勿喷哦~。

   这里不妨啰嗦一句,来解释一下为何将本文分成两部分,且看标题“经过测试的java+jquery+webcam调用本地摄像头拍照,然后将拍照结果上传数据库blob字段功能的实现”:

      1、java+jquery+webcam调用本地摄像头拍照;

       2、将结果上传至blob;

     因为考虑到可能一篇文章篇幅太长,可是单独写成几篇文章不能够系列化的总结,但是对于零零散散的效果不好,所以打算写两部分,还望各位看官理解。至此废话真正结束,开始进入正题。

    jquery webcam的介绍大家看上面提供的官网,里面有对它的介绍,这里直接贴源码了,各位看官根据自己的需求改吧:


  前端页面:

<label class="layui-form-label" style="width:60px;">尿检照片<br/></label>
<div id="picView" style="width:296px;height:240px;margin-left:73px;">
<div id="webcam" style="width:286px;height:240px"></div>
</div>

前端页面对应js:

java后台处理
插件下载:https://github.com/infusion/jQuery-webcam插件使用注意事项:注意jquery.webcam.js中swffile的路径指向一定要正确