<!--
* @description 摄像头vue版实例
* @fileName cameraObject.vue
* @author 彭成刚
* @date // ::
* @version V1.0.0
!-->
<template>
<div id="cameraObject">
<!-- <div style="width:505px;float:left;"> </div> -->
<video ref="video"
width=""
height="">
</video>
<Button type='primary'
@click="handleCamera"
icon="md-camera"
style="margin-bottom:5px;">拍照</Button>
<canvas ref="canvas"
width=""
height=""></canvas>
<!-- <div style="width:100px;float:left;"> </div>
<div style="width:480px;float:left;"> </div> --> </div>
</template> <script>
export default {
data () {
return {
timer: new Date().getTime().toString(),
picIsHave: false
}
}, components: {}, computed: {}, mounted () {
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
// 调用用户媒体设备, 访问摄像头
this.getUserMedia({ video: { width: , height: } }, this.success, this.error)
} else {
alert('不支持访问用户媒体')
} // document.getElementById('capture').addEventListener('click', function () {
// context.drawImage(video, 0, 0, 480, 320)
// })
}, methods: {
getPicBase64 () {
// let canvas = document.getElementById('canvas')
let canvas = this.$refs['canvas']
let base64 = canvas.toDataURL('image/png', )
let ret = {
picIsHave: this.picIsHave,
base64: base64
}
return ret
},
handleCamera () {
this.picIsHave = true
// let canvas = document.getElementById('canvas' + this.timer)
let canvas = this.$refs['canvas']
// let video = document.getElementById('video' + this.timer)
let video = this.$refs['video']
let context = canvas.getContext('2d')
context.drawImage(video, , , , )
}, // 访问用户媒体设备的兼容方法
getUserMedia (constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
// 最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
} else if (navigator.webkitGetUserMedia) {
// webkit核心浏览器
navigator.webkitGetUserMedia(constraints, success, error)
} else if (navigator.mozGetUserMedia) {
// firfox浏览器
navigator.mozGetUserMedia(constraints, success, error)
} else if (navigator.getUserMedia) {
// 旧版API
navigator.getUserMedia(constraints, success, error)
}
},
success (stream) {
// 兼容webkit核心浏览器
// let CompatibleURL = window.URL || window.webkitURL
// 将视频流设置为video元素的源
// console.log('stream', stream)
// console.info('success') // video.src = CompatibleURL.createObjectURL(stream);
// let video = document.getElementById('video' + this.timer)
let video = this.$refs['video']
video.srcObject = stream
video.play()
}, error (error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`)
}
}
} </script>
<style lang='less'>
#cameraObjectVideo {
transition: rotate(90deg);
}
</style>

ref版的 摄像头 读取 因为id的时候,id不能重复 还要用时间戳,比较麻烦的更多相关文章

  1. QQ摄像头读取条码

    跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码 第一步:插入QQ摄像头,安装好驱动(有的可能免驱动) 第二步:打开HDevelop,点击助手—打开新的Image Acquisitio ...

  2. 跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码

    跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码 第一步:插入QQ摄像头,安装好驱动(有的可能免驱动) 第二步:打开HDevelop,点击助手-打开新的Image Acquisitio ...

  3. 进程控制之更改用户ID和组ID

    在UNIX系统中,特权(例如能改变当前日期的表示法以及访问控制(例如,能否读.写一特定文件))是基于用户ID和组ID的.当程序需要增加特权,或需要访问当前并不允许访问的资源时,我们需要更换自己的用户I ...

  4. PHP把数字ID转字母ID

    PHP把数字ID转字母ID ID是网站中经常出现的,它一般是数字,但是我们发现现在的网站很多ID都是字母了,比如YouTube的视频播放页它的URL类似/watch?v=yzNjIBEdyww. 下面 ...

  5. 获取进程ID,父进程ID,进程完整路径

    准备写一个进程管理的功能模块,今天下午先写了扫描获取本机各个进程路径,获取各个进程映像名称,进程完整路径. 要获取进程信息,第一步想到的就是提权,提权代码用过多次了,今天也小结了一下(http://w ...

  6. C#获取电脑硬件信息(CPU ID、主板ID、硬盘ID、BIOS编号)

    最近学习过程中,想到提取系统硬件信息做一些验证,故而对网上提到的利用.NET System.Management类获取硬件信息做了进一步的学习.验证.验证是分别在4台电脑,XP SP3系统中进行,特将 ...

  7. NB-IOT移植移动onenet基础通信套件之Object_ID,实例ID,资源ID

    1. 访问是按照分层的,Object_ID/实例ID/资源ID,对应每一层ID的数据类型,目前是分为3层,一个实例下面可以有多个实例id,对下面的数据结构来说,如果是资源ID的话,类型只能是asBuf ...

  8. 获取CPU ID ,disk ID, MAC ID (windows ARM linux Mac)

    windows 命令行获取CPU ID,可以用ShellExecute wmic cpu get processorid ProcessorId BFEBFBFF000506E3 开源库: 查询CPU ...

  9. 深入理解android:id以及@+id/name和@id/name的区别联系

    今天为了好好研究了下@+id/name和@id/name的区别以及联系,又翻了翻文档/guide/topics/resources/layout-resource.html中关于 android:id ...

随机推荐

  1. U3D Navigation

    让我们来一起粗步认识一下NavMesh的简单使用 首先我们建立一个新场景,在新场景我们创建 一个地形或者创建一个Plane, 然后在其上面用Cube或者其它的建立一些障碍物 再创建自己需要为其设置自动 ...

  2. Android适合组件化开发的路由框架:Launch

    1.概述 最近越来越不想写代码了,特别是一些重复性的代码,比如由于每次启动一个 Activity,我们都会很习惯的在 Activity 中写下: public static void launch(A ...

  3. 转:深度学习与自然语言处理之五:从RNN到LSTM

    原文地址:http://blog.csdn.net/malefactor/article/details/50436735/ 大纲如下: 1.RNN 2.LSTM 3.GRN 4.Attention ...

  4. js 模拟a标签打开新网页

      在这里备份一下,方便以后查找.   var el = document.createElement("a"); document.body.appendChild(el); e ...

  5. windows上搭建php环境

    在Windows 7下进行PHP环境搭建,首先需要下载PHP代码包和Apache与Mysql的安装软件包. PHP版本:php-5.3.2-Win32-VC6-x86,VC9是专门为IIS定制的,VC ...

  6. Hibernate 4.3.7 可编程方式+注解

    1.复制jar文件到lib antlr-2.7.7.jardbmysql.jardboracle.jardbsqljdbc2005.jardom4j-1.6.1.jarhibernate-common ...

  7. 洛谷 - P1198 - 最大数 - 线段树

    https://www.luogu.org/problemnew/show/P1198 要问区间最大值,肯定是要用线段树的,不能用树状数组.(因为没有逆元?但是题目求的是最后一段,可以改成类似前缀和啊 ...

  8. bzoj 3796: Mushroom追妹纸【二分+后缀数组+st表】

    把三个串加上ASCII大于z的分隔符连起来,然后求SA 显然每个相同子串都是一个后缀的前缀,所以枚举s1的每个后缀的最长和s2相同的前缀串(直接在排序后的数组里挨个找,最近的两个分别属于s1和s2的后 ...

  9. NOIP2017 赛后总结

    NOIP2017 确实,一场很深刻的考试结束了. 现在也已经搞了两周的学科了,在补之前两个月的学科的内容. 距离11.12已经过去12天了. 姓名 准考证号 math complexity park ...

  10. (十)SpringBoot的文件上传

    一:添加commons-fileupload依赖 打开pom文件添加 <dependency> <groupId>commons-fileupload</groupId& ...