记一次在vue中使用webcamjs调取pc端摄像头拍照
说明
本例调用摄像头基于webcamjs
第一步: photo.vue 组件
1
2
3
4
5
6
7
8
9
10
11
|
<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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<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>
|
第二部:使用
1
2
3
4
5
|
<template>
<div id= "app" >
<photo></photo>
</div>
</template>
|
1
2
3
4
5
6
7
8
9
|
<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集成方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_42326145/article/details/81938020