找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,极速登录

直接调用电脑摄像头拍照上传的实现

恍1 实名认证 番薯互助团队 互助砖家
发表于 2017-12-22 14:45 | 显示全部楼层 |取消关注该作者的回复
开场的废话我就不说了 w.gif


1.条件
有摄像头,浏览器的安全性要设置一下,还要有设置信任你这个网站让调摄像头。因为是JS调用本地摄像头,根据现在的原则,有点不安全,所以会导致http没法调用,https能(应该是)。
但是不影响本地测试。这部分不细说,有问题可以回帖。

2.步骤
第一步:加载结束事件加上
  1. $("#C2-0-0").html('<video id="video" autoplay="" style="width:640px;height:480px"></video>');
  2. $("#canvas").hide();

  3. var flage= 0;
  4. if( flage==0 ){
  5.         flage=1;
  6.         


  7. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  8.                                 window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
  9.                                 var video = document.querySelector('video');
  10.                                 navigator.getUserMedia({
  11.                                         video: true
  12.                                 },
  13.                                 function(stream) {
  14.                                         if(video.mozSrcObject !== undefined) {
  15.                                                 video.mozSrcObject = stream;
  16.                                         } else {
  17.                                                 video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
  18.                                         }
  19.                                         video.play();

  20. $('#inp', parent.document).parent().parent().children('div.fr-core-panel-header').children().children('div:eq(1)').click(function(){

  21.          stream.getVideoTracks()[0].stop();
  22. //window.parent.contentPane.parameterEl.getWidgetByName('serialnumber').fireEvent("click");

  23.          
  24. })
  25.                                        
  26.                                 },
  27.                                 function(error) {
  28.                                         console.log("不支持媒体流~ ", error);
  29.                                 });
  30. }
复制代码
上面的代码大概意思就是给一个单元格加上一个video标签,用来调用摄像头(或者说调用了摄像头之后把摄像头放在哪里)。需要改动的地方就是第一句话的C2。你需要放在哪里


第二步:给页面摸个单元格加上
  1. <canvas id="canvas" width="470px" height="480px" style='position:absolute;left:54px;top:48px'></canvas>
复制代码
并且用html显示。这个意思就是你拍照这一步,你拍了之后把照片放在这里。位置随意。这个照片你可以放出来,也可以隐藏,这个就是你拍出来的照片是什么样子。注意这里的left和top,这是距离上边框和左边框的距离,一般你需要来调整这个位置,以达到调整照片的位置的效果,前面的width和height就是照片的大小,可以根据需要调整。基本上做了这2步,你的页面就可以调用你的摄像头出现视频画面了。


第三步:拍照,把照片拍出来放到canvas里面,出现你的照片
  1. $("#canvas").show();
  2. var video = document.querySelector('video');
  3. var context = canvas.getContext("2d");
  4. context.drawImage(video, 0, 0);
复制代码
把这些代码放到一个按钮这个按钮就是拍照按钮,点击了之后生成照片到canvas。

第四步:将得到的照片保存到数据库
这里说下处理方法。每张图片都有一个base64码,我们得到这个码存起来就行了,区别于图片的好处各位可以百度下。(这个地方如果有大佬指教请指教,这些东西都是我自己学习,自己理解的,可能不是那么专业,但是我们的最终目的是实现对不,不要在意这些细节)
  1. var mm = canvas.toDataURL();
  2. contentPane.setCellValue("A1",null, mm);
  3. setTimeout(function() {   
  4.         kk=contentPane.curLGP.getCellValue("A1").length;
  5.         if(kk!=0)
  6.         {
  7.     _g('${sessionID}').verifyAndWriteReport();
  8.         }
  9.         else
  10.         alert("提交未成功,请重新点击确认!");
  11.    }, 500);
复制代码
这里将得到的代码放到了A1,可以自己改正,存的图片是png,如果有其他的问题或者需要,可以回帖。然后保存的图片就是A1就OK拉,类型2进制。


第五步,将得到的图片取出来,
  1. var t1= FR.remoteEvaluate("sql(\"s\",\"select resimg from pa where   ordid ='"+ordid+"'\",1,1)");
  2. $("#E6-0-0").html('<img src="'+t1+'"></img>');
复制代码

只有一点,必须用img标签,上面的代码放到加载结束后事件,意思就是从数据库取出来,放到img标签,也就是E6。这是这种方法的一个限制,不能是直接从数据集拉出来。
以上都是个人总结,若有大佬指教不胜感激。 拍照.cpt (8.39 KB, 下载次数: 35, 售价: 100 个F豆)

评分

参与人数 3F豆 +2 F币 +52 收起 理由
flyingsnake + 1 实践证明,用https可以使用!
fangzhenlu + 1 学习了
兔子酱 + 52 感谢参与精华帖奖励计划!

查看全部评分

此帖共有 201 位番薯登录后查看
帮助到了,尽量给个最佳呗,QQ547361174,接小活,可以做私人技术支持,提供一对一教学,价格优惠
回复

使用道具 举报

兔子酱 帆软员工 管理员
发表于 2018-1-8 15:12 | 显示全部楼层 |取消关注该作者的回复
根据帆软论坛运营委员最终评分,本篇帖子综合得分52分,具体参见:帆软论坛精华帖奖励计划
恭喜@恍1,同时也希望更多的番薯积极参与精华帖奖励计划!

  • 我也说一句

回复 支持 反对

使用道具 举报

兔子酱 帆软员工 管理员
发表于 2017-12-22 14:55 | 显示全部楼层 |取消关注该作者的回复
已提名精华帖,待论坛运营委员会评分后可评为精华帖,帆软论坛精华帖奖励计划http://bbs.fanruan.com/thread-91079-1-1.html

