<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js開啓攝像頭拍照並上傳圖片</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay="autoplay"></video>
<canvas id="canvas" style="display: none;" width="640" height="480"></canvas>
<button onclick="openMedia()">開啓攝像頭</button>
<button id="capture" onclick="takePhoto()">拍照</button>
<button onclick="closeMedia()">關閉攝像頭</button>
<div><img id="imgTag" src="" alt="imgTag"></div>
<script>
let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 開啓攝像頭
function openMedia() {
// 老的瀏覽器可能根本沒有實現 mediaDevices，所以我們可以先設置一個空的對象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設置 getUserMedia
// 因爲這樣可能會覆蓋已有的屬性。這裏我們只會在沒有getUserMedia屬性的時候添加它。
if (navigator.mediaDevices.getUserMedia === undefined) {
navigator.mediaDevices.getUserMedia = function (constraints) {
// 首先，如果有getUserMedia的話，就獲得它
var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
// 一些瀏覽器根本沒實現它 - 那麼就返回一個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);
});
}
}
//默認使用前攝像頭，強制使用後置攝像頭如下設置
// let constraints = {video: { facingMode: { exact: "environment" } }};
let constraints = {video: true};
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// 舊的瀏覽器可能沒有srcObject
if ("srcObject" in video) {
video.srcObject = stream;
} else {
// 防止在新的瀏覽器裏使用它，應爲它已經不再支持了
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function (e) {
video.play();
};
})
.catch(function (err) {
console.log(err.name + ": " + err.message);
});
}
// 拍照
function takePhoto() {
//繪製畫面
context.drawImage(video, 0, 0, 640, 480);
// toDataURL --- 可傳入'image/png'---默認, 'image/jpeg'
let img = document.getElementById('canvas').toDataURL();
// 這裏的img就是得到的圖片
console.log('img-----', img);
document.getElementById('imgTag').src=img;
}
// 關閉攝像頭
function closeMedia() {
if("srcObject" in video) {
let stream = video.srcObject;
let tracks = stream.getTracks();
tracks.forEach(function(track) {
track.stop();
});
video.srcObject = null;
}
}
</script>
</body>
</html>
js 使用攝像頭進行拍照上傳功能
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章