-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (88 loc) · 3.83 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
<!DOCTYPE html>
<html>
<head>
<title>Andy's P2P Chat</title>
<style>
body { font-family: sans-serif; margin: 20px; }
#chat-area { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; margin-bottom: 10px; }
#message-input { width: calc(100% - 22px); padding: 5px; border: 1px solid #ccc; box-sizing: border-box; }
#video-container { display: flex; justify-content: center; align-items: center; margin-top: 20px; }
#local-video, #remote-video { width: 320px; height: 240px; border: 1px solid black; margin: 10px; }
textarea { width: 100%; height: 100px; margin-top: 10px; }
</style>
</head>
<body>
<h1>Andy's P2P Chat</h1>
<div id="chat-area"></div>
<input type="text" id="message-input" placeholder="Type your message...">
<button onclick="sendMessage()">Send</button>
<div id="video-container">
<video id="local-video" autoplay playsinline muted></video>
<video id="remote-video" autoplay playsinline></video>
</div>
<textarea id="offer" placeholder="Paste offer here..."></textarea>
<button onclick="createAnswer()">Create Answer</button>
<textarea id="answer" placeholder="Paste answer here..."></textarea>
<!-- Include Simple Peer from a CDN -->
<script src="https://unpkg.com/simple-peer@latest/simplepeer.min.js"></script>
<script>
const chatArea = document.getElementById('chat-area');
const messageInput = document.getElementById('message-input');
const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');
const offerTextarea = document.getElementById('offer');
const answerTextarea = document.getElementById('answer');
let peer;
let stream;
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(mediaStream => {
stream = mediaStream;
localVideo.srcObject = stream;
peer = new SimplePeer({ initiator: location.hash === '#init', trickle: false, stream });
peer.on('signal', data => {
if (peer.initiator) {
offerTextarea.value = JSON.stringify(data);
} else {
answerTextarea.value = JSON.stringify(data);
}
});
peer.on('stream', remoteStream => {
remoteVideo.srcObject = remoteStream;
});
peer.on('data', data => {
displayMessage("Other: " + data.toString());
});
peer.on('connect', () => {
console.log("Peer connected");
});
})
.catch(error => console.error("Error accessing media devices:", error));
function sendMessage() {
const message = messageInput.value;
if (message.trim() !== "") {
displayMessage("You: " + message);
messageInput.value = "";
if (peer && peer.connected) {
peer.send(message);
} else {
console.log("Not connected to peer yet");
}
}
}
function displayMessage(message) {
const messageDiv = document.createElement('div');
messageDiv.textContent = message;
chatArea.appendChild(messageDiv);
chatArea.scrollTop = chatArea.scrollHeight;
}
function createAnswer() {
const offer = JSON.parse(offerTextarea.value);
peer.signal(offer);
}
answerTextarea.addEventListener('input', () => {
const answer = JSON.parse(answerTextarea.value);
peer.signal(answer);
});
</script>
</body>
</html>