溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在html5中調用攝像頭，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
調用攝像頭
第一種方法navigator.getUserMedia用法詳見mdn ，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>攝像頭調用1</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia || null;
}
if (userMedia()) {
var constraints = {
video: true,
audio: false
};
var media = navigator.getUserMedia(constraints, function (stream) {
var v = document.getElementById('v');
var url = window.URL || window.webkitURL;
v.src = url ? url.createObjectURL(stream) : stream;
v.play();
}, function (error) {
console.log("ERROR");
console.log(error);
});
} else {
console.log("不支持");
}
})();
</script>
</body>
</html>第二種方法navigator.mediaDevices.getUserMedia用法詳見mdn。navigator.mediaDevices.getUserMedia 其實和第一種差不多，主要第二種返回是一個 Promise 對象，代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>攝像頭調用2</title>
</head>
<body>
<video id="v"></video>
<script>
!(function () {
// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些瀏覽器根本沒實現它 - 那么就返回一個error到promise的reject來保持一個統一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否則，為老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
let v = document.getElementById('v');
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的瀏覽器里使用它，應為它已經不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
})();
</script>
</body>
</html>拍照
思路是設置一個標志變量 videoPlaying 看看是否 video 有在 play，監聽拍照按鈕的點擊事件，如果videoPlaying 為 true ，使用一個canvas 獲取 video 的寬高（默認 canvas 是不顯示的），然后使用 canvas 的drawImage,然后使用 canvas 的 toDataURL返回一個 data url，將這個 url，設置在一個 img 標簽上即可?
第一種方法navigator.getUserMedia實現代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照1</title>
</head>
<body>
<button id="take">拍照</button>
<br />
<video id="v" style="width: 640px;height: 480px;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<br />
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
<script>
!(function () {
function userMedia() {
return navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia || null;
}
if (userMedia()) {
let videoPlaying = false;
let constraints = {
video: true,
audio: false
};
let video = document.getElementById('v');
let media = navigator.getUserMedia(constraints, function (stream) {
let url = window.URL || window.webkitURL;
video.src = url ? url.createObjectURL(stream) : stream;
video.play();
videoPlaying = true;
}, function (error) {
console.log("ERROR");
console.log(error);
});
document.getElementById('take').addEventListener('click', function () {
if (videoPlaying) {
let canvas = document.getElementById('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext('2d').drawImage(video, 0, 0);
let data = canvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
}
}, false);
} else {
console.log("不支持");
}
})();
</script>
</body>
</html>第二種navigator.mediaDevices.getUserMedia實現方法:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拍照2</title>
</head>
<body>
<button id="take">拍照</button>
<br />
<video id="v" style="width: 640px;height: 480px;"></video>
<canvas id="canvas" style="display:none;"></canvas>
<br />
<img src="http://placehold.it/640&text=Your%20image%20here%20..." id="photo" alt="photo">
<script>
!(function () {
// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
// 一些瀏覽器根本沒實現它 - 那么就返回一個error到promise的reject來保持一個統一的接口
if (!getUserMedia) {
return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
}
// 否則，為老的navigator.getUserMedia方法包裹一個Promise
return new Promise(function (resolve, reject) {
getUserMedia.call(navigator, constraints, resolve, reject);
});
}
}
const constraints = {
video: true,
audio: false
};
let videoPlaying = false;
let v = document.getElementById('v');
let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(stream => {
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in v) {
v.srcObject = stream;
} else {
// 防止再新的瀏覽器里使用它，應為它已經不再支持了
v.src = window.URL.createObjectURL(stream);
}
v.onloadedmetadata = function (e) {
v.play();
videoPlaying = true;
};
}).catch(err => {
console.error(err.name + ": " + err.message);
})
document.getElementById('take').addEventListener('click', function () {
if (videoPlaying) {
let canvas = document.getElementById('canvas');
canvas.width = v.videoWidth;
canvas.height = v.videoHeight;
canvas.getContext('2d').drawImage(v, 0, 0);
let data = canvas.toDataURL('image/webp');
document.getElementById('photo').setAttribute('src', data);
}
}, false);
})();
</script>
</body>
</html>以上就是怎么在html5中調用攝像頭，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
