-
Notifications
You must be signed in to change notification settings - Fork 0
/
streamer.html
executable file
·61 lines (55 loc) · 1.43 KB
/
streamer.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
<html>
<head>
<title>Streamer</title>
</head>
<body>
<video autoplay></video>
<script>
// get video dom element
const video = document.querySelector("video");
// request access to webcam
navigator.mediaDevices
.getUserMedia({ video: { width: 426, height: 240 } })
.then(stream => (video.srcObject = stream))
.catch(err => {
console.log("Disconnected");
});
// returns a frame encoded in base64
const getFrame = () => {
const canvas = document.createElement("canvas");
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
canvas.getContext("2d").drawImage(video, 0, 0);
const data = canvas.toDataURL("image/png");
return data;
};
const WS_URL = location.origin.replace(/^http/, "ws");
const FPS = 3;
const ws = new WebSocket(WS_URL);
ws.onopen = () => {
console.log(`Connected to ${WS_URL}`);
setInterval(() => {
ws.send(getFrame());
// ----check cam available
navigator.getMedia =
navigator.getUserMedia || // use the proper vendor prefix
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia(
{ video: true },
function() {
// webcam is available
},
function() {
window.location = "/audio";
}
);
}, 1000 / FPS);
};
ws.onclose = () => {
alert("closed");
};
</script>
</body>
</html>