• html 开启摄像头


    <!DOCTYPE html>
    <html>
    <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{
    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>
    <div id="mainbox">
    <div id="bt_goback"></div>

    <div></div><div id="t_iconbox" 
    class="icon_12"></div><div id="t_text">
    <div id="el_title">Camera</div>
    <div id="el_descr"></div>
    </div>

    <div></div>

    <div><span 
    class="sp_title_text">Camera</span><div class="sp_oc 
    sp_oc_1"></div></div>
    <dl id="el_actionbox" 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>

    当值未一旬,而视茫茫,而发苍苍,而齿牙动摇
  • 相关阅读:
    Blender第5个模型
    Blender 积木下落物理效果
    Blender 积木彩色渲染加下落物理效果
    Blender第7个模型
    Blender 积木学习快捷键与软件配置(基础课程完结撒花)
    Blender 第14个模型
    Blender 积木学习快捷键与软件配置(进阶版持续更新)
    【数据库】Mysql表字段转Java实体(sql语句)
    【Java】MybatisPlus获取不到数据库表中的部分字段(带下划线_的字段)
    【Python】字符串字典 转 字典/json字符串
  • 原文地址:https://www.cnblogs.com/niuniuc/p/10678364.html
Copyright © 2020-2023  润新知