最新文章
- MySQL中, group by 和 order by 一起使用会有排序问题,group by 和 order by 同时使用时要注意的地方
- Vue学习笔记(10) ——Vue组件中的data和methods
- Vue学习笔记(9) ——Vue组件创建的几种方式
- Vue学习笔记(8) ——Vue实例的生命周期
- Vue学习笔记(7) —— 过滤器 filter的基本使用
- Vue学习笔记(6) ——v-if指令和v-show指令
- Vue学习笔记(5) —— v-for指令和key属性
- Vue学习笔记(5) —— Vue中样式-class样式和style样式
- Vue学习笔记(4) —— v-model指令,双向数据绑定
- Vue学习笔记(3) —— Vue事件修饰符
关注我

在线咨询
x
有什么可以帮到你

点击咨询
js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照
- 分类:WEB前端
- 时间:2018-03-18
- 共1456人围观
简介在一些我们常用的浏览器里已经可以使用web api调用电脑的摄像头功能了。基于此可以经行拍照摄像功能,实现了奇妙的摄像和拍照功能
一、代码如下
<!DOCTYPE html> <html lang="ZH-CN"> <head> <meta charset="utf-8"> <title>js调用摄像头拍照,js调用摄像头在线拍照,js调用电脑摄像头拍照,js调用笔记本电脑摄像头拍照</title> <style> .booth { width:400px; background:#ccc; border: 10px solid #ddd; margin: 0 auto; } </style> </head> <body> <div class="booth"> <video id="video" width="400" height="300"></video> <button id='tack'>拍照</button> <canvas id='canvas' width='400' height='300'></canvas> <img id='img' src=''> </div> <script> var video = document.getElementById('video'), canvas = document.getElementById('canvas'), snap = document.getElementById('tack'), img = document.getElementById('img'), vendorUrl = window.URL || window.webkitURL; //媒体对象 navigator.getMedia = navigator.getUserMedia || navagator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, //使用摄像头对象 audio: false //不适用音频 }, function(strem){ console.log(strem); video.src = vendorUrl.createObjectURL(strem); video.play(); }, function(error) { //error.code console.log(error); }); snap.addEventListener('click', function(){ //绘制canvas图形 canvas.getContext('2d').drawImage(video, 0, 0, 400, 300); //把canvas图像转为img图片 img.src = canvas.toDataURL("image/png"); }) </script> </body> </html>
二、注意点
1、有些浏览器可能不支持此功能
2、必须通过服务器打开页面,通过files://打开无效
3、如果通过远程服务器打开则必须是https协议, http协议也无法使用