PeerToPeerVideo/index.html at main · Charles92011/PeerToPeerVideo · GitHub

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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
	<head>
		<title>Peer to Peer Video</title>

		<style type="text/css">
			video {
				width: 320px;
			}
		</style>

	</head>

	<body>

		<video id="localVideo" autoplay playsinline></video>
		<video id="remoteVideo" autoplay playsinline></video>

		<div>
			<p>
				If you are the host, copy the offer and send it to the remote:
				<button id="createOffer">create</button><input type="text" id="localOffer" placeholder="local offer"/><br/>
				Then paste the remote answer and accept it:
				<input type="text" id="remoteAnswer" placeholder="remote answer"/><button id="acceptAnswer">accept</button>
			</p>
			<p>
				if you are the remote, paste the hosts offer and accept it:
				<input type="text" id="remoteOffer" placeholder="remote offer"//><button id="acceptOffer">accept</button><br/>
				Then copy your answer and send it to the host:
				<input type="text" id="localAnswer" placeholder="local answer"/>
			</p>
		</div>

		<script type="text/javascript">
			'use strict';

			const mediaStreamConstraints = {video: true};
			const offerOptions = {offerToReceiveVideo:1};
			const servers = {'iceServers': [{'url': 'stun:stun.l.google.com:19302'}]};

			const localVideo = document.getElementById('localVideo');
			const remoteVideo = document.getElementById('remoteVideo');

			const localOffer = document.getElementById('localOffer');
			const remoteOffer = document.getElementById('remoteOffer');
			const createOffer = document.getElementById('createOffer');
			const acceptOffer = document.getElementById('acceptOffer');

			const localAnswer = document.getElementById('localAnswer');
			const remoteAnswer = document.getElementById('remoteAnswer');
			const acceptAnswer = document.getElementById('acceptAnswer');

			//	assign click handlers to each button
			createOffer.addEventListener('click', offerCreate);
			acceptOffer.addEventListener('click', offerAccept);
			acceptAnswer.addEventListener('click', answerAccept);


			// Create peer connections and add behavior.
			const peerConnection = new RTCPeerConnection(servers);
			console.log('Created peer connection');

			peerConnection.addEventListener('icecandidate', handleConnection);
			peerConnection.addEventListener('addstream', gotRemoteMediaStream);

			const peerMediaStream = new MediaStream();
			peerConnection.addStream(peerMediaStream);

			// get the video media stream
			navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
				.then((mediaStream) => {

					localVideo.srcObject = mediaStream;

					for (const track of mediaStream.getTracks())
						peerMediaStream.addTrack(track);
					}
				)
				.catch(logError);

			function handleConnection(event) {

				const connection = event.target;
				const iceCandidate = event.candidate;

				if (iceCandidate == null)
				{
					const description = connection.localDescription;
					const descriptionType = description.type;
					const descriptionString = JSON.stringify(description);

					if (descriptionType == 'offer') {

						localOffer.value = descriptionString;

					} else {

						localAnswer.value = descriptionString;
					}
				}
			}

			function gotRemoteMediaStream(event) {

				const mediaStream = event.stream;
				remoteVideo.srcObject = mediaStream;
				console.log('remote peer connection received remote stream')
			}

			function offerCreate() {

				peerConnection.createOffer(offerOptions)
					.then(createdOffer)
					.catch(logError);
			}

			function createdOffer(description) {

				peerConnection.setLocalDescription(description)
					.then(() => {console.log('local peer description set');})
					.catch(logError);
			}


			function offerAccept() {

				const description = JSON.parse(remoteOffer.value);

				peerConnection.setRemoteDescription(description)
					.then(() => {console.log('remote peer offer accepted');})
					.catch(logError);

				peerConnection.createAnswer()
					.then(createdAnswer)
					.catch(logError);

			}

			function createdAnswer(description) {

				peerConnection.setLocalDescription(description)
					.then(() => {console.log('remote peer answered');})
					.catch(logError);
			}

			function answerAccept() {

				const description = JSON.parse(remoteAnswer.value);

				peerConnection.setRemoteDescription(description)
					.then(() => {console.log('Local peer remote description set');})
					.catch(logError);

			}


			function logError(error) {

				console.log(error.toString());
			}


		</script>

	</body>
</html>