HTML5调用本地摄像头拍照_html摄像头水平镜像资源-CSDN文库

共3个文件

js：1个

project：1个

html：1个

HTML5

4星 · 超过85%的资源需积分: 49 109 浏览量 2014-11-18 09:08:51 上传评论 24 收藏 68KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

Photo.rar （3个子文件）

Photo

css

img

index.html 2KB

jquery-1.7.2.js 247KB

.project 968B

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"),//getContext唯一合法值2d video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard 如果用户允许打开摄像头 //stream为读取的视频流 navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 根据不同的浏览器写法不同 navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } else if(navigator.mozGetUserMedia) { // Firefox-prefixed navigator.mozGetUserMedia(videoObj, function(stream){ video.src = window.URL.createObjectURL(stream); video.play(); }, errBack); } document.getElementById("snap").addEventListener("click", function() { context.drawImage(video, 0, 0, 640, 480); }); }, false); </script> </head> <body> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>

评论收藏

内容反馈