点评

感谢捧场感谢捧场  发表于 2017-12-22 14:56
  • 我也说一句

回复 支持 反对

使用道具 举报

yiminglian 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2017-12-22 14:59 | 显示全部楼层 |取消关注该作者的回复
哎呀我去厉害啊
  • 我也说一句

回复 支持 反对

使用道具 举报

传说哥 实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-12-22 15:23 | 显示全部楼层 |取消关注该作者的回复
gif图发我,我给你处理下
  • 我也说一句

回复 支持 反对

使用道具 举报

传说哥 实名认证 番薯互助团队 帆软员工 管理员
发表于 2017-12-22 15:47 | 显示全部楼层 |取消关注该作者的回复
不错不错,会玩!
  • 我也说一句

回复 支持 反对

使用道具 举报

flyingsnake 社区微信达人实名认证 番薯互助团队 文档共创团队 互助叫兽、助理编辑
发表于 2017-12-22 16:07 | 显示全部楼层 |取消关注该作者的回复
传个模板上来耍耍?
  • 我也说一句

回复 支持 反对

使用道具 举报

好望角 实名认证 渐入佳境(Lv2)
发表于 2017-12-23 09:20 | 显示全部楼层 |取消关注该作者的回复
传个免费的模板让大家耍耍
  • 我也说一句

踏踏实实拉数据,认认真真学帆软;不要捉急;学习在于积累;先积累经验
回复 支持 反对

使用道具 举报

郁金香  初出茅庐(Lv3)
发表于 2017-12-23 12:51 | 显示全部楼层 |取消关注该作者的回复
哇!最喜欢这种直接上代码的啦!
10086个赞!
  • 我也说一句

回复 支持 反对

使用道具 举报

fytel 实名认证 初学乍练(Lv1)
发表于 2018-1-5 13:47 | 显示全部楼层 |取消关注该作者的回复
实在是牛。。。
  • 我也说一句

回复 支持 反对

使用道具 举报

张颖杰 社区微信达人实名认证 渐入佳境(Lv2)
发表于 2018-1-9 21:46 | 显示全部楼层 |取消关注该作者的回复
(⊙o⊙)…
一大串看不懂的代码,就让我头疼
要学多少门语言才能顺利对接各种应用呢?
  • 我也说一句

回复 支持 反对

使用道具 举报

恍1 实名认证 番薯互助团队 互助砖家
发表于 2018-1-9 22:29 | 显示全部楼层 |取消关注该作者的回复
张颖杰 发表于 2018-1-9 21:46
(⊙o⊙)…
一大串看不懂的代码,就让我头疼
要学多少门语言才能顺利对接各种应用呢?

学无止境,这门语言能实现的,另一种语言可以更好的实现。这是发展的趋势,先从应用着手呗,先用后懂
  • 我也说一句

帮助到了,尽量给个最佳呗,QQ547361174,接小活,可以做私人技术支持,提供一对一教学,价格优惠
回复 支持 反对

使用道具 举报

yutingxtz 番薯互助团队 互助新人
发表于 2018-1-15 11:14 | 显示全部楼层 |取消关注该作者的回复
直接用的附件模板,加载打开页面后,摄像头能调用,但是点了拍照按钮,提示 截图201801151113368027.png

可能是以下代码中的id没有获取到
  1. $("#canvas").show();
  2. var video = document.querySelector('video');
  3. var context = canvas.getContext("2d");
  4. context.drawImage(video, 0, 0);
  5. var mm = canvas.toDataURL();
  6. contentPane.getWidgetByName("BC").setVisible(true);
  7. contentPane.getWidgetByName("SXT").setVisible(true);
复制代码
那该 怎么处理呢?

我是在本地演示的,localhost


  收起(5)
  • 恍1 恍1 : 可能是浏览器版本原因,不支持canvas标签,你F12看看有没有这个标签呢
    2018-01-15 12:43 回复
  • 恍1 恍1 : 或者是你第二步没有html显示
    2018-01-15 12:47 回复
  • yutingxtz yutingxtz : 确实是没有这个标签,但单元格里是按Html显示的。用的浏览器也是Chrome的最新版63.0
    不是很明白,为什么没有被执行。
    2018-01-15 13:04 回复
  • 恍1 恍1 : 这个我就有点没办法了,大家都可以,我这里有很多别人成功的案例。你这个情况如果你确定设置是对的,那么就只能考虑是浏览器原因,你换个浏览器或者让同事试试吧
    2018-01-22 11:00 回复
  • 恍1 恍1 : 回复 yutingxtz :对了,要点回复,才有提醒
    2018-01-22 11:01 回复
  • 我也说一句

回复 支持 反对

使用道具 举报

墨軒 实名认证 渐入佳境(Lv2)
发表于 2018-1-22 08:48 | 显示全部楼层 |取消关注该作者的回复
  • 我也说一句

回复 支持 反对

使用道具 举报

simple_paradox 社区微信达人实名认证 番薯互助团队 互助新人
发表于 2018-2-27 07:45 | 显示全部楼层 |取消关注该作者的回复
  • 我也说一句

回复 支持 反对

使用道具 举报

葛智 社区微信达人实名认证 初出茅庐(Lv3)
发表于 2018-3-29 13:11 | 显示全部楼层 |取消关注该作者的回复
666666666666
  • 我也说一句

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册  

本版积分规则

Copyright © 帆软|联系帆软| 联系管理员@兔子酱|免责声明|手机版|帆软论坛 ( 苏ICP备14031611号-3 )

GMT+8, 2018-4-26 17:10 , Processed in 0.963634 second(s), 191 queries , Gzip On.

返回顶部 返回列表