时间:2021-07-01 10:21:17 帮助过:347人阅读
<!DOCTYPE html> <HTML> <HEAD> <TITLE> HTML5调用摄像头实现拍照</ TITLE> <meta charset =“utf-8”> <meta name =“viewport”content =“width = device-width,initial-scale = 1”> </ HEAD> <BODY> <video id =“video”autoplay =“”style ='width:640px; height:480px'> </ video> <button id =“paizhao”>拍照</ button> <canvas id =“canvas”width =“640”height =“480”> </ canvas> <script type =“text / javascript”> var video = document.getElementById(“video”); var context = canvas.getContext(“2d”); var errocb = function(){ console.log(“sth srong”); } 如果(navigator.getUserMedia){ navigator.getUserMedia({ “视频”:真},函数(流){ video.src =流; video.play(); },errocb); } else if(navigator.webkitGetUserMedia){ navigator.webkitGetUserMedia({ “视频”:真},函数(流){ video.src = window.webkitURL.createObjectURL(流); video.play(); },errocb); } 的document.getElementById( “paizhao”)的addEventListener( “点击”,函数(){ context.drawImage(视频,0,0,640,480); }); </ SCRIPT> </ BODY> </ HTML>
【相关推荐】
1. 通过H5实现拍照功能的实例详解
2. HTML5调用摄像头的示例代码分享
3. HTML5 程序设计
4. html5自定义遮罩的实现代码分享
5. 详细介绍AngularJS中使用HTML5摄像头拍照的图文详情
以上就是分享h5调用摄像头实现拍照的实例教程的详细内容,更多请关注Gxl网其它相关文章!