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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
import React from 'react';
import {StyleSheet,css} from 'aphrodite/no-important'
import { dpw, dph } from '../../common/tool/ScreenFit';
export default class AliveCheck extends React.PureComponent {
componentDidMount() {
this.video = document.getElementById('video');
this.canvas = document.getElementById('canvas');
this.context = this.canvas.getContext('2d');
const constraints = {
audio: false,
video : {
width: 480,
height: 320,
sourceId: 'default',
facingMode: { exact: "environment" },
// facingMode: { exact: "user" },
permissions: {
"audio-capture": {
"description": "Required to capture audio using getUserMedia()"
},
"video-capture": {
"description": "Required to capture video using getUserMedia()"
}
}
}
}
// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
this.getUserMedia(constraints, this.success, this.error);
} else {
alert('不支持访问用户媒体');
}
}
//访问用户媒体设备的兼容方法
getUserMedia =(constraints, success, error) => {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
} else if (navigator.webkitGetUserMedia) {
//webkit核心浏览器
navigator.webkitGetUserMedia(constraints,success, error)
} else if (navigator.mozGetUserMedia) {
//firfox浏览器
navigator.mozGetUserMedia(constraints, success, error);
} else if (navigator.getUserMedia) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
success =(stream) => {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
this.video.srcObject = stream;
this.video.play();
}
error =(error)=> {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
takePhoto =() => {
alert('takePhoto')
this.context.drawImage(this.video, 0, 0, 480, 320);
}
stopCamera =() => {
if (!this.video.srcObject) return
let stream = this.video.srcObject
let tracks = stream.getTracks();
tracks.forEach(track => {
track.stop()
})
}
render() {
return(
<div className={css(styles.box)}>
<video className={css(styles.video)} id="video" width="480" height="320" controls></video>
<div>
<button id="capture" onClick={this.takePhoto}>拍照</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
</div>
)
}
}
const styles = StyleSheet.create({
box: {
display: 'flex',
width: '100%',
height: '100%',
flexDirection: 'column',
},
video: {
// 水平镜像翻转180
transform: 'rotateY(180deg)',
}
})
|