js調用攝像頭代碼是什麼,前端js調用攝像頭拍照

本文目錄一覽：

• 1、如何用js實現調用手機攝像頭掃描條形碼然後帶出條形碼的值到文本框
• 2、html5或者JS怎樣調用手機攝像頭或者相冊？
• 3、怎麼用html5或js調用手機的攝像頭拍照上傳以及調用手機相冊選取照片
• 4、ionic怎麼寫js調用本地攝像頭
• 5、能不能通過js代碼打開攝像頭

如何用js實現調用手機攝像頭掃描條形碼然後帶出條形碼的值到文本框

1、開啟溝子的方法代碼。

2、指定輸入間隔為300毫秒以內時為連續輸入方法代碼。

3、記錄按鍵信息方法代碼。

4、事件的狀態代碼方法。

5、因為條形碼中只有數字和部分符號，所以基本可以不用考慮鍵盤狀態或組合鍵的情況，但二維碼就不能不考慮了。

6、可以使用_keydown.Contains(160)判斷是否按下了Shift鍵，然後使用ShiftChar方法來獲取最終的按鍵對應字元至於結果保存，我使用了一個數組ListListEventMsg，對每次輸入都單獨進行記錄。

html5或者JS怎樣調用手機攝像頭或者相冊？

你給的網頁用的是 input accept=”image/*” type=”file”，在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。

移動設備和桌面電腦上的客戶端API起初並不是同步的。最初總是移動設備上先擁有某些功能和相應的API，但慢慢的，這些API會出現在桌面電腦上。其中一個應用介面技術就是getUserMedia API，它能讓應用開發者訪問用戶的攝像頭或內置相機。

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

1、實現頭的方法代碼。

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

3、html上傳代碼。

4、JS處理方法代碼。

5、測試結果如下。

注意事項：

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

ionic怎麼寫js調用本地攝像頭

$scope.takePhoto=function(){

var options = {

//這些參數可能要配合著使用，比如選擇了sourcetype是0，destinationtype要相應的設置

quality: 100, //相片質量0-100

destinationType: Camera.DestinationType.FILE_URI, //返回類型：DATA_URL= 0，返回作為 base64 編碼字串。 FILE_URI=1，返回影像檔的 URI。NATIVE_URI=2，返回圖像本機URI (例如，資產庫)

sourceType: Camera.PictureSourceType.CAMERA, //從哪裡選擇圖片：PHOTOLIBRARY=0，相機拍照=1，SAVEDPHOTOALBUM=2。0和1其實都是本地圖庫

allowEdit: false, //在選擇之前允許修改截圖

encodingType:Camera.EncodingType.JPEG, //保存的圖片格式： JPEG = 0, PNG = 1

targetWidth: 200, //照片寬度

targetHeight: 200, //照片高度

mediaType:0, //可選媒體類型：圖片=0，只允許選擇圖片將返回指定DestinationType的參數。 視頻格式=1，允許選擇視頻，最終返回 FILE_URI。ALLMEDIA= 2，允許所有媒體類型的選擇。

cameraDirection:0, //槍後攝像頭類型：Back= 0,Front-facing = 1

popoverOptions: CameraPopoverOptions,

saveToPhotoAlbum: true //保存進手機相冊

};

$cordovaCamera.getPicture(options).then(function(imageData) {

CommonJs.AlertPopup(imageData);

var image = document.getElementById(『myImage『);

image.src=imageData;

//image.src = “data:image/jpeg;base64,” + imageData;

}, function(err) {

// error

CommonJs.AlertPopup(err.message);

});

能不能通過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

-——代碼結束