ref版的 摄像头 读取 因为id的时候,id不能重复 还要用时间戳,比较麻烦
<!--
* @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不能重复 还要用时间戳,比较麻烦的更多相关文章
- QQ摄像头读取条码
跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码 第一步:插入QQ摄像头,安装好驱动(有的可能免驱动) 第二步:打开HDevelop,点击助手—打开新的Image Acquisitio ...
- 跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码
跟我学机器视觉-HALCON学习例程中文详解-QQ摄像头读取条码 第一步:插入QQ摄像头,安装好驱动(有的可能免驱动) 第二步:打开HDevelop,点击助手-打开新的Image Acquisitio ...
- 进程控制之更改用户ID和组ID
在UNIX系统中,特权(例如能改变当前日期的表示法以及访问控制(例如,能否读.写一特定文件))是基于用户ID和组ID的.当程序需要增加特权,或需要访问当前并不允许访问的资源时,我们需要更换自己的用户I ...
- PHP把数字ID转字母ID
PHP把数字ID转字母ID ID是网站中经常出现的,它一般是数字,但是我们发现现在的网站很多ID都是字母了,比如YouTube的视频播放页它的URL类似/watch?v=yzNjIBEdyww. 下面 ...
- 获取进程ID,父进程ID,进程完整路径
准备写一个进程管理的功能模块,今天下午先写了扫描获取本机各个进程路径,获取各个进程映像名称,进程完整路径. 要获取进程信息,第一步想到的就是提权,提权代码用过多次了,今天也小结了一下(http://w ...
- C#获取电脑硬件信息(CPU ID、主板ID、硬盘ID、BIOS编号)
最近学习过程中,想到提取系统硬件信息做一些验证,故而对网上提到的利用.NET System.Management类获取硬件信息做了进一步的学习.验证.验证是分别在4台电脑,XP SP3系统中进行,特将 ...
- NB-IOT移植移动onenet基础通信套件之Object_ID,实例ID,资源ID
1. 访问是按照分层的,Object_ID/实例ID/资源ID,对应每一层ID的数据类型,目前是分为3层,一个实例下面可以有多个实例id,对下面的数据结构来说,如果是资源ID的话,类型只能是asBuf ...
- 获取CPU ID ,disk ID, MAC ID (windows ARM linux Mac)
windows 命令行获取CPU ID,可以用ShellExecute wmic cpu get processorid ProcessorId BFEBFBFF000506E3 开源库: 查询CPU ...
- 深入理解android:id以及@+id/name和@id/name的区别联系
今天为了好好研究了下@+id/name和@id/name的区别以及联系,又翻了翻文档/guide/topics/resources/layout-resource.html中关于 android:id ...
随机推荐
- 安装并配置JAVA环境
详见百度经验 http://jingyan.baidu.com/article/0202781175839b1bcc9ce529.html
- B. Chris and Magic Square
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- J20170403-gg
うっすら 微微的,薄薄的 グラデーション 渐变 ぼかし(暈し) 晕色 由浓到淡渐变上色的东西 シャドウ 影子,阴影 ドメイン 域名 サブドメイン 子域名
- 51nod1266【水】
最短,两半分开走 最长,一边走,比较一下两端就好了. #include <bits/stdc++.h> using namespace std; typedef long long LL; ...
- [转]Markdown语法参考
<< 访问 Wow!Ubuntu NOTE: This is Simplelified Chinese Edition Document of Markdown Syntax. If yo ...
- childNodes和Children的区别
1.childNodes: 标准的,返回指定元素的子元素集合,包括HTML属性,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点 ...
- LuoguP1342请柬 【最短路/建反图】By cellur925
题目传送门 开始就想直接正向跑一遍Dij把到各点的最短路加起来即可,后来发现与样例少了些,于是再读题发现需要也求出学生们回来的最短路. 但是注意到本题是有向图,如果是无向图就好说. 那么我们怎么解决? ...
- jQuery同时监听两个事件---实现同时操控两个按键
我们都知道因为js是单线程的,所以没有可以同时触发键盘两个事件的方法 今天我们就来做一个可以实现这个功能方法 先来看一下成品图效果 接下来我们来看下具体是怎么实现的 注释写在了代码里面 <!DO ...
- Windows、Linux、Android常用软件分享
Windows.Linux.Android常用软件分享 前言 本来没准备写这篇博客,一是没时间,还有其他很多优先级更高的事情要做.二是写这种博客对我自己来说没什么的帮助,以前我就想好了不写教程类,使用 ...
- iOS 获取当前响应链的First Responder (Swift)
import UIKit private weak var currentFirstResponder: AnyObject? extension UIResponder { static func ...