js攝像頭拍照代碼（js攝像頭拍照代碼大全）

本文目錄一覽：

• 1、JS 能不能調用攝像頭並拍照
• 2、怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片
• 3、能不能通過js代碼打開攝像頭

JS 能不能調用攝像頭並拍照

可以調用，不過適合HTML5，瀏覽器版本也要高點，有些低版本的估計不支持

!DOCTYPE html

html

    head

        meta charset=”utf-8″ /

        title/title

        meta name=”viewport” content=”width=device-width, initial-scale=1″

    /head

    body

        video id=”video” width=”640″ height=”480″ autoplay/video

    /body

    script type=”text/javascript”

        var promisifiedOldGUM = function(constraints) {

            // 第一個拿到getUserMedia，如果存在

            var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia);

            // 有些瀏覽器只是不實現它-返回一個不被拒絕的承諾與一個錯誤保持一致的接口

            if (!getUserMedia) {

                return Promise.reject(new Error(‘getUserMedia is not implemented in this browser-getUserMedia是不是在這個瀏覽器實現’));

            }

            // 否則，調用包在一個舊navigator.getusermedia承諾

            return new Promise(function(resolve, reject) {

                getUserMedia.call(navigator, constraints, resolve, reject);

            });

        }

        // 舊的瀏覽器可能無法實現mediadevices可言，所以我們設置一個空的對象第一

        if (navigator.mediaDevices === undefined) {

            navigator.mediaDevices = {};

        }

        // 一些瀏覽器部分實現mediadevices。我們不能只指定一個對象

        // 隨着它將覆蓋現有的性能getUserMedia。.

        // 在這裡，我們就要錯過添加getUserMedia財產。.

        if (navigator.mediaDevices.getUserMedia === undefined) {

            navigator.mediaDevices.getUserMedia = promisifiedOldGUM;

        }

        // Prefer camera resolution nearest to 1280×720.

        var constraints = {

            audio: true,

            video: {

                width: 1280,

                height: 720

            }

        };

        navigator.mediaDevices.getUserMedia(constraints)

            .then(function(stream) {

                var video = document.querySelector(‘video’);

                video.src = window.URL.createObjectURL(stream);

                video.onloadedmetadata = function(e) {

                    video.play();

                };

            }).catch(function(err) {

                console.log(err.name + “: ” + err.message);

            });

    /script

/html

怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片

1、實現頭的方法代碼。

2、編寫CSS樣式的方法代碼。

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結果如下。

注意事項：

JavaScript是一種網絡腳本語言，在web應用開發中得到了廣泛的應用，它經常被用來為網頁添加各種動態功能，為用戶提供更加流暢美觀的瀏覽效果，通常JavaScript腳本被嵌入到HTML中來實現自己的功能。

能不能通過js代碼打開攝像頭

html5中的video這個標籤是引入視頻的，通過navigator.getUserMedia去獲取攝像頭的視頻流，所以要在事件里用關閉的代碼都不能執行關閉攝像頭，只有關閉網頁，攝像頭才關閉。

以下為html5打開攝像頭代碼：

!DOCTYPE html

html

head

meta content=”text/html; charset=UTF-8″ http-equiv=”content-type”

titleSmart 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

div id=”mainbox”

div id=”bt_goback”/div

div/divdiv id=”t_iconbox” 

class=”icon_12″/divdiv id=”t_text”

div id=”el_title”Camera/div

div id=”el_descr”/div

/div

div/div

divspan 

class=”sp_title_text”Camera/spandiv 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

-——代碼結束