记一次在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="/UploadFiles/2021-04-02/'+data_uri+'">第二部:使用
<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集成方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
vue,webcamjs集成
更新动态
- 瑞鸣音乐《中国音乐地图之听见河南豫剧经典唱段》2020[WAV分轨]
- 【伊比萨沙发】VA-2024-IbizaSpring2024(LoungeCocktailsfromtheHeart)[FLAC]
- 群星《世界顶级汽车音响试音王》4K金碟16CD[WAV+CUE]
- 群星-音效环绕天碟《极致环绕人声天碟天品》7CD[WAV]
- 泰拉克SACD古典试音碟7SACD-ISO
- 群星《红歌宝典》20CD[WAV/分轨]
- 《101系列:好歌101首 细听年代精选》[WAV+CUE][3.6GB]
- 《101系列 6CD 国语经典101首歌曲 张学友 王菲代表作》[APE+CUE][2.8GB]
- 《101系列:国语经典101 VOL2 6CD 精选最经典101首》[WAV+CUE][2.3GB]
- 群星《十年网络红歌》15CD[WAV分轨]
- 宝丽金-环球10周年至50周年经典金曲15CD[低速原抓WAV+CUE]
- FIM唱片《十大男伶》[低速原抓WAV+CUE]
- 《101系列:情歌101 6CD》[WAV+CUE][3.1GB]
- 庄心妍《降调版合集》[320K/MP3][52.96MB]
- 庄心妍《降调版合集》[FLAC/分轨][118.78MB]