不支持IE浏览器(需要使用flash插件), 支持移动端, 未经过完全测试
PC端使用的时候, HTML页面需要预留video标签, canvas标签
移动端使用的时候, HTML页面需要预留file标签, canvas标签, img标签
|
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
125
126
127
128
129
130
131
132
133
134
135
136
137
|
(function (window, document) {
window.camera = {
init: function (options) {
/**
* options 属性示例
* videoID: video控件ID
* canvasID: canvas控件ID
* fileID: type为file的input控件的ID
* imageID: img控件的ID
* videoEnable: 是否启用摄像头
* audioEnable: 是否启用麦克风
* videoWidth: 视频宽度
* videoHeight: 视频高度
* photoWidth: 拍照宽度
* photoHeight: 拍照高度
*/
_options = options;
if (isMobileTerminal()) {
initMobileTerminal();
} else {
initComputerTerminal();
}
},
photo: function () {
if (isMobileTerminal()) {
photoMobileTerminal();
} else {
photoComputerTerminal();
}
}
};
let _options = null;
function initComputerTerminal() {
let videoDom = document.getElementById(_options.videoID);
if (!videoDom) {
alert('Video 控件无效');
return;
}
let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
}
canvasDom.setAttribute('width', _options.photoWidth + 'px');
canvasDom.setAttribute('height', _options.photoHeight + 'px');
let parameters = {
video: _options.videoEnable ? {
width: _options.videoWidth,
height: _options.videoHeight
} : false,
audio: _options.audioEnable
};
navigator.mediaDevices.getUserMedia(parameters)
.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
}).catch(function (reason) {
console.log(reason);
alert(reason);
});
}
function photoComputerTerminal() {
let videoDom = document.getElementById(_options.videoID);
if (!videoDom) {
alert('Video 控件无效');
return;
}
let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
}
let context = canvasDom.getContext('2d');
context.drawImage(videoDom, 0, 0, _options.photoWidth, _options.photoHeight);
}
function initMobileTerminal() {
let fileDom = document.getElementById(_options.fileID);
if (!fileDom) {
alert('File 控件无效');
return;
}
fileDom.setAttribute('accept', 'image/*');
fileDom.setAttribute('capture', 'camera');
let canvasDom = document.getElementById(_options.canvasID);
if (!canvasDom) {
alert('Canvas 控件无效');
return;
}
canvasDom.setAttribute('width', _options.photoWidth + 'px');
canvasDom.setAttribute('height', _options.photoHeight + 'px');
let imageDom = document.getElementById(_options.imageID);
if (!imageDom) {
alert('Image 控件无效');
return;
}
fileDom.addEventListener('change', function () {
let file = fileDom.files[0];
let reader = new FileReader();
reader.onloadend = function () {
imageDom.setAttribute('src', reader.result);
setTimeout(function () {
let context = canvas.getContext("2d");
context.drawImage(imageDom, 0, 0, _options.photoWidth, _options.photoHeight);
}, 300);
};
reader.readAsDataURL(file);
});
}
function photoMobileTerminal() {
let fileDom = document.getElementById(_options.fileID);
fileDom.click();
}
function isMobileTerminal() {
if (/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /Mobile/.test(navigator.userAgent) || /MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))
return /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
return false;
}
})(window, document);
|
以上就是js调用网络摄像头的方法的详细内容，更多关于js调用网络摄像头的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/JosephBee/p/11090962.html