vue的webcamjs集成方式

记一次在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 &amp; 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网页调用手机摄像头，webview如何实现

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

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

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

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

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

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

（3）上图，最后一步，完成了就可以直接去vue端接收图片了。

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

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

赞 (0)

相关推荐

  • 40行代码把Vue3的响应式集成进React做状态管理

    前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到React中,可行吗?来试一试吧. 使用示例 话不多说,先看看怎么用的解解馋吧. // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count:

  • vue引用js文件的多种方式(推荐)

    1.vue-cli webpack全局引入jquery (1) 首先 npm install jquery --save (--save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖.) (2)在webpack.base.conf.js里加入 var webpack = require("webpack") (3)在module.exports的最后加入 plugins: [ new webpack.optimize.CommonsChu

  • vue集成openlayers加载geojson并实现点击弹窗教程

    本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程,供大家参考,具体内容如下 第一步:安装vue-cli cnpm install -g @vue/cli 第二步:新建一个项目 1.新建项目 (vue-openlayers为项目名),并选择default模版 vue create vue-openlayers 2.安装openlayers cnpm i -S ol 第三步:写业务代码 1.删除掉HelloWorld.vue 新建 olmap.vue组件 comp

  • Vue实现Layui的集成方法步骤

    前言 在写公司项目时,遇到了集成layim实现在线客服的一个需求,经过我的一番折腾后,终于将layui集成了进来,接下来就跟大家分享下我的解决方案,欢迎各位感兴趣的开发者阅读本文:grin: 获取layim layui官方提供了npm的安装方法,我司使用的是layui正版授权的layim,今天在折腾时发现,从npm仓库获取layui,里面自带了layim,大家可以去白嫖一波,不过大家需要注意版权问题(如下图所示,layui官网进行了声明). 商用项目的话还是建议大家获取正版授权,毕竟作者也不容易

  • vue实现在线预览pdf文件和下载（pdf.js）

    vue实现在线预览pdf文件和下载（pdf.js）

    最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览) 最后选择了pdf.js插件(兼容ie10及以上.谷歌.安卓,苹果) 强烈推荐改插件,以下介绍用法 (1)下载插件 下载路径: pdf.js (2)将下载构建后的插件放到文件中public(vue/cli 3.0) (3)在vue文件中直接使用,贴上完整代码 <template> <div class="wrap"> <iframe :src=

  • vue与django集成打包的实现方法

    1.首先创建 django项目 并在 django项目文件下创建vue项目 2.修改django项目文件下的setting.py 修改django模板路径 指向 vue项目的dist TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR+"/vue-resources/dist"], 'APP_DIRS': True, 'OPTIONS': { 'c

  • vue的webcamjs集成方式

    记一次在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 32

  • 使用Webpack提高Vue.js应用的方式汇总(四种)

    使用Webpack提高Vue.js应用的方式汇总(四种)

    Webpack是开发Vue.js单页应用程序的重要工具. 通过管理复杂的构建步骤,你可以更轻松地开发工作流程,并优化应用程序的大小和性能. 其中介绍下面四种方式: 单个文件组件 优化Vue构建 浏览器缓存管理 代码分割 1.单个文件组件 Vue的特殊功能之一是使用HTML作为组件模板. 尽管如此,它们还有一个内在的问题:你的HTML标记需要是一个尴尬的JavaScript字符串, 否则你的模板和组件定义将需要在单独的文件中,使其难以使用. Vue有一个优雅的解决方案,称为单文件组件(SFC),其

  • vue选项卡切换登录方式小案例

    vue选项卡切换登录方式小案例

    本文实例为大家分享了vue选项卡切换登录方式的具体代码,供大家参考,具体内容如下 最终效果 组件代码: <template> <div> <div class="login_warp"> <div class="loginbox fl"> <!-- 三个选项卡按钮 --> <div class="login_header"> <span @click="cur

  • vue的传参方式汇总和router使用技巧

    vue传参方法一 1,路由配置 { path: '/describe/:id', name: 'Describe', component: Describe } 2,使用方法 // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ // 这个id是一个变量,随便是什么值都可以 path: /describe/${id}`, }) 3,获取方法(在describe页面) $route.params.id 使用以上方法可以拿到上个页面传过来的id值 vue

  • 详解vue配置后台接口方式

    详解vue配置后台接口方式

    在vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录 第一种(代理方式) 在工程目录下 > config > index.js - 修改为如下配置 proxyTable: { '/api': { target: 'http://127.0.0.1:8000', pathRewrite: { '^/api': '' } } }, 在工程目录下 > src > api > user.js - 接口写法 import axios from 'axios' export

  • vue 实现用户登录方式的切换功能

    一.vue 实现用户登录方式的切换 在 data 当中,定义一个标识符 loginWay,用来表示是用短信登录还是密码登录,true代表短信登录,false 代表密码登录,代码如下所示: data() { return { loginWay: true } } 在短信登录和密码登录上,进行动态样式绑定,loginWay为true就短信登录绑定动态样式on,loginWay为false就密码登录绑定动态样式on,并且也绑定点击事件,进行设置 loginWay的true和false,代码如下所示:

  • 八种Vue组件间通讯方式合集(推荐)

    前言 Vue 提供了各种各样的通讯,其中包括 兄弟间 的通讯和 非兄弟间 的通讯,借此机会做个总结,查阅起来方便.如果喜欢的话可以帮忙点个赞 :+1: 或者关注一下 :yum: 1.props 目录结构 components ├── Parent.vue // 父亲 ├── Son1.vue // 儿子1 代码结构 在父亲组件中使用儿子组件,给儿子通过 :date="xxx" 单向传值 <template> <div> <div>爸爸:{{date}

  • vue项目两种方式实现竖向表格的思路分析

    vue项目两种方式实现竖向表格的思路分析

    问题描述 在我们做项目中,常见的是横向表格,但是偶尔的需求,也会做竖向的表格.比如下图这样的竖向表格: 我们看到这样的效果图,第一时间想到的是使用UI框架,改一改搞定.但是饿了么UI并没有直接提供这样的案例,部分同学会想着使用饿了么UI中的el-table的合并行.合并列的方式去实现,其实如果这样去做的话,反而做麻烦了.比如下面的合并行合并列: 类似于这样的效果图,其实并不一定非得使用UI组件,有的时候使用原生的方式去做.反而会更方便.本文介绍两种方式去实现这样的简单的竖向表格.实际场景中可能会

  • vue使用拖拽方式创建结构树

    vue使用拖拽方式创建结构树

    本文实例为大家分享了vue使用拖拽方式创建结构树的具体代码,供大家参考,具体内容如下 在页面中拖拽虚线框中的节点,创建向右的结构树,如下图 记录实现思路: vueTree.vue <template> <div class="container"> <div class="node-container"> <div v-for="(item, index) in nodeList" :key="

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

随机推荐