當前位置：首頁 » 編程語言 » 攝像頭html5

攝像頭html5

發布時間: 2021-03-08 15:06:48

㈠ html5調用攝像頭報錯

主要是版本不支持
一、DOMException是？
DOMException是W3C DOM核心對象。DOMException介面表示一個處理的錯誤，當一個操作不可能執行的時候，會拋出一個異常。例如試圖創建一個無效的DOM, 或通過一個不存在的節點作為參數節點操作方法。
舉個板栗，如下代碼：
var node = document.getElementsByTagName('h1').item(0);
var refnode = node.nextSibling;
var newnode = document.createTextNode('這就是為何你掛了！');
node.insertBefore(newnode, refnode);

上面代碼演示了一個會嗝屁的insertBefore操作，因為refnode不是一個子節點。在Opera瀏覽器下，上面的操作就會導致下面顯示的異常錯誤：
Inline script thread
Error:
Unhandled Exception: [Object DOMException]
code: 8
message: NOT_FOUND_ERR

DOM並不對每個可能發生的錯誤定義一個異常，例如參數、語法錯誤就不在其中，這種情況有其自己的一套錯誤報告機制來處理。
實際上，大多數瀏覽器已經把DOM異常作為本地機制。除了顯示異常代碼和信息外，還顯示了瀏覽器可以提供的其他信息（如行數或堆棧軌跡）

㈡現在HTML5可以調用攝像頭錄像嗎

可以的
<input type="file" accept="video/*;capture=camcorder">
<input type="file" accept="audio/*;capture=microphone">
<input type="file" accept="image/*;capture=camera">直接調用相機
<input type="file" accept="image/*" />調用相機圖片或者相冊
還是要根據手機的類型來說，有些手機只能調相機，有些手機只能調相冊，或者兩者都行。

㈢如何寫html5代碼調用打開本機的攝像頭

先簡單的添加需要的控制項
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<button id='picture'>PICTURE</button>
<canvas id="canvas" width="640" height="480"></canvas>

並在script中定義
var video = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!');
}

然後，簡單的說就是利用html5的api navigator.getUserMedia來開啟設備的攝像頭，瀏覽器上會出現圖示中的提示
if (navigator.getUserMedia) { // 標準的API
navigator.getUserMedia({ "video": true }, function (stream) {
video.src = stream;
video.play();
}, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({ "video": true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errocb);
}

網上有些例子中，navigator.getUserMedia第一個參數是『video』，這可能是早期的版本，現在必須是obj
還有關於getUserMedia和webkitGetUserMedia 的判斷，網上有這么寫的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
但要注意，他們綁定video.src的方法不一樣，本人沒有測過createObjectURL是否通用

拍照功能就是簡單的調用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
所有script代碼如圖示

然後瀏覽器中就能看到攝像頭，點擊picture，就會在把當前攝像頭的圖片就會出現在右邊了

㈣如何HTML5 在網頁顯示本機攝像頭圖像的問題

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia （請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);

3、圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如php里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}

㈤如何用html5實現在網頁上顯示本地攝像頭

HTML5技術支持WebApp在手機上拍照，顯示在頁面上並上傳到伺服器。這是手機微博應用中常見的功能，當然你也可以在其它類型應用中適當使用此技術。
1、視頻流
HTML5 的 The Media Capture（媒體捕捉） API 提供了對攝像頭的可編程訪問，用戶可以直接用 getUserMedia （請注意目前僅Chrome和Opera支持）獲得攝像頭提供的視頻流。我們需要做的是添加一個HTML5 的 Video 標簽，並將從攝像頭獲得的視頻作為這個標簽的輸入來源。
<video id=」video」 autoplay=」"></video>
<script>
var video_element=document.getElementById(『video』);
if(navigator.getUserMedia){ // opera應使用opera.getUserMedianow
navigator.getUserMedia(『video』,success,error); //success是回調函數,當然你也可以直接在此寫一個匿名函數
}
function success(stream){
video_element.src=stream;
}
</script>
此時，video 標簽內將顯示動態的攝像視頻流。下面需要進行拍照了。
2、拍照
拍照是採用HTML5的Canvas功能，實時捕獲Video標簽的內容，因為Video元素可以作為Canvas圖像的輸入，所以這一點很好實現。主要代碼如下：

var canvas=document.createElement(『canvas』); //動態創建畫布對象
var ctx=canvas.getContext(』2d』);
var cw=vw,ch=vh;
ctx.fillStyle=」#ffffff」;
ctx.fillRect(0,0,cw,ch);
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //將video對象內指定的區域捕捉繪制到畫布上指定的區域，可進行不等大不等位的繪制。
document.body.append(canvas);

3、圖片獲取
從Canvas獲取圖片數據的核心思路是用canvas的toDataURL將Canvas的數據轉換為base64位編碼的PNG圖像，類似於「data:image/png;base64,xxxxx」的格式。
var imgData=canvas.toDataURL(「image/png」);

這樣，imgData變數就存儲了一長串的字元數據內容，表示的就是一個PNG圖像的base64編碼。因為真正的圖像數據是base64編碼逗號之後的部分，所以要讓實際伺服器接收的圖像數據應該是這部分，我們可以用兩種辦法來獲取。
第一種：是在前端截取22位以後的字元串作為圖像數據，例如：
var data=imgData.substr(22);

