-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
115 lines (99 loc) · 3.44 KB
/
index.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
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
var video = document.createElement('video');
video.setAttribute('autoplay', 'autoplay');
video.setAttribute('playsinline', 'playsinline');
video.setAttribute('muted', 'muted');
video.setAttribute('loop', 'loop');
video.setAttribute('controls', 'controls');
video.setAttribute('width', '100%');
video.setAttribute('height', '100%');
video.style.width = '40%';
video.style.height = '40%';
document.body.appendChild(video);
var videoStream = null;
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
videoStream = stream;
video.srcObject = stream;
})
.catch(function (err) {
console.log(err);
});
var ticker = document.createElement('div');
ticker.innerHTML = 'OpenAI Experiments with: Natalie Pistunovich';
ticker.style.position = 'absolute';
ticker.style.bottom = '0';
ticker.style.left = '0';
ticker.style.right = '0';
ticker.style.textAlign = 'center';
ticker.style.fontSize = '2em';
ticker.style.color = 'white';
ticker.style.zIndex = '1';
document.body.appendChild(ticker);
ticker.style.backgroundColor = 'blue';
ticker.style.bottom = '20%';
var speechRecognition = new webkitSpeechRecognition();
speechRecognition.continuous = true;
speechRecognition.interimResults = true;
speechRecognition.lang = 'en-US';
var speechRecognitionResult = document.createElement('div');
speechRecognitionResult.style.position = 'absolute';
speechRecognitionResult.style.bottom = '50';
speechRecognitionResult.style.left = '0';
speechRecognitionResult.style.right = '0';
speechRecognitionResult.style.textAlign = 'center';
speechRecognitionResult.style.fontSize = '2em';
speechRecognitionResult.style.color = 'green';
speechRecognitionResult.style.backgroundColor = 'white';
speechRecognitionResult.style.zIndex = '1';
document.body.appendChild(speechRecognitionResult);
speechRecognition.onresult = function (event) {
var transcript = '';
for (var i = event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
speechRecognitionResult.innerHTML = transcript;
};
speechRecognition.onend = function () {
speechRecognitionResult.innerHTML = 'Speech recognition ended.';
};
speechRecognition.start();
var logo = document.createElement('img');
logo.src = 'https://i.imgur.com/QwhZRyL.png';
logo.style.position = 'absolute';
logo.style.right = '0';
logo.style.top = '0';
logo.style.width = '20%';
logo.style.height = '20%';
logo.style.zIndex = '1';
document.body.appendChild(logo);
var screenshare = document.createElement('video');
screenshare.setAttribute('autoplay', 'autoplay');
screenshare.setAttribute('playsinline', 'playsinline');
screenshare.setAttribute('muted', 'muted');
screenshare.setAttribute('loop', 'loop');
screenshare.setAttribute('controls', 'controls');
screenshare.setAttribute('width', '100%');
screenshare.setAttribute('height', '100%');
document.body.appendChild(screenshare);
var screenshareStream = null;
navigator.mediaDevices.getDisplayMedia({ video: true })
.then(function (stream) {
screenshareStream = stream;
screenshare.srcObject = stream;
})
.catch(function (err) {
console.log(err);
});
screenshare.style.position = 'absolute';
screenshare.style.right = '0';
screenshare.style.top = '0';
screenshare.style.width = '75%';
screenshare.style.height = '75%';
});
</script>
</head>
</html>