deviceId获取方式
let deviceIds = new Array();
navigator.mediaDevices.enumerateDevices().then((devicesList) => {
console.log(devicesList)
for(var i = 0; i < devicesList.length; i++) {
if(devicesList[i]['kind'] == 'videoinput') {
deviceIds.push(devicesList[i]['deviceId'])
}
}
});
全部的html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
</head>
<body>
<button onclick="openMedia()">开启摄像头</button>
<button onclick="closeMedia()">关闭摄像头</button>
<button onclick="takePhoto()">拍照</button><br/><br/>
<video style="display: none;" class="src-video" width="300px" height="300px" autoplay="autoplay"></video>
<canvas id="canvas" width="300px" height="300px" style="display: none;"></canvas>
<img src="" alt="" class="photo">
<button onclick="openMedia1()">开启摄像头1</button>
<button onclick="closeMedia1()">关闭摄像头1</button>
<button onclick="takePhoto1()">拍照1</button><br/><br/>
<video style="display: none;" class="src-video1" width="300px" height="300px" autoplay="autoplay"></video>
<canvas id="canvas1" width="300px" height="300px" style="display: none;"></canvas>
<img src="" alt="" class="photo1">
</body>
<script>
let deviceIds = new Array();
navigator.mediaDevices.enumerateDevices().then((devicesList) => {
console.log(devicesList)
for(var i = 0; i < devicesList.length; i++) {
if(devicesList[i]['kind'] == 'videoinput') {
deviceIds.push(devicesList[i]['deviceId'])
}
}
});
let srcVideo = document.querySelector('video.src-video');
let mediaStream;
let photo = document.querySelector('img.photo');
// 开启摄像头
function openMedia() {
photo.src = '';
srcVideo.style.display = 'block';
let constraints = {
audio: false, //音频轨道
video: {
width: 300,
height: 300,
deviceId: deviceIds[0]
} //视频轨道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise.then(function(stream) {
/* 使用这个stream stream */
mediaStream = stream;
srcVideo.srcObject = stream;
srcVideo.play();
}).catch(function(err) {
/* 处理error */
alert(err);
});
navigator.mediaDevices.enumerateDevices().then((devicesList) => {
console.log(devicesList)
});
};
// 拍照
let takePhoto = function() {
let canvas = document.querySelector('#canvas');
//获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 300, 300);
//将 `canvas`绘制的图片信息，展示在 `img`标签中；
photo.src = canvas.toDataURL();
console.log(photo.src);
};
// 关闭摄像头
let closeMedia = function() {
mediaStream.getTracks().forEach(track => {
track.stop();
});
srcVideo.style.display = 'none';
};
let srcVideo1 = document.querySelector('video.src-video1');
let mediaStream1;
let photo1 = document.querySelector('img.photo1');
// 开启摄像头
function openMedia1() {
console.log(deviceIds)
photo1.src = '';
srcVideo1.style.display = 'block';
let constraints = {
audio: false, //音频轨道
video: {
width: 300,
height: 300,
deviceId: deviceIds[1]
} //视频轨道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise.then(function(stream) {
/* 使用这个stream stream */
mediaStream1 = stream;
srcVideo1.srcObject = stream;
srcVideo1.play();
}).catch(function(err) {
/* 处理error */
alert(err);
});
};
// 拍照
let takePhoto1 = function() {
let canvas = document.querySelector('#canvas1');
//获取 `canvas`元素，根据`srcVideo1`中的数据进行图片绘制 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo1, 0, 0, 300, 300);
//将 `canvas`绘制的图片信息，展示在 `img`标签中；
photo1.src = canvas.toDataURL();
console.log(photo1.src);
};
// 关闭摄像头
let closeMedia1 = function() {
mediaStream1.getTracks().forEach(track => {
track.stop();
});
srcVideo1.style.display = 'none';
};
</script>
</html>