如果要在上傳前獲取圖片的大小，可以使用：
var length=atob(data).length; //atob 可解碼用base-64解碼的字串

第二種：是在後端獲取傳輸的數據後用後台語言截取22位以後的字元串（也就是在前台略過上面這步直接上傳）。例如PHP里：
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);

4、圖片上傳
在前端可以使用Ajax將上面獲得的圖片數據上傳到後台腳本。例如使用jQuery時可以用：
$.post(『upload.php』,{『data』:data});

在後台我們用PHP腳本接收數據並存儲為圖片。
function convert_data($data){
$image=base64_decode(str_replace(『data:image/jpeg;base64,』,」,$data);
save_to_file($image);
}
function save_to_file($image){
$fp=fopen($filename,』w');
fwrite($fp,$image);
fclose($fp);
}

以上的解決方案不僅能用於Web App拍照上傳，也可以通過Canvas的編輯功能函數提供圖片編輯，例如裁剪、上色、塗鴉、圈點等功能，然後把用戶編輯完的圖片上傳保存到伺服器上。
在還在不斷補充修正的HTML5的驅動下，Web App與Native App之間的距離將越來越小。在可預見的不遠的未來，越來越多老的和新的開發項目必將會遷移到WEB應用上來。

㈥如何通過html5調用攝像頭拍照

ios拍照默認是旋轉的，有個exif的插件是專門解決這個問題的。js版連接:網頁鏈接，裡面有使用回教程。答通過這個判斷照片的旋轉角度之後，可以把它旋轉過來再保存，教程：網頁鏈接。如果只有預覽需求，直接旋轉容器進行顯示也是可以的。

㈦ html5可以調手機端的攝像頭嗎

今天做手機網站，想實現手機掃描二維碼功能。首先實現在瀏覽器中調用手機攝像頭，實現拍照功能並且把拍下的照片顯示在頁面並上傳到伺服器上，然後再在伺服器端進行分析。
首先實現在瀏覽器中調用攝像頭，當然用現在火的不行的html5，html5中的<video>標簽，並將從攝像頭獲得視頻作為這個標簽的輸入來源。實現拍照功能的html5代碼：
<article>
<style scoped>
video { transform: scaleX(-1); }
p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
<p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
<p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
<p><input type=button value="📷" onclick="snapshot()">
</section>
<script>
navigator.getUserMedia({video:true}, gotStream, noStream);
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
function gotStream(stream) {
video.src = URL.createObjectURL(stream);
video.onerror = function () {
stream.stop();
};
stream.onended = noStream;
video.onloadedmetadata = function () {
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
document.getElementById('splash').hidden = true;
document.getElementById('app').hidden = false;
};
}
function noStream() {
document.getElementById('errorMessage').textContent = 'No camera available.';
}
function snapshot() {
canvas.getContext('2d').drawImage(video, 0, 0);
}
</script>
</article>

經本人測試在android手機的opera瀏覽器瀏覽器下可以正常實現手機拍照功能。android手機下的google chrome瀏覽器還不行，自帶的瀏覽器也測試沒有通過。iphone手機的safari瀏覽器也是不支持的。

㈧如何使用HTML5實現利用攝像頭拍照上傳功能

先簡單的添加需要的控制項
<video id="video" autoplay=""style='width:640px;height:480px'></video>
<button id='picture'>PICTURE</button>
<canvas id="canvas" width="640" height="480"></canvas>
並在script中定義
var video = document.getElementById("video");
var context = canvas.getContext("2d")
var errocb = function () {
console.log('sth wrong!');
}
HTML5調用攝像頭並拍照
然後，簡單的說就是利用html5的api navigator.getUserMedia來開啟設備的攝像頭，瀏覽器上會出現圖示中的提示
if (navigator.getUserMedia) { // 標準的API
navigator.getUserMedia({ "video": true }, function (stream) {
video.src = stream;
video.play();
}, errocb);
} else if (navigator.webkitGetUserMedia) { // WebKit 核心的API
navigator.webkitGetUserMedia({ "video": true }, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errocb);
}
HTML5調用攝像頭並拍照
網上有些例子中，navigator.getUserMedia第一個參數是『video』，這可能是早期的版本，現在必須是obj
還有關於getUserMedia和webkitGetUserMedia 的判斷，網上有這么寫的
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
但要注意，他們綁定video.src的方法不一樣，本人沒有測過createObjectURL是否通用
HTML5調用攝像頭並拍照
拍照功能就是簡單的調用canvas中的drawImage即可
document.getElementById("picture").addEventListener("click", function () {
context.drawImage(video, 0, 0, 640, 480);
});
所有script代碼如圖示
HTML5調用攝像頭並拍照
然後瀏覽器中就能看到攝像頭，點擊picture，就會在把當前攝像頭的圖片就會出現在右邊了

㈨ html5怎麼關閉攝像頭

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

html5打開攝像頭代碼：
<!DOCTYPE html>
<html lang="zh-cn">
<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{
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 class="Screen_outer">
<div id="mainbox" class="Screen_inner">
<div id="bt_goback"></div>

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

<div class="t_descri_bt"></div>

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

閱讀全文

攝像頭html5

與攝像頭html5相關的閱讀推薦