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 |