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 相关文章推荐
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
详解Node 定时器
Feb 26 Javascript
vue自定义一个v-model的实现代码
Jun 21 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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
松下Panasonic RF-B65电路分析
2021/03/02 无线电
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
浅谈js的html元素的父节点,子节点
2016/08/06 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
JS加密插件CryptoJS实现的Base64加密示例
2020/08/16 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
Python的标准模块包json详解
2017/03/13 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python中安装django模块的方法
2020/03/12 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python实现图片转字符画的完整代码
2021/02/21 Python
猫咪家具:CatsPlay
2018/11/03 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
《植物妈妈有办法》教学反思
2014/02/25 职场文书
教师自我鉴定范文
2014/03/20 职场文书
市场部经理岗位职责
2014/04/10 职场文书
社区娱乐活动方案
2014/08/21 职场文书
2014年学校领导班子对照检查材料
2014/09/19 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
基于Python实现股票收益率分析
2022/04/02 Python