Note: We no longer publish the latest version of our code here. We primarily use a kumc-bmi github organization. The heron ETL repository, in particular, is not public. Peers in the informatics community should see MultiSiteDev for details on requesting access.

source: webrtc/samples/js/demos/html/pc1_sdp_munge.html @ 0:4bda6873e34c

pub_scrub_3792 tip
Last change on this file since 0:4bda6873e34c was 0:4bda6873e34c, checked in by Michael Prittie <mprittie@…>, 6 years ago

Scrubbed password for publication.

File size: 8.6 KB
Line 
1<!DOCTYPE html>
2<html>
3<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
4<script src='../../base/adapter.js'></script>
5<head>
6<title>PC1 SDP Munge Demo</title>
7<style>
8  div#left {
9    float: left;
10    margin: 0 2em 2.5em 0;
11  }
12  div#right {
13    float: left;
14    margin: 0 0 1.5em 0;
15  }
16  div#buttons button {
17    margin: 0 1.3em 1em 0;
18    width: 13em;
19  }
20  div#buttons {
21    max-width: 30em;
22  }
23  div#source {
24    clear: both;
25    margin: 0 0 1em 0;
26  }
27  div#select {
28    margin: 0 0 1em 0;
29  }
30  select {
31    margin: 0 1em 0 0;
32  }
33  h2 {
34    font-size: 1em;
35    font-family: sans-serif;
36    margin: 0 0 0.3em 0;
37    padding: 0;
38  }
39  textarea {
40    height: 20em;
41    width: 98%;
42  }
43  video {
44    background: #666;
45    margin: 0 0 1.5em 0;
46    width: 320px;
47    height: 240px;
48  }
49</style>
50</head>
51<body>
52<div id="left">
53<h2>Local Preview</h2>
54<video id="vid1" autoplay muted></video>
55<h2>Offer SDP</h2>
56<textarea id="offerSdp"></textarea><br><br>
57</div>
58<div id="right">
59<h2>Remote Preview</h2>
60<video id="vid2" autoplay></video>
61<h2>Answer SDP</h2>
62<textarea id="answerSdp"></textarea>
63</div>
64<div id="source">
65<label for="audiosrc">Audio source: </label><select id="audiosrc"></select>
66<label for="videosrc">Video source: </label><select id="videosrc"></select>
67</div>
68<div id="select">Select an audio & video source, then click GetUserMedia:</div>
69<div id="buttons">
70<button id="btnMedia" onclick="getMedia()">GetUserMedia</button>
71<button id="btnCreatePC" onclick="createPC()">Create PeerConnection</button>
72<button id="btnOffer" onclick="createOffer()">Create Offer</button>
73<button id="btnSetOffer" onclick="setOffer()">Set Offer</button>
74<button id="btnAnswer" onclick="createAnswer()">Create Answer</button>
75<button id="btnSetAnswer" onclick="setAnswer()">Set Answer</button>
76<button id="btnHangUp" onclick="hangup()">Hang Up</button>
77</div>
78<script>
79var audio_select = document.getElementById("audiosrc");
80var video_select = document.getElementById("videosrc");
81btnMedia.disabled = false;
82btnCreatePC.disabled = true;
83btnOffer.disabled = true;
84btnSetOffer.disabled = true;
85btnAnswer.disabled = true;
86btnSetAnswer.disabled = true;
87btnHangUp.disabled = true;
88//audio_select.onchange = changeDevices;
89//video_select.onchange = changeDevices;
90var pc1,pc2;
91var localstream;
92var sdpConstraints = {'mandatory': {
93                        'OfferToReceiveAudio':true,
94                        'OfferToReceiveVideo':true }};
95refreshSources();
96
97function refreshSources() {
98  if (webrtcDetectedVersion >= 30) {
99    MediaStreamTrack.getSources(gotSources);
100  } else {
101    alert('Make sure that you have Chrome M30 to test device enumeration api.');
102  }
103}
104
105function gotSources(sourceInfos) {
106  var audio_count = 0;
107  var video_count = 0;
108  audio_select.disabled = true;
109  video_select.disabled = true;
110  audio_select.innerHTML = '';
111  video_select.innerHTML = '';
112  for (var i = 0; i < sourceInfos.length; i++) {
113    var option = document.createElement("option");
114    option.value = sourceInfos[i].id;
115    option.text = sourceInfos[i].label;
116    if (sourceInfos[i].kind === 'audio') {
117      audio_count++;
118      if (option.text === '') {
119        option.text = 'Audio ' + audio_count;
120      }
121      audio_select.appendChild(option);
122    } else {
123      video_count++;
124      if (option.text === '') {
125        option.text = 'Video ' + video_count;
126      }
127      video_select.appendChild(option);
128    }
129  }
130  audio_select.disabled = false;
131  video_select.disabled = false;
132}
133
134function getMedia() {
135  changeDevices();
136  audio_select.disabled = true;
137  video_select.disabled = true;
138  btnMedia.disabled = true;
139  btnCreatePC.disabled = false;
140}
141
142function changeDevices() {
143  var audio_source = null;
144  var video_source = null;
145  if (audio_select.options.length > 0) {
146    audio_source = audio_select.options[audio_select.selectedIndex].value;
147    trace('selected audio_source :' + audio_source);
148  }
149  if (video_select.options.length > 0 ) {
150    video_source = video_select.options[video_select.selectedIndex].value;
151    trace('selected video_source :' + video_source);
152  }
153  setWebcamAndMic(audio_source, video_source);
154}
155
156function setWebcamAndMic(audio_source, video_source) {
157  trace("Requesting local stream");
158  // Call into getUserMedia via the polyfill (adapter.js).
159  getUserMedia({ audio: {optional: [{sourceId: audio_source}]},
160                 video: {optional: [{sourceId: video_source}]}
161               }, gotStream, function() {});
162}
163
164function gotStream(stream) {
165  trace("Received local stream");
166  // Call the polyfill wrapper to attach the media stream to this element.
167  attachMediaStream(vid1, stream);
168  localstream = stream;
169}
170
171function createPC() {
172  btnCreatePC.disabled = true;
173  btnOffer.disabled = false;
174  btnAnswer.disabled = false;
175  btnSetOffer.disabled = false;
176  btnSetAnswer.disabled = false;
177  btnHangUp.disabled = false;
178  trace("Starting call");
179  videoTracks = localstream.getVideoTracks();
180  audioTracks = localstream.getAudioTracks();
181  if (videoTracks.length > 0) {
182    trace('Using Video device: ' + videoTracks[0].label);
183  }
184  if (audioTracks.length > 0) {
185    trace('Using Audio device: ' + audioTracks[0].label);
186  }
187  var servers = null;
188  pc1 = new RTCPeerConnection(servers);
189  trace("Created local peer connection object pc1");
190  pc1.onicecandidate = iceCallback1;
191  pc2 = new RTCPeerConnection(servers);
192  trace("Created remote peer connection object pc2");
193  pc2.onicecandidate = iceCallback2;
194  pc2.onaddstream = gotRemoteStream;
195
196  pc1.addStream(localstream);
197  trace("Adding Local Stream to peer connection");
198}
199
200function onSetSessionDescriptionSuccess() {
201  trace('Set session description success.');
202}
203
204function onSetSessionDescriptionError(error) {
205  trace('Failed to set session description: ' + error.toString());
206}
207
208// Workaround for crbug/322756.
209function maybeAddLineBreakToEnd(sdp) {
210  var endWithLineBreak = new RegExp(/\n$/);
211  if (!endWithLineBreak.test(sdp)) {
212    return sdp + '\n';
213  }
214  return sdp;
215}
216
217function createOffer(){
218  pc1.createOffer(gotDescription1,null,null);
219}
220
221function setOffer(){
222  var sdp = document.getElementById("offerSdp").value;
223  sdp = maybeAddLineBreakToEnd(sdp);
224  var offer = new RTCSessionDescription({type:'offer',sdp:sdp});
225  pc1.setLocalDescription(offer,
226                          onSetSessionDescriptionSuccess,
227                          onSetSessionDescriptionError);
228  trace("Modified Offer from pc1 \n" + sdp);
229  pc2.setRemoteDescription(offer,
230                           onSetSessionDescriptionSuccess,
231                           onSetSessionDescriptionError);
232}
233
234function gotDescription1(desc) {
235  document.getElementById("offerSdp").disabled = false;
236  document.getElementById("offerSdp").value = desc.sdp;
237}
238
239function createAnswer(){
240  // Since the "remote" side has no media stream we need
241  // to pass in the right constraints in order for it to
242  // accept the incoming offer of audio and video.
243  pc2.createAnswer(gotDescription2, null, sdpConstraints);
244}
245
246function setAnswer(){
247  var sdp = document.getElementById("answerSdp").value;
248  sdp = maybeAddLineBreakToEnd(sdp);
249  var answer = new RTCSessionDescription({type:'answer',sdp:sdp});
250  pc2.setLocalDescription(answer,
251                          onSetSessionDescriptionSuccess,
252                          onSetSessionDescriptionError);
253  trace("Modified Answer from pc2 \n" + sdp);
254  pc1.setRemoteDescription(answer,
255                           onSetSessionDescriptionSuccess,
256                           onSetSessionDescriptionError);
257}
258
259function gotDescription2(desc) {
260  document.getElementById("answerSdp").disabled = false;
261  document.getElementById("answerSdp").value = desc.sdp;
262}
263
264function hangup() {
265  trace("Ending call");
266  localstream.stop();
267  pc1.close();
268  pc2.close();
269  pc1 = null;
270  pc2 = null;
271  audio_select.disabled = false;
272  video_select.disabled = false;
273  document.getElementById("offerSdp").disabled = true;
274  document.getElementById("answerSdp").disabled = true;
275  btnMedia.disabled = false;
276  btnCreatePC.disabled = true;
277  btnOffer.disabled = true;
278  btnSetOffer.disabled = true;
279  btnAnswer.disabled = true;
280  btnSetAnswer.disabled = true;
281  btnHangUp.disabled = true;
282}
283
284function gotRemoteStream(e) {
285  // Call the polyfill wrapper to attach the media stream to this element.
286  attachMediaStream(vid2, e.stream);
287  trace("Received remote stream");
288}
289
290function iceCallback1(event) {
291  if (event.candidate) {
292    pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
293    trace("Local ICE candidate: \n" + event.candidate.candidate);
294  }
295}
296
297function iceCallback2(event) {
298  if (event.candidate) {
299    pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
300    trace("Remote ICE candidate: \n " + event.candidate.candidate);
301  }
302}
303</script>
304</body>
305</html>
Note: See TracBrowser for help on using the repository browser.