| OLD | NEW |
| 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 | 5 |
| 6 /** | 6 /** |
| 7 * Provides the UI to start and stop RTP recording, forwards the start/stop | 7 * Provides the UI for dump creation. |
| 8 * commands to Chrome, and updates the UI based on dump updates. Also provides | |
| 9 * creating a file containing all PeerConnection updates and stats. | |
| 10 */ | 8 */ |
| 11 var DumpCreator = (function() { | 9 var DumpCreator = (function() { |
| 12 /** | 10 /** |
| 13 * @param {Element} containerElement The parent element of the dump creation | 11 * @param {Element} containerElement The parent element of the dump creation |
| 14 * UI. | 12 * UI. |
| 15 * @constructor | 13 * @constructor |
| 16 */ | 14 */ |
| 17 function DumpCreator(containerElement) { | 15 function DumpCreator(containerElement) { |
| 18 /** | 16 /** |
| 19 * True if the RTP packets are being recorded. | |
| 20 * @type {bool} | |
| 21 * @private | |
| 22 */ | |
| 23 this.recording_ = false; | |
| 24 | |
| 25 /** | |
| 26 * @type {!Object.<string>} | |
| 27 * @private | |
| 28 * @const | |
| 29 */ | |
| 30 this.StatusStrings_ = { | |
| 31 NOT_STARTED: 'not started.', | |
| 32 RECORDING: 'recording...', | |
| 33 }, | |
| 34 | |
| 35 /** | |
| 36 * The status of dump creation. | |
| 37 * @type {string} | |
| 38 * @private | |
| 39 */ | |
| 40 this.status_ = this.StatusStrings_.NOT_STARTED; | |
| 41 | |
| 42 /** | |
| 43 * The root element of the dump creation UI. | 17 * The root element of the dump creation UI. |
| 44 * @type {Element} | 18 * @type {Element} |
| 45 * @private | 19 * @private |
| 46 */ | 20 */ |
| 47 this.root_ = document.createElement('details'); | 21 this.root_ = document.createElement('details'); |
| 48 | 22 |
| 49 this.root_.className = 'peer-connection-dump-root'; | 23 this.root_.className = 'peer-connection-dump-root'; |
| 50 containerElement.appendChild(this.root_); | 24 containerElement.appendChild(this.root_); |
| 51 var summary = document.createElement('summary'); | 25 var summary = document.createElement('summary'); |
| 52 this.root_.appendChild(summary); | 26 this.root_.appendChild(summary); |
| 53 summary.textContent = 'Create Dump'; | 27 summary.textContent = 'Create Dump'; |
| 54 var content = document.createElement('div'); | 28 var content = document.createElement('div'); |
| 55 this.root_.appendChild(content); | 29 this.root_.appendChild(content); |
| 56 | 30 |
| 57 content.innerHTML = '<button disabled></button> Status: <span></span>' + | 31 content.innerHTML = '<div><a><button>' + |
| 58 '<div><a><button>' + | |
| 59 'Download the PeerConnection updates and stats data' + | 32 'Download the PeerConnection updates and stats data' + |
| 60 '</button></a></div>' + | 33 '</button></a></div>' + |
| 61 '<p><label><input type=checkbox>' + | 34 '<p><label><input type=checkbox>' + |
| 62 'Enable diagnostic audio recordings.</label></p>' + | 35 'Enable diagnostic audio recordings.</label></p>' + |
| 63 '<p>A diagnostic audio recording is used for analyzing audio' + | 36 '<p>A diagnostic audio recording is used for analyzing audio' + |
| 64 ' problems. It contains the audio played out from the speaker and' + | 37 ' problems. It contains the audio played out from the speaker and' + |
| 65 ' recorded from the microphone and is saved to the local disk.' + | 38 ' recorded from the microphone and is saved to the local disk.' + |
| 66 ' Checking this box will enable the recording for future WebRTC' + | 39 ' Checking this box will enable the recording for future WebRTC' + |
| 67 ' calls. When the box is unchecked or this page is closed, this' + | 40 ' calls. When the box is unchecked or this page is closed, this' + |
| 68 ' recording functionality will be disabled.</p>'; | 41 ' recording functionality will be disabled.</p>'; |
| 69 | 42 |
| 70 content.getElementsByTagName('button')[0].addEventListener( | |
| 71 'click', this.onRtpToggled_.bind(this)); | |
| 72 content.getElementsByTagName('a')[0].addEventListener( | 43 content.getElementsByTagName('a')[0].addEventListener( |
| 73 'click', this.onDownloadData_.bind(this)); | 44 'click', this.onDownloadData_.bind(this)); |
| 74 content.getElementsByTagName('input')[0].addEventListener( | 45 content.getElementsByTagName('input')[0].addEventListener( |
| 75 'click', this.onAecRecordingChanged_.bind(this)); | 46 'click', this.onAecRecordingChanged_.bind(this)); |
| 76 | |
| 77 this.updateDisplay_(); | |
| 78 } | 47 } |
| 79 | 48 |
| 80 DumpCreator.prototype = { | 49 DumpCreator.prototype = { |
| 81 /** Mark the AEC recording checkbox checked.*/ | 50 /** Mark the AEC recording checkbox checked.*/ |
| 82 enableAecRecording: function() { | 51 enableAecRecording: function() { |
| 83 this.root_.getElementsByTagName('input')[0].checked = true; | 52 this.root_.getElementsByTagName('input')[0].checked = true; |
| 84 }, | 53 }, |
| 85 | 54 |
| 86 /** | 55 /** |
| 87 * Downloads the PeerConnection updates and stats data as a file. | 56 * Downloads the PeerConnection updates and stats data as a file. |
| 88 * | 57 * |
| 89 * @private | 58 * @private |
| 90 */ | 59 */ |
| 91 onDownloadData_: function() { | 60 onDownloadData_: function() { |
| 92 var textBlob = | 61 var textBlob = |
| 93 new Blob([JSON.stringify(peerConnectionDataStore, null, ' ')], | 62 new Blob([JSON.stringify(peerConnectionDataStore, null, ' ')], |
| 94 {type: 'octet/stream'}); | 63 {type: 'octet/stream'}); |
| 95 var URL = window.webkitURL.createObjectURL(textBlob); | 64 var URL = window.webkitURL.createObjectURL(textBlob); |
| 96 this.root_.getElementsByTagName('a')[0].href = URL; | 65 this.root_.getElementsByTagName('a')[0].href = URL; |
| 97 // The default action of the anchor will download the URL. | 66 // The default action of the anchor will download the URL. |
| 98 }, | 67 }, |
| 99 | 68 |
| 100 /** | 69 /** |
| 101 * Handles the event of toggling the rtp recording state. | |
| 102 * | |
| 103 * @private | |
| 104 */ | |
| 105 onRtpToggled_: function() { | |
| 106 if (this.recording_) { | |
| 107 this.recording_ = false; | |
| 108 this.status_ = this.StatusStrings_.NOT_STARTED; | |
| 109 chrome.send('stopRtpRecording'); | |
| 110 } else { | |
| 111 this.recording_ = true; | |
| 112 this.status_ = this.StatusStrings_.RECORDING; | |
| 113 chrome.send('startRtpRecording'); | |
| 114 } | |
| 115 this.updateDisplay_(); | |
| 116 }, | |
| 117 | |
| 118 /** | |
| 119 * Handles the event of toggling the AEC recording state. | 70 * Handles the event of toggling the AEC recording state. |
| 120 * | 71 * |
| 121 * @private | 72 * @private |
| 122 */ | 73 */ |
| 123 onAecRecordingChanged_: function() { | 74 onAecRecordingChanged_: function() { |
| 124 var enabled = this.root_.getElementsByTagName('input')[0].checked; | 75 var enabled = this.root_.getElementsByTagName('input')[0].checked; |
| 125 if (enabled) { | 76 if (enabled) { |
| 126 chrome.send('enableAecRecording'); | 77 chrome.send('enableAecRecording'); |
| 127 } else { | 78 } else { |
| 128 chrome.send('disableAecRecording'); | 79 chrome.send('disableAecRecording'); |
| 129 } | 80 } |
| 130 }, | 81 }, |
| 131 | |
| 132 /** | |
| 133 * Updates the UI based on the recording status. | |
| 134 * | |
| 135 * @private | |
| 136 */ | |
| 137 updateDisplay_: function() { | |
| 138 if (this.recording_) { | |
| 139 this.root_.getElementsByTagName('button')[0].textContent = | |
| 140 'Stop Recording RTP Packets'; | |
| 141 } else { | |
| 142 this.root_.getElementsByTagName('button')[0].textContent = | |
| 143 'Start Recording RTP Packets'; | |
| 144 } | |
| 145 | |
| 146 this.root_.getElementsByTagName('span')[0].textContent = this.status_; | |
| 147 }, | |
| 148 | |
| 149 /** | |
| 150 * Set the status to the content of the update. | |
| 151 * @param {!Object} update | |
| 152 */ | |
| 153 onUpdate: function(update) { | |
| 154 if (this.recording_) { | |
| 155 this.status_ = JSON.stringify(update); | |
| 156 this.updateDisplay_(); | |
| 157 } | |
| 158 }, | |
| 159 }; | 82 }; |
| 160 return DumpCreator; | 83 return DumpCreator; |
| 161 })(); | 84 })(); |
| OLD | NEW |