vue的webcamjs集成方式


Posted in Javascript onNovember 16, 2020

记一次在vue中使用webcamjs调取pc端摄像头拍照

说明

本例调用摄像头基于webcamjs

第一步: Photo.vue 组件

<template>
 <div>
  <div id="results">Your captured image will appear here...</div>
  <h1>WebcamJS Test Page</h1>
  <h3>Demonstrates simple 320x240 capture & display</h3>
  <div id="my_camera"></div>
  <form>
   <input type=button value="拍照" @click="take_snapshot()">
  </form>
 </div>
</template>
<script>
import '../assets/webcamjs/webcam.js'
 export default {
 name: 'TakePhoto',
 data() {
  return{
 
  }
 },
 methods: {
   take_snapshot: function () {
    // take snapshot and get image data
    Webcam.snap( function(data_uri) {
     // display results in pages
     document.getElementById('results').innerHTML = 
      '<h2>Here is your image:</h2>' + 
      '<img src="'+data_uri+'"/>';
    } );
   }
   },
   mounted() {
    Webcam.set({
     width: 320,
     height: 240,
     image_format: 'jpeg',
     jpeg_quality: 90
    });
    Webcam.attach( '#my_camera' );
   }
 }
</script>

第二部:使用

<template>
 <div id="app">
  <Photo></Photo>
 </div>
</template>
<script>
import Photo from './components/Photo'
export default {
 name: 'app',
 components: {
  Photo
 }
}
</script>

结果演示

vue的webcamjs集成方式

补充知识:vue网页调用手机摄像头,webview如何实现

近期有个需求,通过vue的网页调用手机摄像头,拍摄完成后,传回照片给vue。

作为刚开始接触安卓的小白,看了非常多的案例,都是新建camera类,处理拍照、拍视频、查看照片等操作。而我的需求非常简单,就是点击按钮,拍照,给网页返回照片而已,不需要如此复杂的操作,于是尝试着用简单的方式完成调用摄像头的功能。

(1)vue端,增加一个a标签,设置跳转关键字camera,这个是安卓识别要调用摄像头的关键点。

vue的webcamjs集成方式

(2)手机端,接受a标签的跳转,注:a标签调用一般会去调用WebViewClient的onPageFinished方法,但是此时的跳转属于非常规跳转,故采用`camera:`标识此次的跳转,然后就会调用WebViewClient的shouldOverrideUrlLoading方法拦截此次跳转,具体写法如下:

vue的webcamjs集成方式

vue的webcamjs集成方式

vue的webcamjs集成方式

基本上就是判断跳转连接中是否包含camera字段了,包含即调用监听事件,利用监听事件调用手机的摄像头,Intent it = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);即可。

不过问题在于WebViewClient的shouldOverrideUrlLoading方法返回对象是boolean类型,那么,我们需要返回的是图片路径或者图片本身,也可以是base64处理过的流,这个类型的返回值对我们没有太多意义,所以设置一个全局变量imageUri,在拍照之前给其赋值,在回调时就利用这个路径可以得到想要的所有格式的图片数据了。

(3)上图,最后一步,完成了就可以直接去vue端接收图片了。

vue的webcamjs集成方式

一枚程序媛,安卓开发新手,做的东西可能比较low,欢迎批评指正。

以上这篇vue的webcamjs集成方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jQuery给动态添加的元素绑定事件的方法
Mar 09 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
微信小程序如何使用云开发
May 17 Javascript
js实现转动骰子模型
Oct 24 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 #Javascript
详解JavaScript原型与原型链
Nov 16 #Javascript
详解JavaScript执行模型
Nov 16 #Javascript
Vue 实现拨打电话操作
Nov 16 #Javascript
微信小程序实现页面左右滑动
Nov 16 #Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 #Javascript
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
Nov 16 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP批量生成缩略图的代码
2008/07/19 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP中加密解密函数与DES加密解密实例
2014/10/17 PHP
php常用表单验证类用法实例
2015/06/18 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python发送Email方法实例
2014/08/21 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
python使用Apriori算法进行关联性解析
2017/12/21 Python
python感知机实现代码
2019/01/18 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python安装后的目录在哪里
2020/06/21 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
大三学生入党思想汇报
2014/01/02 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
群众路线自我剖析及整改措施
2014/11/04 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
污水处理保证书
2015/05/09 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