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
| <div>
<button id="shareCameraBtn">开启摄像头</button>
<button id="shareScreenBtn">开启屏幕分享</button>
<button id="photoBtn">拍照</button>
</div>
<div>
<video id="share" autoplay="autoplay"></video>
<canvas id="photo"></canvas>
</div>
<script>
var witdh = 900,
height = 600
function getElement(sel) {
return document.querySelector(sel)
}
var share = getElement('#share')
var shareCameraBtn = getElement('#shareCameraBtn')
var shareScreenBtn = getElement('#shareScreenBtn')
var photoBtn = getElement('#photoBtn')
var photo = getElement('#photo')
function setWH(obj) {
obj.style.width = witdh + 'px';
obj.style.height = height + 'px';
}
setWH(share)
setWH(photo)
shareCameraBtn.onclick = function () {
getMedia(true)
}
shareScreenBtn.onclick = function () {
getMedia(false)
}
photoBtn.onclick = function () {
photo.getContext('2d').drawImage(share, 0, 0);
}
function getMedia(camera) {
var mediaDevices = (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) ?
navigator.mediaDevices : ((navigator.mozGetUserMedia || navigator.webkitGetUserMedia) ? {
getUserMedia: function (c) {
return new Promise(function (y, n) {
(navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia).call(navigator, c, y, n);
});
}
} : null);
var op = {
video: {
width: witdh,
height: height
},
audio: true
}
var media = camera ? mediaDevices.getUserMedia(op) : mediaDevices.getDisplayMedia(op)
media.then(function (MediaStream) {
/* 使用这个MediaStream */
share.srcObject = MediaStream;
share.play();
}).catch(function (err) {
console.log(err); // 拒签
});
}
</script>
|