關於webcsmjs的信息

本文目錄一覽：

• 1、如何用js實現調用手機攝像頭掃描條形碼然後帶出條形碼的值到文本框
• 2、jquery webcam 怎麼用
• 3、如何用js調用本地攝像頭然後錄製成視頻文件保存
• 4、如何使用jquery webcam 調用攝像頭
• 5、JS 能不能調用攝像頭並拍照
• 6、能不能通過js代碼打開攝像頭

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

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

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

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

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

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

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

jquery webcam 怎麼用

jQueryWebcam這個插件為直接在JavaScript中與攝像頭通信提供了一個透明的訪問層。它通一個SW文件與攝像頭交互，可以顯示Webcam輸出和捕捉圖象。如果有多個攝像頭，它可以顯示可用的攝像頭列表，然後供用戶選擇其中任意一個。

一、jQuery Webcam介紹

jQuery的攝像頭插件是一個透明層，用相機直接在JavaScript中的溝通。

這個插件提供了三種不同的模式，通過一個小的接入網路攝像頭應用程序介面直接與JavaScript

-或者更準確地說是jQuery。因此，它是可能帶來的圖像在畫布上（回調模式），存儲圖像在伺服器（保存模式）和流的Flash元素的實況圖像畫布上（流模式）。

二、jQuery Webcam使用方法

簡單調用

$(“#camera”).webcam({

width: 320,

height: 240,

mode: “callback”,

swffile: “/download/jscam_canvas_only.swf”,

onTick: function() {},

onSave: function() {},

onCapture: function() {},

debug: function() {},

onLoad: function() {}

});

參數說明

windth：flash文件的寬度

height：flash文件的高度

mode：儲存模式：callback, save, stream

swffile：flash文件的地址

拍照

調用webcam.capture();方法實現拍照。

保存照片

webcam.save();方法實現保存照片，簡單調用裡面的onSave參數是保存照片的方法，接收一個函數為照片

var canvas = document.createElement(“canvas”);

canvas.setAttribute(‘width’, 320);

canvas.setAttribute(‘height’, 240);

if (canvas.toDataURL) {

ctx = canvas.getContext(“2d”);

image = ctx.getImageData(0, 0, 320, 240);

saveCB = function(data) {

var col = data.split(“;”);

var img = image;

for(var i = 0; i 320; i++) {

var tmp = parseInt(col[i]);

img.data[pos + 0] = (tmp 16) 0xff;

img.data[pos + 1] = (tmp 8) 0xff;

img.data[pos + 2] = tmp 0xff;

img.data[pos + 3] = 0xff;

pos+= 4;

}

if (pos = 4 * 320 * 240) {

ctx.putImageData(img, 0, 0);

$.post(“/author/uedsc?page=avatar”, {type: “data”, image: canvas.toDataURL(“image/jpeg”)}, function(){

location.reload();

});

pos = 0;

}

};

} else {

saveCB = function(data) {

image.push(data);

pos+= 4 * 320;

if (pos = 4 * 320 * 240) {

$.post(“/author/uedsc?page=avatar”, {type: “data”, image: image.join(‘|’)}, function(){

location.reload();

});

pos = 0;

}

};

}

以上是官方的例子，創建一個canvas來保存圖片，然後上傳到服務端。

如何用js調用本地攝像頭然後錄製成視頻文件保存

可以用html5的video標籤，結合js調用本地攝像頭(具體實現自己百度)，可以實現拍照功能但是好像不能錄製成文件保存，可以播放本地視頻。

如何使用jquery webcam 調用攝像頭

jQueryWebcam這個插件為直接在JavaScript中與攝像頭通信提供了一個透明的訪問層。它通一個SW文件與攝像頭交互，可以顯示Webcam輸出和捕捉圖象。如果有多個攝像頭，它可以顯示可用的攝像頭列表，然後供用戶選擇其中任意一個。

一、jQuery Webcam介紹

jQuery的攝像頭插件是一個透明層，用相機直接在JavaScript中的溝通。

這個插件提供了三種不同的模式，通過一個小的接入網路攝像頭應用程序介面直接與JavaScript

-或者更準確地說是jQuery。因此，它是可能帶來的圖像在畫布上（回調模式），存儲圖像在伺服器（保存模式）和流的Flash元素的實況圖像畫布上（流模式）。

二、jQuery Webcam使用方法

簡單調用

$(“#camera”).webcam({

width: 320,

height: 240,

mode: “callback”,

swffile: “/download/jscam_canvas_only.swf”,

onTick: function() {},

onSave: function() {},

onCapture: function() {},

debug: function() {},

onLoad: function() {}

});

參數說明

windth：flash文件的寬度

height：flash文件的高度

mode：儲存模式：callback, save, stream

swffile：flash文件的地址

拍照

調用webcam.capture();方法實現拍照。

保存照片

webcam.save();方法實現保存照片，簡單調用裡面的onSave參數是保存照片的方法，接收一個函數為照片

var canvas = document.createElement(“canvas”);

canvas.setAttribute(‘width’, 320);

canvas.setAttribute(‘height’, 240);

if (canvas.toDataURL) {

ctx = canvas.getContext(“2d”);

image = ctx.getImageData(0, 0, 320, 240);

saveCB = function(data) {

var col = data.split(“;”);

var img = image;

for(var i = 0; i 320; i++) {

var tmp = parseInt(col[i]);

img.data[pos + 0] = (tmp 16) 0xff;

img.data[pos + 1] = (tmp 8) 0xff;

img.data[pos + 2] = tmp 0xff;

img.data[pos + 3] = 0xff;

pos+= 4;

}

if (pos = 4 * 320 * 240) {

ctx.putImageData(img, 0, 0);

$.post(“/author/uedsc?page=avatar”, {type: “data”, image: canvas.toDataURL(“image/jpeg”)}, function(){

location.reload();

});

pos = 0;

}

};

} else {

saveCB = function(data) {

image.push(data);

pos+= 4 * 320;

if (pos = 4 * 320 * 240) {

$.post(“/author/uedsc?page=avatar”, {type: “data”, image: image.join(‘|’)}, function(){

location.reload();

});

pos = 0;

}

};

}

以上是官方的例子，創建一個canvas來保存圖片，然後上傳到服務端。

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

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

-——代碼結束