-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideo.html
77 lines (72 loc) · 3.34 KB
/
video.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
<!DOCTYPE html>
<html lang="en">
<head>
<script src="fluiditypeer.js"></script>
<script src="peerjs.js"></script>
<script src="/tenvoy/cryptico.js"></script>
<script src="/tenvoy/tenvoy.js"></script>
</head>
<body>
<main style="display: none">
<p id="id">FluidityPeer ID: </p>
<input id="conn_id" placeholder="FluidityPeer ID" /><button onclick="callUser()" id="conn_id_btn">Call</button><br>
<p id="status" style="display: none"></p>
<video id="video_self" autoplay playsinline style="display: none; width: calc(50% - 10px);"></video>
<video id="video" autoplay playsinline style="display: none; width: calc(50% - 10px);"></video>
</main>
<script>
async function init() {
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
await getUserMedia({video: true, audio: true}, (stream) => {
window.stream_outgoing = stream;
});
await getUserMedia({video: true, audio: false}, (stream) => {
window.stream_local = stream;
});
window.peer = await new FluidityPeer();
peer.onReceive = (data, conn_id, peer_id) => {
}
var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.peer.on('call', async (call) => {
if(confirm("Incoming call from " + call.peer + ". Answer?")) {
await call.answer(window.stream_outgoing);
call.on('stream', (remoteStream) => {
document.querySelector("#conn_id").style.display = "none";
document.querySelector("#conn_id_btn").style.display = "none";
document.querySelector("#status").innerHTML = "Connecting... (this process can take around 5 seconds, please be patient)";
document.querySelector("#status").style.display = "block";
setTimeout(() => {
document.querySelector("#status").style.display = "none";
document.querySelector("#video").srcObject = remoteStream;
document.querySelector("#video").style.display = "inline-block";
document.querySelector("#video_self").srcObject = window.stream_local;
document.querySelector("#video_self").style.display = "inline-block";
}, 5000);
});
}
});
document.querySelector("#id").innerHTML = "FluidityPeer ID: " + peer.id;
document.querySelector("main").style.display = "block";
}
async function callUser() {
let peer_id = document.querySelector("#conn_id").value;
document.querySelector("#conn_id").value = "";
var call = await peer.peer.call(peer_id, window.stream_outgoing);
call.on('stream', async (remoteStream) => {
document.querySelector("#conn_id").style.display = "none";
document.querySelector("#conn_id_btn").style.display = "none";
document.querySelector("#status").innerHTML = "Connecting... (this process can take around 5 seconds, please be patient)";
document.querySelector("#status").style.display = "block";
setTimeout(() => {
document.querySelector("#status").style.display = "none";
document.querySelector("#video").srcObject = remoteStream;
document.querySelector("#video").style.display = "inline-block";
document.querySelector("#video_self").srcObject = window.stream_local;
document.querySelector("#video_self").style.display = "inline-block";
}, 5000);
});
}
init();
</script>
</body>
</html>