vue获取摄像头视频、拍照

<template><div><h1>拍照</h1><div>说明：<dl><dd>navigator.mediaDevices.getUserMedia(constraints);</dd><div>constraints 是包含</div></dl></div><div><inputtype="button"title="开启摄像头"value="开启摄像头"@click="getMedia"class="media-box"/><inputtype="button"title="关闭摄像头"value="关闭摄像头"@click="closeMedia"class="media-box"/><inputtype="button"title="暂停摄像头"value="暂停摄像头"@click="pauseMedia"class="media-box"/><button id="snap" @click="takePhoto">拍照</button><button type="button" @click="downloadPhoto">下载照片</button></div><div><videoid="video"width="300px"height="300px"autoplay="autoplay"class="photo-area"></video><span><h2>下面是照片</h2><canvas id="canvas" width="300px" height="300px"></canvas>    </span>    </div></div>
</template><script>
export default {name: "Index",data() {return {photo: ""};},methods: {getMedia() {let self=this;let video = document.getElementById("video");navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;if (navigator.getUserMedia) {navigator.getUserMedia({video:{ width: 300, height: 300 }},function(stream) {console.log('stream:',stream)var track = stream.getTracks()[0];  // 通过这个关闭摄像头track .stop();let binaryData = [];binaryData.push(track);video.srcObject = stream;video.onloadedmetadata = function(e) {video.play();};},function(err) {alert(err);});}  this.setTimerSend();},getMedia1() {let constraints = {// 要开启 视频 video 可以简单的设置为 true ，也可以设置为对象/*** video: {*      width: 摄像头像素宽 1920*      height: 摄像头像素高 1080*      分辨率就是 1920*1080*      width: {*          max:  强制使用 max指定的宽*          min:  强制使用 min 指定的宽*      }*      height: {*          max:  强制使用 max指定的高*          min:  强制使用 min 指定的高*      }*      exact: 表示 max == min*      width: {ideal: 1920} ideal 表示应用最理想值作为像素*      height: {ideal: 1080}**      facingMode： "user" 使用前置摄像头--移动端需要设置这个属性*      facingMode: { exact: "environment" }  使用后置摄像头** }**/video: { width: 300, height: 300 },audio: true};//获得video摄像头区域let video = document.getElementById("video");video.style.display = "inline-block";//这里介绍新的方法，返回一个 Promise对象// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数// then()是Promise对象里的方法// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序// 避免数据没有获取到console.log(navigator.mediaDevices);let promise = navigator.mediaDevices.getUserMedia(constraints);promise.then(function(MediaStream) {console.log(`MediaStream: -->`);console.log(MediaStream);/*** mediaStream:{active: trueid: "k6zAanU7ynuXVvHwcfFLGmt5fX2E6OnLReVR"onactive: nullonaddtrack: nulloninactive: nullonremovetrack: null* }* * */video.srcObject = MediaStream;// 2种方式调用 load// 使用 addEventListener("loadedmetadata", (event)=> {...})// 使用 onloadedmetadata = (event)=> {...}// 都可以video.onloadedmetadata = event => {console.info(event);console.log("媒体加载完毕");video.play();};}).catch(function(err) {console.log(err.name + ": " + err.message);}); // 总是在最后检查错误// 获取到当前用户设备的 所有的媒体设备 【麦克风，摄像机，耳机设备】等navigator.mediaDevices.enumerateDevices().then(devices => {console.log(devices);devices.forEach(function(device) {console.log(device.kind +": " +device.label +" id = " +device.deviceId);});}).catch(err => {console.log(err.name + ": " + err.message);});navigator.mediaDevices.ondevicechange = () => {};},// 关闭摄像头closeMedia() {let video = (document.querySelector("#video").style.display ="none");},// 暂停pauseMedia() {let video = document.querySelector("#video");video.pause();},// 拍照takePhoto() {//获得Canvas对象let video = document.getElementById("video");let canvas = document.getElementById("canvas");let ctx = canvas.getContext("2d");ctx.drawImage(video, 0, 0, video.width, video.height);// 从 canvas上获取照片数据-- 将 canvas 转换成 base64this.photo = canvas.toDataURL("image/png")},downloadPhoto() {// 照片名字，用作下载，用时间戳代替let photoName = new Date().getTime()// 将 base64转换成 blob- 二进制数据let blob = this.base64ToBlob(this.photo)let aLink = document.createElement('a');// 自定义事件let evt = document.createEvent("HTMLEvents");// 事件初始化,定义怎么触发事件, 事件名 click, true阻止事件冒泡，阻止事件默认行为evt.initEvent("click", true, true);aLink.download = photoName;aLink.href = window.URL.createObjectURL(blob);// 触发事件aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐},base64ToBlob(base64) {// 照片数据格式是  data:image/png;base64,base64照片数据let parts = base64.split(";base64,");console.log(parts)// 照片类型// parts[0]  "data:image/png"// parts[1]  照片的base64字符串let contentType = parts[0].split(":")[1]  // image/pnglet raw = window.atob(parts[1])let rawLength = raw.length;let uInt8Array = new Uint8Array(rawLength)for(let i=0; i<rawLength; i++) {// 将字符串每个字符全部转换成 Unicode 编码uInt8Array[i] = raw.charCodeAt(i)}// Blob 第一个参数接受的是一个数组， 参数2的type是一个 MIME类型// 返回一个 二进制数据return new Blob([uInt8Array], {type: contentType})}}
};
</script><style lang="scss" scoped>
.media-box {border: 1px solid #ff0000;
}
.photo-area {border: 2px solid yellow;
}
</style>

vue获取摄像头视频、拍照相关推荐

android获取摄像头视频帧数据
1.思路一.通过android的Camera.setPreviewCallback(PreviewCallback cb)监听回调. 二.此回调函数public void onPreviewFram ...
opencv获取外接摄像头_opencv获取摄像头视频
结合Leaning OpenCV 第二个例子显示一个视屏文件写了一下获取摄像头的代码为并且创建窗口显示的代码为: #include "stdafx.h" #include # ...
web浏览器获取摄像头并拍照
浏览器兼容性尚可 desktop mobile Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera An ...
利用Flash获取摄像头视频进行动态捕捉
一.引言摄像头游戏是随着摄像头的普及和图形图像技术的不断发展而出现的.它摆脱了鼠标键盘的限制,给游戏者带来全新的游戏体验,能够实现许多传统游戏无法实现的游戏效果.它通过摄像头将玩家投影到游戏中,由玩 ...
Android不显示Camera视频获取摄像头视频帧数据
1.在Activity界面代码中: private var mCamera: Camera? = null private val mWidth = GwApplication.DEFAULT_REM ...
js获取摄像头权限实现拍照功能
首先说一下js打开摄像头的流程: 使用getUserMedia打开摄像头然后将获取到的流媒体转成url放在video标签中的src中: 使用canvas的drawImage方法将video的内容绘至c ...
挑战一个人搭建一套完整直播系统4: 实现网络摄像头视频传输
摄像头采购的是海康卫视的网络摄像头: 支持通过rtsp传输视频流,网络摄像头的配置如下: ffmpeg可以直接通过rtsp获取摄像头视频数据并推流到我们之前搭建好的Nginx服务,具体指令如下: ff ...
js调用pc摄像头实现拍照、录视频等，新版Chrome无访问http页面无法打开麦克风、摄像头
js调用pc摄像头实现拍照.录视频等,新版Chrome无访问http页面无法打开麦克风.摄像头新版Chrome配置 vue环境下的前端 function部分 ##由于没有https环境,只有http ...
vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...

vue获取摄像头视频、拍照

vue获取摄像头视频、拍照相关推荐

最新文章

热门文章