-
Notifications
You must be signed in to change notification settings - Fork 1
/
404 copy.html
executable file
·126 lines (103 loc) · 4.73 KB
/
404 copy.html
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
<!DOCTYPE HTML>
<html>
<body>
<h1>You have Lost, this is page 404. Go back to <a href="https://rusyasoft.github.io"> rusyasoft.github.io </a> </h1>
<h2> Experiment with WebRTC - 3 </h2>
<div id="cameraSelector">
Video: <select id="camera"></select>
</div>
<p><button id="takeProfilePicture" type="button" autofocus="true">Create Profile Picture</button></p>
<video id="videoTag" autoplay></video>
<canvas id="profilePicCanvas" style="display: none;"></canvas>
<div>
<img id="profilePictureOutput">
</div>
<script>
var videoArea = document.querySelector("video");
var videoSelect = document.querySelector('#camera');
var profilePicCanvas = document.querySelector("#profilePicCanvas");
var profilePictureOutput = document.querySelector("#profilePictureOutput");
var takePicButton = document.querySelector("#takeProfilePicture");
var videoTag = document.querySelector("#videoTag");
var width = 240;
var height = 0;
var streaming = false;
takePicButton.addEventListener('click', function(ev) {
takeProfilePic();
ev.PreventDefault();
}, false);
videoTag.addEventListener('canplay', function(ev) {
if (!streaming) {
height = videoTag.videoHeight / (videoTag.videoWidth/width);
if (isNaN(height) ) {
height = width / (4/3);
}
videoTag.setAttribute('width', width);
videoTag.setAttribute('height', height);
profilePicCanvas.setAttribute('width', width);
profilePicCanvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takeProfilePic() {
var context = profilePicCanvas.getContext('2d');
if (width && height) {
profilePicCanvas.width = width;
profilePicCanvas.height = height;
context.drawImage(videoTag, 0, 0, width, height);
var data = profilePicCanvas.toDataURL('image/png');
profilePictureOutput.setAttribute('src', data);
}
}
if (typeof MediaStreamTrack === 'undefined'
|| typeof MediaStreamTrack.getSources === 'undefined' ) {
document.querySelector("#cameraSelector").style.visibility="hidden";
} else {
MediaStreamTrack.getSources(getCameras);
}
videoSelect.onchange = startStream;
startStream();
//navigator.getUserMedia(constraints, onSuccess, onError);
function getCameras(sourceInfos) {
for ( var i = 0; i !== sourceInfos.length; ++i ) {
var sourceInfo = sourceInfos[i];
var option = document.createElement('option');
option.value = sourceInfo.id;
if (sourceInfo.kind === 'video') {
option.text = sourceInfo.label || 'camera ' + (videoSelect.length + 1);
videoSelect.appendChild(option);
}
}
}
function startStream() {
navigator.getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia;
var videoSource = videoSelect.value;
var constraints = {
audio: true,
video: {
mandatory: {
minWidth: 240,
maxWidth: 240,
minHeight: 240,
maxHeight: 240
},
optional: [{
sourceId: videoSource
}]
}
};
navigator.getUserMedia(constraints, onSuccess, onError);
}
function onSuccess(stream) {
console.log("Success! We have a stream!");
videoArea.src = window.URL.createObjectURL(stream);
videoArea.play();
}
function onError(error) {
console.log("Error with getUserMedia: ", error);
}
</script>
</body>
</html>