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/dtmf1.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: 5.5 KB
Line 
1<html>
2<head>
3<title>PeerConnection DTMF Demo 1</title>
4<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
5<script src="../../base/adapter.js"></script>
6<style>
7button {
8  font: 18px sans-serif;
9  padding: 8px;
10}
11#left { position: absolute; left: 20; top: 0; width: 50%; }
12#right { position: absolute; right: 0; top: 0; width: 50%; }
13</style>
14</head>
15<body onload="onload()">
16<div id="left">
17<audio id="audio1" autoplay="autoplay" muted="true"></audio>
18<h3>Send Dtmf Tones</h3>
19<div id="dialingPad"></div>
20<br><br>
21duration:
22<input type="text" id="dtmf-tones-duration" size="10" value="500"/>
23<br><br>
24tone-gap:
25<input type="text" id="dtmf-tones-gap" size="10" value="50"/>
26<br><br>
27tones:
28<input type="text" id="dtmf-tones" size="10"
29  value="1199##9,6633221,9966332,9966332,1199##9,6633221"/>
30<button id="sendTones"
31  onclick="sendTone(document.getElementById('dtmf-tones').value)">Send tones
32  </button>
33<br><br>
34<button id="callBtn" onclick="call()">Call</button>
35<button id="hangBtn" onclick="hangup()">Hang Up</button>
36<br><br>
37</div>
38<div id="right">
39<audio id="audio2" autoplay="autoplay"></audio>
40<h3>Sent Tones</h3>
41<textarea id="dtmfTonesSent" rows="12" cols="40" disabled="true">
42</textarea><br>
43</div>
44<script>
45callBtn.disabled = false;
46hangBtn.disabled = true;
47sendTones.disabled = true;
48var pc1 = null,pc2 = null;
49var localstream = null;
50var dtmfSender = null;
51var sdpConstraints = {'mandatory': {
52                      'OfferToReceiveAudio':true,
53                      'OfferToReceiveVideo':false }};
54
55function gotStream(stream){
56  trace("Received local stream");
57  // Call the polyfill wrapper to attach the media stream to this element.
58  localstream = stream;
59  audioTracks = localstream.getAudioTracks();
60  if (audioTracks.length > 0)
61    trace('Using Audio device: ' + audioTracks[0].label);
62  pc1.addStream(localstream);
63  trace("Adding Local Stream to peer connection");
64 
65  pc1.createOffer(gotDescription1);
66}
67 
68function call() {
69  trace("Starting call");
70  var servers = null;
71  var pc_constraints = {"optional": []};
72  pc1 = new RTCPeerConnection(servers,pc_constraints);
73  trace("Created local peer connection object pc1");
74  pc1.onicecandidate = iceCallback1;
75  pc2 = new RTCPeerConnection(servers,pc_constraints);
76  trace("Created remote peer connection object pc2");
77  pc2.onicecandidate = iceCallback2;
78  pc2.onaddstream = gotRemoteStream;
79 
80  trace("Requesting local stream");
81  // Call into getUserMedia via the polyfill (adapter.js).
82  getUserMedia({audio:true, video:false},
83                gotStream, function() {});
84
85  callBtn.disabled = true;
86  hangBtn.disabled = false;
87  sendTones.disabled = false;
88}
89
90function gotDescription1(desc){
91  pc1.setLocalDescription(desc);
92  trace("Offer from pc1 \n" + desc.sdp);
93  pc2.setRemoteDescription(desc);
94  // Since the "remote" side has no media stream we need
95  // to pass in the right constraints in order for it to
96  // accept the incoming offer of audio.
97  pc2.createAnswer(gotDescription2, null, sdpConstraints);
98}
99
100function gotDescription2(desc){
101  // Setting PCMU as the preferred codec.
102  desc.sdp = desc.sdp.replace(/m=.*\r\n/, "m=audio 1 RTP/SAVPF 0 126\r\n");
103  // Workaround for issue 1603.
104  desc.sdp = desc.sdp.replace(/.*fmtp.*\r\n/g, "");
105  pc2.setLocalDescription(desc);
106  trace("Answer from pc2 \n" + desc.sdp);
107  pc1.setRemoteDescription(desc);
108}
109
110function hangup() {
111  trace("Ending call");
112  pc1.close();
113  pc2.close();
114  pc1 = null;
115  pc2 = null;
116  localstream = null;
117  dtmfSender = null;
118  callBtn.disabled = false;
119  hangBtn.disabled = true;
120  sendTones.disabled = true;
121  document.getElementById("dtmfTonesSent").value = "Dtmf de-activated\n";
122}
123
124function gotRemoteStream(e){
125  // Call the polyfill wrapper to attach the media stream to this element.
126  attachMediaStream(audio2, e.stream);
127  trace("Received remote stream");
128  enableDtmfSender();
129}
130
131function iceCallback1(event){
132  if (event.candidate) {
133    pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
134    trace("Local ICE candidate: \n" + event.candidate.candidate);
135  }
136}
137     
138function iceCallback2(event){
139  if (event.candidate) {
140    pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
141    trace("Remote ICE candidate: \n " + event.candidate.candidate);
142  }
143}
144
145function enableDtmfSender(){
146  document.getElementById("dtmfTonesSent").value = "Dtmf activated\n";
147  if (localstream != null) {
148    var local_audio_track = localstream.getAudioTracks()[0];
149    dtmfSender = pc1.createDTMFSender(local_audio_track);
150    trace("Created DTMF Sender\n");
151    dtmfSender.ontonechange = dtmfOnToneChange;
152  }
153  else {
154    trace("No Local Stream to create DTMF Sender\n");
155  }
156}
157
158function dtmfOnToneChange(tone){
159  if (tone) {
160    trace("Sent Dtmf tone: \t" + tone.tone);
161    document.getElementById("dtmfTonesSent").value += tone.tone + '\t';
162  }
163}
164
165function sendTone(tones){
166  if (dtmfSender) {
167    duration = document.getElementById("dtmf-tones-duration").value;
168    gap = document.getElementById("dtmf-tones-gap").value;
169    dtmfSender.insertDTMF(tones, duration, gap);
170  }
171}
172
173function createDialingPad() {
174  var tones = '1234567890*#ABCD';
175  var dialingPad = document.getElementById('dialingPad');
176  for (var i = 0; i < tones.length; ++i) {
177    var tone = tones.charAt(i);
178    dialingPad.innerHTML += '<button id="' +
179      tone + '" onclick="sendTone(\'' + tone +
180      '\')" style="height:40px; width: 30px">' + tone + '</button>';
181    if ((i + 1) % 4 == 0) {
182      dialingPad.innerHTML += '<br>';
183    }
184  }
185}
186
187function onload() {
188  createDialingPad();
189}
190
191</script>
192</body>
193</html>
Note: See TracBrowser for help on using the repository browser.