Home | History | Annotate | Download | only in media 
      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
      3 // found in the LICENSE file.
      4 
      5 
      6 /**
      7  * Provides the UI to start and stop RTP recording, forwards the start/stop
      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  */
     11 var DumpCreator = (function() {
     12   /**
     13    * @param {Element} containerElement The parent element of the dump creation
     14    *     UI.
     15    * @constructor
     16    */
     17   function DumpCreator(containerElement) {
     18     /**
     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.
     44      * @type {Element}
     45      * @private
     46      */
     47     this.root_ = document.createElement('details');
     48 
     49     this.root_.className = 'peer-connection-dump-root';
     50     containerElement.appendChild(this.root_);
     51     var summary = document.createElement('summary');
     52     this.root_.appendChild(summary);
     53     summary.textContent = 'Create Dump';
     54     var content = document.createElement('pre');
     55     this.root_.appendChild(content);
     56 
     57     content.innerHTML = '<button disabled></button> Status: <span></span>' +
     58         '<div><form><button>' +
     59         'Download the PeerConnection updates and stats data' +
     60         '</button></form></div>';
     61     content.getElementsByTagName('button')[0].addEventListener(
     62         'click', this.onRtpToggled_.bind(this));
     63     content.getElementsByTagName('button')[1].addEventListener(
     64         'click', this.onDownloadData_.bind(this));
     65 
     66     this.updateDisplay_();
     67   }
     68 
     69   DumpCreator.prototype = {
     70     /**
     71      * Downloads the PeerConnection updates and stats data as a file.
     72      *
     73      * @private
     74      */
     75     onDownloadData_: function() {
     76       var textBlob =
     77           new Blob([JSON.stringify(peerConnectionDataStore, null, ' ')],
     78                                    {type: 'octet/stream'});
     79       var URL = window.webkitURL.createObjectURL(textBlob);
     80       this.root_.getElementsByTagName('form')[0].action = URL;
     81       // The default action of the button will submit the form.
     82     },
     83 
     84     /**
     85      * Handles the event of toggling the rtp recording state.
     86      *
     87      * @private
     88      */
     89     onRtpToggled_: function() {
     90       if (this.recording_) {
     91         this.recording_ = false;
     92         this.status_ = this.StatusStrings_.NOT_STARTED;
     93         chrome.send('stopRtpRecording');
     94       } else {
     95         this.recording_ = true;
     96         this.status_ = this.StatusStrings_.RECORDING;
     97         chrome.send('startRtpRecording');
     98       }
     99       this.updateDisplay_();
    100     },
    101 
    102     /**
    103      * Updates the UI based on the recording status.
    104      *
    105      * @private
    106      */
    107     updateDisplay_: function() {
    108       if (this.recording_) {
    109         this.root_.getElementsByTagName('button')[0].textContent =
    110             'Stop Recording RTP Packets';
    111       } else {
    112         this.root_.getElementsByTagName('button')[0].textContent =
    113             'Start Recording RTP Packets';
    114       }
    115 
    116       this.root_.getElementsByTagName('span')[0].textContent = this.status_;
    117     },
    118 
    119     /**
    120      * Set the status to the content of the update.
    121      * @param {!Object} update
    122      */
    123     onUpdate: function(update) {
    124       if (this.recording_) {
    125         this.status_ = JSON.stringify(update);
    126         this.updateDisplay_();
    127       }
    128     },
    129   };
    130   return DumpCreator;
    131 })();
    132