用html5和javascript调用摄像头实现拍照功能
在机缘巧合之下,了解到用HTML5和javascript调用摄像头来实现拍照功能,今天就把大致原理写下来。页面布局很简单,就是一个input标签,两个HTML5元素video、canvas和一个button按钮。video元素带有开启视频功能的函数,canvas元素带有捕捉图像功能的函数。
源代码如下:
[code]<!doctype html> <html lang="en"> <head> <title>GET VIDEO</title> <meta charset="utf-8"> </head> <body> <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" /> <video id="video" width="500px" height="500px" autoplay="autoplay"></video> <canvas id="canvas" width="500px" height="500px"></canvas> <button id="snap" onclick="takePhoto()">拍照</button> <script> function getMedia() { let constraints = { video: {width: 500, height: 500}, audio: true }; //获得video摄像头区域 let video = document.getElementById("video"); //这里介绍新的方法,返回一个 Promise对象 // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数 // then()是Promise对象里的方法 // then()方法是异步执行,当then()前的方法执行完后再执行then()内部的程序 // 避免数据没有获取到 let promise = navigator.mediaDevices.getUserMedia(constraints); promise.then(function (MediaStream) { video.srcObject = MediaStream; video.play(); }); } function takePhoto() { //获得Canvas对象 let video = document.getElementById("video"); let canvas = document.getElementById("canvas"); let ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, 500, 500); } </script> </body> </html>
介绍一下代码中涉及到的两个函数:
getMedia()函数:
constraints 参数是一个包含了video和audio两个成员的MediaStreamConstraints对象,用于说明请求的媒体类型。必须至少一个类型或者两个同时可以被指定。如果浏览器无法找到指定的媒体类型或者无法满足相对应的参数要求,那么返回的Promise对象就会处于rejected[失败]状态,NotFoundError作为rejected[失败]回调的参数。
有关于constraints对象的具体细节请点击下方链接:
getMedia()函数中的其他代码解释都在源代码中,不再赘述。
takePhoto()函数:
let video =document.getElementById("video");
let canvas =document.getElementById("canvas");
解释:Javascript使用id来获取video和canvas元素。
let ctx =ty.getContext('2d');
解释:创建context对象,getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、
字符以及添加图像的方法。
下面对HTML5中的canvas drawImage()方法做一介绍:
context.drawImage(img,x,y,width,height);
img:规定要使用的图像、画布或视频。
x: 在画布上放置图像的 x 坐标位置。
y: 在画布上放置图像的 y 坐标位置。
width: 要使用的图像的宽度。
height: 要使用的图像的高度。
以上就是基本的drawImage()方法的介绍,要想了解更多,请点击下方链接。
阅读更多
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- html5调用手机摄像头,实现拍照上传功能
- html5调用手机摄像头,实现拍照上传功能
- html5调用手机摄像头,实现拍照上传功能
- html5调用手机摄像头,实现拍照上传功能
- html5调用手机摄像头,实现拍照上传功能
- HTML5调用摄像头实现拍照功能(兼容各大主流浏览器)
- html5调用手机摄像头,实现拍照上传功能
- html5调用手机摄像头,实现拍照上传功能
- H5实现调用本地摄像头实现实时视频以及拍照功能
- 能够正常使用的,经过测试的java+jquery+webcam调用本地摄像头拍照,然后将拍照结果上传数据库blob字段功能的实现(二)
- Android实现调用摄像头拍照与视频功能
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- HTML之调用摄像头实现拍照和摄像功能
- 网站建设中使用HTML5实现使用手机摄像头拍照上传的功能
- html5调用摄像头实现拍照并本地保存
- HTML5+JavaScript调用摄像头拍照或者摄像
- 基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js
- html5调用摄像头实现拍照(未测试)
- HTML5 使用FileReader实现调用相册、拍照功能