前端调用本地摄像头实现拍照（vue）

由于调用摄像头有使用权限，只能在本地运行，线上需用https域名才可以使用。

<template><div class="camera_outer"><videoid="videoCamera":width="videoWidth":height="videoHeight"autoplay></video><canvasstyle="display: none"id="canvasCamera":width="videoWidth":height="videoHeight"></canvas><div v-if="imgSrc" class="img_bg_camera"><img :src="imgSrc" alt="" class="tx_img" /></div><button @click="getCompetence()">打开摄像头</button><button @click="stopNavigator()">关闭摄像头</button><button @click="setImage()">拍照</button></div>
</template><script>
export default {data() {return {videoWidth: 300,videoHeight: 300,imgSrc: "",thisCancas: null,thisContext: null,thisVideo: null,};},mounted() {this.getCompetence();},methods: {// 调用权限（打开摄像头功能）getCompetence() {var _this = this;this.thisCancas = document.getElementById("canvasCamera");this.thisContext = this.thisCancas.getContext("2d");this.thisVideo = document.getElementById("videoCamera");// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象if (navigator.mediaDevices === undefined) {navigator.mediaDevices = {};}// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象// 使用getUserMedia，因为它会覆盖现有的属性。// 这里，如果缺少getUserMedia属性，就添加它。if (navigator.mediaDevices.getUserMedia === undefined) {navigator.mediaDevices.getUserMedia = function (constraints) {// 首先获取现存的getUserMedia(如果存在)var getUserMedia =navigator.webkitGetUserMedia ||navigator.mozGetUserMedia ||navigator.getUserMedia;// 有些浏览器不支持，会返回错误信息// 保持接口一致if (!getUserMedia) {return Promise.reject(new Error("getUserMedia is not implemented in this browser"));}// 否则，使用Promise将调用包装到旧的navigator.getUserMediareturn new Promise(function (resolve, reject) {getUserMedia.call(navigator, constraints, resolve, reject);});};}var constraints = {audio: false,video: {width: this.videoWidth,height: this.videoHeight,transform: "scaleX(-1)",},};navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {// 旧的浏览器可能没有srcObjectif ("srcObject" in _this.thisVideo) {_this.thisVideo.srcObject = stream;} else {// 避免在新的浏览器中使用它，因为它正在被弃用。_this.thisVideo.src = window.URL.createObjectURL(stream);}_this.thisVideo.onloadedmetadata = function (e) {_this.thisVideo.play();};}).catch((err) => {console.log(err);});},//  绘制图片（拍照功能）setImage() {var _this = this;// 点击，canvas画图_this.thisContext.drawImage(_this.thisVideo,0,0,_this.videoWidth,_this.videoHeight);// 获取图片base64链接var image = this.thisCancas.toDataURL("image/png");_this.imgSrc = image;this.$emit("refreshDataList", this.imgSrc);},// base64转文件dataURLtoFile(dataurl, filename) {var arr = dataurl.split(",");var mime = arr[0].match(/:(.*?);/)[1];var bstr = atob(arr[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime });},// 关闭摄像头stopNavigator() {this.thisVideo.srcObject.getTracks()[0].stop();},},
};
</script><style lang="scss" scoped>
.camera_outer {position: relative;overflow: hidden;background-size: 100%;video,canvas,.tx_img {-moz-transform: scaleX(-1);-webkit-transform: scaleX(-1);-o-transform: scaleX(-1);transform: scaleX(-1);}.btn_camera {position: absolute;bottom: 4px;left: 0;right: 0;height: 50px;background-color: rgba(0, 0, 0, 0.3);line-height: 50px;text-align: center;color: #ffffff;}.bg_r_img {position: absolute;bottom: 0;left: 0;right: 0;top: 0;}.img_bg_camera {position: absolute;right: 0;top: 0;img {width: 300px;height: 300px;}.img_btn_camera {position: absolute;bottom: 0;left: 0;right: 0;height: 50px;line-height: 50px;text-align: center;background-color: rgba(0, 0, 0, 0.3);color: #ffffff;.loding_img {width: 50px;height: 50px;}}}
}
</style>

前端调用本地摄像头实现拍照（vue）相关推荐

vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
html5调取web端摄像头,JavaScript-web前端如何调用本地摄像头进行拍照？
JS调用好像不行,一般都是用Flash的Com,这是写好的一个Flash调用摄像头的,参考一下吧 package { import flash.display.Sprite; import flash ...
Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录前言 API `MediaDevices.getUserMedia()` 拍照功能实例完整代码实现效果录像功能实例完整代码实现效果总结前言最近在做开源实例: Vue.js 实战系 ...
Vue调用本地摄像头权限
使用电脑本地摄像头的权限关于如何调用本地摄像头的问题准备工具 (VS Code,Vue脚手架工具,Element UI) vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行 ...
js调用本地摄像头拍照截图，提交后台
今天有个需求,需要在前端界面调用本地摄像头,然后拍照结束后可以截取预览,最后将结果提交到后台.查了网上很多的插件,发现适合的非常少,于是决定自己修改一个. 这里我修改了一个jquery插件,把摄像头拍 ...
JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
利用python调用本地摄像头拍照，对图片命名并保存到指定位置，带界面
1.需求: 因项目需要做一个以图搜图的小程序,需要储备零件图库,约1000种 2.原计划&痛点原本想通过手机挨个拍照,再拷贝出来,重命名,这样会耽误大量时间,且容易出错 3.解决方案于是做 ...
html5 调用摄像头支持IE,JS调用本地摄像头拍照（兼容各大浏览器及IE8+）
最近做的项目遇到了个难题,使用video+canvas+getUserMedia()写的调用本地摄像头拍照不兼容IE. 原因:IE8及以下不支持HTML5标签:video和canvas:IE11及以下 ...
摄像头网页服务器,js调用本地摄像头拍照并上传到web服务器
[实例简介] js调用本地摄像头拍照并上传到web服务器.后台使用java实现图片的接收和存储,上传的图片默认保存到项目下的images文件夹中. [实例截图] [核心代码] MyCamera └── ...

前端调用本地摄像头实现拍照（vue）

前端调用本地摄像头实现拍照（vue）相关推荐

最新文章

热门文章