[谷歌]浏览器调用摄像头

旧城等待， 2022-10-09 03:19 365阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        video\{  
            width: 50%;  
            height: 50%;  
            margin: 50px auto;  
            background-color: aquamarine;  
            display: block;  
        \}  
    </style>  
</head>  
<body>

if (navigator.mediaDevices.getUserMedia) \{  
        //最新的标准API  
        navigator.mediaDevices.getUserMedia(\{video : \{width: 1000, height: 1000\}\}).then(success).catch(error);  
    \} else if (navigator.webkitGetUserMedia) \{  
        //webkit核心浏览器  
        navigator.webkitGetUserMedia(\{video : \{width: 1000, height: 1000\}\},success, error)  
    \} else if (navigator.mozGetUserMedia) \{  
        //firfox浏览器  
        navigator.mozGetUserMedia(\{video : \{width: 1000, height: 1000\}\}, success, error);  
    \} else if (navigator.getUserMedia) \{  
        //旧版API  
        navigator.getUserMedia(\{video : \{width: 1000, height: 1000\}\}, success, error);  
    \}

function success(stream) \{  
        //兼容webkit核心浏览器  
        // let CompatibleURL = window.URL || window.webkitURL;

//将视频流设置为video元素的源  
        console.log(stream);

//video.src = CompatibleURL.createObjectURL(stream);  
        video.srcObject = stream;  
        video.play();  
    \}

function error(error) \{  
        console.log(\`访问用户媒体设备失败$\{error.name\}, $\{error.message\}\`);  
    \}

</script>  
</body>  
</html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70]: /images/20221005/d2d8838df16642bca9e2592ca6a07de8.png