webrtc-audio.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
  1. /*
  2. * Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
  3. *
  4. * Use of this source code is governed by a BSD-style license
  5. * that can be found in the LICENSE file in the root of the source
  6. * tree.
  7. */
  8. /* global TimelineDataSeries, TimelineGraphView */
  9. 'use strict';
  10. var audio2 = document.querySelector('audio#audio2');
  11. var callButton = document.querySelector('button#callButton');
  12. var hangupButton = document.querySelector('button#hangupButton');
  13. var codecSelector = document.querySelector('select#codec');
  14. hangupButton.disabled = true;
  15. callButton.onclick = call;
  16. hangupButton.onclick = hangup;
  17. var pc1;
  18. var pc2;
  19. var localStream;
  20. var bitrateGraph;
  21. var bitrateSeries;
  22. var packetGraph;
  23. var packetSeries;
  24. var lastResult;
  25. var offerOptions = {
  26. offerToReceiveAudio: 1,
  27. offerToReceiveVideo: 0,
  28. voiceActivityDetection: false
  29. };
  30. function gotStream(stream) {
  31. trace('Received local stream');
  32. localStream = stream;
  33. var audioTracks = localStream.getAudioTracks();
  34. if (audioTracks.length > 0) {
  35. trace('Using Audio device: ' + audioTracks[0].label);
  36. }
  37. pc1.addStream(localStream);
  38. trace('Adding Local Stream to peer connection');
  39. pc1.createOffer(gotDescription1, onCreateSessionDescriptionError,
  40. offerOptions);
  41. bitrateSeries = new TimelineDataSeries();
  42. bitrateGraph = new TimelineGraphView('bitrateGraph', 'bitrateCanvas');
  43. bitrateGraph.updateEndDate();
  44. packetSeries = new TimelineDataSeries();
  45. packetGraph = new TimelineGraphView('packetGraph', 'packetCanvas');
  46. packetGraph.updateEndDate();
  47. }
  48. function onCreateSessionDescriptionError(error) {
  49. trace('Failed to create session description: ' + error.toString());
  50. }
  51. function call() {
  52. callButton.disabled = true;
  53. hangupButton.disabled = false;
  54. codecSelector.disabled = true;
  55. trace('Starting call');
  56. var servers = null;
  57. var pcConstraints = {
  58. 'optional': []
  59. };
  60. pc1 = new RTCPeerConnection(servers, pcConstraints);
  61. trace('Created local peer connection object pc1');
  62. pc1.onicecandidate = iceCallback1;
  63. pc2 = new RTCPeerConnection(servers, pcConstraints);
  64. trace('Created remote peer connection object pc2');
  65. pc2.onicecandidate = iceCallback2;
  66. pc2.onaddstream = gotRemoteStream;
  67. trace('Requesting local stream');
  68. navigator.mediaDevices.getUserMedia({
  69. audio: true,
  70. video: false
  71. })
  72. .then(gotStream)
  73. .catch(function(e) {
  74. alert('getUserMedia() error: ' + e.name);
  75. });
  76. }
  77. function gotDescription1(desc) {
  78. desc.sdp = forceChosenAudioCodec(desc.sdp);
  79. trace('Offer from pc1 \n' + desc.sdp);
  80. pc1.setLocalDescription(desc, function() {
  81. pc2.setRemoteDescription(desc, function() {
  82. // Since the 'remote' side has no media stream we need
  83. // to pass in the right constraints in order for it to
  84. // accept the incoming offer of audio.
  85. pc2.createAnswer(gotDescription2, onCreateSessionDescriptionError);
  86. }, onSetSessionDescriptionError);
  87. }, onSetSessionDescriptionError);
  88. }
  89. function gotDescription2(desc) {
  90. desc.sdp = forceChosenAudioCodec(desc.sdp);
  91. pc2.setLocalDescription(desc, function() {
  92. trace('Answer from pc2 \n' + desc.sdp);
  93. pc1.setRemoteDescription(desc, function() {
  94. }, onSetSessionDescriptionError);
  95. }, onSetSessionDescriptionError);
  96. }
  97. function hangup() {
  98. trace('Ending call');
  99. localStream.getTracks().forEach(function(track) {
  100. track.stop();
  101. });
  102. pc1.close();
  103. pc2.close();
  104. pc1 = null;
  105. pc2 = null;
  106. hangupButton.disabled = true;
  107. callButton.disabled = false;
  108. codecSelector.disabled = false;
  109. }
  110. function gotRemoteStream(e) {
  111. audio2.srcObject = e.stream;
  112. trace('Received remote stream');
  113. }
  114. function iceCallback1(event) {
  115. if (event.candidate) {
  116. pc2.addIceCandidate(new RTCIceCandidate(event.candidate),
  117. onAddIceCandidateSuccess, onAddIceCandidateError);
  118. trace('Local ICE candidate: \n' + event.candidate.candidate);
  119. }
  120. }
  121. function iceCallback2(event) {
  122. if (event.candidate) {
  123. pc1.addIceCandidate(new RTCIceCandidate(event.candidate),
  124. onAddIceCandidateSuccess, onAddIceCandidateError);
  125. trace('Remote ICE candidate: \n ' + event.candidate.candidate);
  126. }
  127. }
  128. function onAddIceCandidateSuccess() {
  129. trace('AddIceCandidate success.');
  130. }
  131. function onAddIceCandidateError(error) {
  132. trace('Failed to add ICE Candidate: ' + error.toString());
  133. }
  134. function onSetSessionDescriptionError(error) {
  135. trace('Failed to set session description: ' + error.toString());
  136. }
  137. function forceChosenAudioCodec(sdp) {
  138. return maybePreferCodec(sdp, 'audio', 'send', codecSelector.value);
  139. }
  140. // Copied from AppRTC's sdputils.js:
  141. // Sets |codec| as the default |type| codec if it's present.
  142. // The format of |codec| is 'NAME/RATE', e.g. 'opus/48000'.
  143. function maybePreferCodec(sdp, type, dir, codec) {
  144. var str = type + ' ' + dir + ' codec';
  145. if (codec === '') {
  146. trace('No preference on ' + str + '.');
  147. return sdp;
  148. }
  149. trace('Prefer ' + str + ': ' + codec);
  150. var sdpLines = sdp.split('\r\n');
  151. // Search for m line.
  152. var mLineIndex = findLine(sdpLines, 'm=', type);
  153. if (mLineIndex === null) {
  154. return sdp;
  155. }
  156. // If the codec is available, set it as the default in m line.
  157. var codecIndex = findLine(sdpLines, 'a=rtpmap', codec);
  158. console.log('codecIndex', codecIndex);
  159. if (codecIndex) {
  160. var payload = getCodecPayloadType(sdpLines[codecIndex]);
  161. if (payload) {
  162. sdpLines[mLineIndex] = setDefaultCodec(sdpLines[mLineIndex], payload);
  163. }
  164. }
  165. sdp = sdpLines.join('\r\n');
  166. return sdp;
  167. }
  168. // Find the line in sdpLines that starts with |prefix|, and, if specified,
  169. // contains |substr| (case-insensitive search).
  170. function findLine(sdpLines, prefix, substr) {
  171. return findLineInRange(sdpLines, 0, -1, prefix, substr);
  172. }
  173. // Find the line in sdpLines[startLine...endLine - 1] that starts with |prefix|
  174. // and, if specified, contains |substr| (case-insensitive search).
  175. function findLineInRange(sdpLines, startLine, endLine, prefix, substr) {
  176. var realEndLine = endLine !== -1 ? endLine : sdpLines.length;
  177. for (var i = startLine; i < realEndLine; ++i) {
  178. if (sdpLines[i].indexOf(prefix) === 0) {
  179. if (!substr ||
  180. sdpLines[i].toLowerCase().indexOf(substr.toLowerCase()) !== -1) {
  181. return i;
  182. }
  183. }
  184. }
  185. return null;
  186. }
  187. // Gets the codec payload type from an a=rtpmap:X line.
  188. function getCodecPayloadType(sdpLine) {
  189. var pattern = new RegExp('a=rtpmap:(\\d+) \\w+\\/\\d+');
  190. var result = sdpLine.match(pattern);
  191. return (result && result.length === 2) ? result[1] : null;
  192. }
  193. // Returns a new m= line with the specified codec as the first one.
  194. function setDefaultCodec(mLine, payload) {
  195. var elements = mLine.split(' ');
  196. // Just copy the first three parameters; codec order starts on fourth.
  197. var newLine = elements.slice(0, 3);
  198. // Put target payload first and copy in the rest.
  199. newLine.push(payload);
  200. for (var i = 3; i < elements.length; i++) {
  201. if (elements[i] !== payload) {
  202. newLine.push(elements[i]);
  203. }
  204. }
  205. return newLine.join(' ');
  206. }
  207. // query getStats every second
  208. window.setInterval(function() {
  209. if (!window.pc1) {
  210. return;
  211. }
  212. window.pc1.getStats(null).then(function(res) {
  213. Object.keys(res).forEach(function(key) {
  214. var report = res[key];
  215. var bytes;
  216. var packets;
  217. var now = report.timestamp;
  218. if ((report.type === 'outboundrtp') ||
  219. (report.type === 'outbound-rtp') ||
  220. (report.type === 'ssrc' && report.bytesSent)) {
  221. bytes = report.bytesSent;
  222. packets = report.packetsSent;
  223. if (lastResult && lastResult[report.id]) {
  224. // calculate bitrate
  225. var bitrate = 8 * (bytes - lastResult[report.id].bytesSent) /
  226. (now - lastResult[report.id].timestamp);
  227. // append to chart
  228. bitrateSeries.addPoint(now, bitrate);
  229. bitrateGraph.setDataSeries([bitrateSeries]);
  230. bitrateGraph.updateEndDate();
  231. // calculate number of packets and append to chart
  232. packetSeries.addPoint(now, packets -
  233. lastResult[report.id].packetsSent);
  234. packetGraph.setDataSeries([packetSeries]);
  235. packetGraph.updateEndDate();
  236. }
  237. }
  238. });
  239. lastResult = res;
  240. });
  241. }, 1000);