介绍
今天闲来无事想改Teams头像，但是找了半天也没有发现Mac该如何拍照，于是同事说：都是干前端的，何不用javascript来拍照呢？于是一顿操作猛如虎，终于拍到了照片。一起来看看。
javascript中如何操作摄像头
首先要确认你的电脑有摄像头，然后我们先写一个打开摄像头的函数。在javascript中，我们可以使用navigator.mediaDevices.getUserMedia来访问摄像头。拿到摄像头的stream之后，将它赋值给一个提前定义好的video元素，这样就可以在页面上显示摄像头的画面了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function openCamera(videoElement) {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
videoElement.srcObject = stream;
})
.catch((error) => {
alert(error.message);
});
} else {
alert("You don't have a web camera");
}
}
|
在来写一个关闭摄像头的函数。关闭摄像头其实就是停止stream中的所有轨道，并将video元素的srcObject设置为null。
1
2
3
4
5
6
7
8
| function closeCamera(videoElement) {
const stream = videoElement.srcObject;
const tracks = stream.getTracks();
for (let i = 0; i < tracks.length; i++) {
tracks[i].stop();
}
videoElement.srcObject = null;
}
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Live Camera</title>
<style>
#container {
width: 600px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #333;
}
#videoElement {
width: 500px;
height: 300px;
background-color: #666;
}
#controlContainer {
width: 600px;
margin: 16px auto;
}
</style>
</head>
<body>
<h1>Show live stream from web camera</h1>
<div id="container">
<video autoplay id="videoElement"></video>
<img id="imageElement" style="display: none" />
</div>
<div id="controlContainer">
<button id="openCamera">Open Camera</button>
<button id="closeCamera">Close Camera</button>
</div>
<script>
function openCamera(videoElement) {
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((stream) => {
videoElement.srcObject = stream;
})
.catch((error) => {
alert(error.message);
});
} else {
alert("You don't have a web camera");
}
}
function closeCamera(videoElement) {
const stream = videoElement.srcObject;
const tracks = stream.getTracks();
for (let i = 0; i < tracks.length; i++) {
tracks[i].stop();
}
videoElement.srcObject = null;
}
const videoElement = document.getElementById("videoElement");
const openButton = document.getElementById("openCamera");
const closeButton = document.getElementById("closeCamera");
openButton.addEventListener("click", () => {
openCamera(videoElement);
});
closeButton.addEventListener("click", () => {
closeCamera(videoElement);
});
</script>
</body>
</html>
|