HTML5 打开摄像头
jopen
10年前
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta content="text/html; charset=UTF-8" http-equiv="content-type"> <title>Smart Home - Camera</title> <link href="css/main.css" rel="stylesheet" type="text/css"> <script src="js/jq.js"></script> <script type="text/javascript"> /* */ function init(t){ accessLocalWebCam("camera_box"); } // Normalizes window.URL window.URL = window.URL || window.webkitURL || window.msURL || window.oURL; // Normalizes navigator.getUserMedia navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia|| navigator.mozGetUserMedia || navigator.msGetUserMedia; function isChromiumVersionLower() { var ua = navigator.userAgent; var testChromium = ua.match(/AppleWebKit\/.* Chrome\/([\d.]+).* Safari\//); return (testChromium && (parseInt(testChromium[1].split('.')[0]) < 19)); } function successsCallback(stream) { document.getElementById('camera_errbox').style.display = 'none'; document.getElementById('camera_box').src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream; } function errorCallback(err) { } function accessLocalWebCam(id) { try { // Tries it with spec syntax navigator.getUserMedia({ video: true }, successsCallback, errorCallback); } catch (err) { // Tries it with old spec of string syntax navigator.getUserMedia('video', successsCallback, errorCallback); } } </script> <style type="text/css"> #camera_errbox{ width:320px; height:auto; border:1px solid #333333; padding:10px; color:#fff; text-align:left;margin:20px auto; font-size:14px; } #camera_errbox b{ padding-bottom:15px; } </style> </head> <body onLoad="init(this)" oncontextmenu="return false" onselectstart="return false"> <div class="Screen_outer"> <div id="mainbox" class="Screen_inner"> <div id="bt_goback"></div> <div class="logobox"></div><div id="t_iconbox" class="icon_12"></div><div id="t_text"> <div id="el_title" class="font_h2">Camera</div> <div id="el_descr" class="font_2"></div> </div> <div class="t_descri_bt"></div> <div class="sp_title"><span class="sp_title_text">Camera</span><div class="sp_oc sp_oc_1"></div></div> <dl id="el_actionbox" class="menu_btbox" style="text-align:center;"> <video id="camera_box" autoplay="" src=""></video> <div id="camera_errbox"> <b>请点击“允许”按钮，授权网页访问您的摄像头！</b> <div>若您并未看到任何授权提示，则表示您的浏览器不支持Media Capture或您的机器没有连接摄像头设备。</div> </div> </dl> </div> </div> </body> </html>