src/remoting/webapp/client_plugin.js

   1 // Copyright (c) 2012 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  * @fileoverview
   7  * Class that wraps low-level details of interacting with the client plugin.
   8  *
   9  * This abstracts a <embed> element and controls the plugin which does
  10  * the actual remoting work. It also handles differences between
  11  * client plugins versions when it is necessary.
  12  */
  13
  14 'use strict';
  15
  16 /** @suppress {duplicate} */
  17 var remoting = remoting || {};
  18
  19 /**
  20  * @param {remoting.ViewerPlugin} plugin The plugin embed element.
  21  * @param {function(string, string):boolean} onExtensionMessage The handler for
  22  *     protocol extension messages. Returns true if a message is recognized;
  23  *     false otherwise.
  24  * @constructor
  25  */
  26 remoting.ClientPlugin = function(plugin, onExtensionMessage) {
  27   this.plugin = plugin;
  28   this.onExtensionMessage_ = onExtensionMessage;
  29
  30   this.desktopWidth = 0;
  31   this.desktopHeight = 0;
  32   this.desktopXDpi = 96;
  33   this.desktopYDpi = 96;
  34
  35   /** @param {string} iq The Iq stanza received from the host. */
  36   this.onOutgoingIqHandler = function (iq) {};
  37   /** @param {string} message Log message. */
  38   this.onDebugMessageHandler = function (message) {};
  39   /**
  40    * @param {number} state The connection state.
  41    * @param {number} error The error code, if any.
  42    */
  43   this.onConnectionStatusUpdateHandler = function(state, error) {};
  44   /** @param {boolean} ready Connection ready state. */
  45   this.onConnectionReadyHandler = function(ready) {};
  46
  47   /**
  48    * @param {string} tokenUrl Token-request URL, received from the host.
  49    * @param {string} hostPublicKey Public key for the host.
  50    * @param {string} scope OAuth scope to request the token for.
  51    */
  52   this.fetchThirdPartyTokenHandler = function(
  53     tokenUrl, hostPublicKey, scope) {};
  54   this.onDesktopSizeUpdateHandler = function () {};
  55   /** @param {!Array.<string>} capabilities The negotiated capabilities. */
  56   this.onSetCapabilitiesHandler = function (capabilities) {};
  57   this.fetchPinHandler = function (supportsPairing) {};
  58   /** @param {string} data Remote gnubbyd data. */
  59   this.onGnubbyAuthHandler = function(data) {};
  60
  61   /** @type {remoting.MediaSourceRenderer} */
  62   this.mediaSourceRenderer_ = null;
  63
  64   /** @type {number} */
  65   this.pluginApiVersion_ = -1;
  66   /** @type {Array.<string>} */
  67   this.pluginApiFeatures_ = [];
  68   /** @type {number} */
  69   this.pluginApiMinVersion_ = -1;
  70   /** @type {!Array.<string>} */
  71   this.capabilities_ = [];
  72   /** @type {boolean} */
  73   this.helloReceived_ = false;
  74   /** @type {function(boolean)|null} */
  75   this.onInitializedCallback_ = null;
  76   /** @type {function(string, string):void} */
  77   this.onPairingComplete_ = function(clientId, sharedSecret) {};
  78   /** @type {remoting.ClientSession.PerfStats} */
  79   this.perfStats_ = new remoting.ClientSession.PerfStats();
  80
  81   /** @type {remoting.ClientPlugin} */
  82   var that = this;
  83   /** @param {Event} event Message event from the plugin. */
  84   this.plugin.addEventListener('message', function(event) {
  85       that.handleMessage_(event.data);
  86     }, false);
  87   window.setTimeout(this.showPluginForClickToPlay_.bind(this), 500);
  88 };
  89
  90 /**
  91  * Set of features for which hasFeature() can be used to test.
  92  *
  93  * @enum {string}
  94  */
  95 remoting.ClientPlugin.Feature = {
  96   INJECT_KEY_EVENT: 'injectKeyEvent',
  97   NOTIFY_CLIENT_RESOLUTION: 'notifyClientResolution',
  98   ASYNC_PIN: 'asyncPin',
  99   PAUSE_VIDEO: 'pauseVideo',
 100   PAUSE_AUDIO: 'pauseAudio',
 101   REMAP_KEY: 'remapKey',
 102   SEND_CLIPBOARD_ITEM: 'sendClipboardItem',
 103   THIRD_PARTY_AUTH: 'thirdPartyAuth',
 104   TRAP_KEY: 'trapKey',
 105   PINLESS_AUTH: 'pinlessAuth',
 106   EXTENSION_MESSAGE: 'extensionMessage',
 107   MEDIA_SOURCE_RENDERING: 'mediaSourceRendering'
 108 };
 109
 110 /**
 111  * Chromoting session API version (for this javascript).
 112  * This is compared with the plugin API version to verify that they are
 113  * compatible.
 114  *
 115  * @const
 116  * @private
 117  */
 118 remoting.ClientPlugin.prototype.API_VERSION_ = 6;
 119
 120 /**
 121  * The oldest API version that we support.
 122  * This will differ from the |API_VERSION_| if we maintain backward
 123  * compatibility with older API versions.
 124  *
 125  * @const
 126  * @private
 127  */
 128 remoting.ClientPlugin.prototype.API_MIN_VERSION_ = 5;
 129
 130 /**
 131  * @param {string|{method:string, data:Object.<string,*>}}
 132  *    rawMessage Message from the plugin.
 133  * @private
 134  */
 135 remoting.ClientPlugin.prototype.handleMessage_ = function(rawMessage) {
 136   var message =
 137       /** @type {{method:string, data:Object.<string,*>}} */
 138       ((typeof(rawMessage) == 'string') ? jsonParseSafe(rawMessage)
 139                                         : rawMessage);
 140
 141   if (!message || !('method' in message) || !('data' in message)) {
 142     console.error('Received invalid message from the plugin:', rawMessage);
 143     return;
 144   }
 145
 146   try {
 147     this.handleMessageMethod_(message);
 148   } catch(e) {
 149     console.error(/** @type {*} */ (e));
 150   }
 151 }
 152
 153 /**
 154  * @param {{method:string, data:Object.<string,*>}}
 155  *    message Parsed message from the plugin.
 156  * @private
 157  */
 158 remoting.ClientPlugin.prototype.handleMessageMethod_ = function(message) {
 159   /**
 160    * Splits a string into a list of words delimited by spaces.
 161    * @param {string} str String that should be split.
 162    * @return {!Array.<string>} List of words.
 163    */
 164   var tokenize = function(str) {
 165     /** @type {Array.<string>} */
 166     var tokens = str.match(/\S+/g);
 167     return tokens ? tokens : [];
 168   };
 169
 170   if (message.method == 'hello') {
 171     // Reset the size in case we had to enlarge it to support click-to-play.
 172     this.plugin.style.width = '0px';
 173     this.plugin.style.height = '0px';
 174     this.pluginApiVersion_ = getNumberAttr(message.data, 'apiVersion');
 175     this.pluginApiMinVersion_ = getNumberAttr(message.data, 'apiMinVersion');
 176
 177     if (this.pluginApiVersion_ >= 7) {
 178       this.pluginApiFeatures_ =
 179           tokenize(getStringAttr(message.data, 'apiFeatures'));
 180
 181       // Negotiate capabilities.
 182
 183       /** @type {!Array.<string>} */
 184       var requestedCapabilities = [];
 185       if ('requestedCapabilities' in message.data) {
 186         requestedCapabilities =
 187             tokenize(getStringAttr(message.data, 'requestedCapabilities'));
 188       }
 189
 190       /** @type {!Array.<string>} */
 191       var supportedCapabilities = [];
 192       if ('supportedCapabilities' in message.data) {
 193         supportedCapabilities =
 194             tokenize(getStringAttr(message.data, 'supportedCapabilities'));
 195       }
 196
 197       // At the moment the webapp does not recognize any of
 198       // 'requestedCapabilities' capabilities (so they all should be disabled)
 199       // and do not care about any of 'supportedCapabilities' capabilities (so
 200       // they all can be enabled).
 201       this.capabilities_ = supportedCapabilities;
 202
 203       // Let the host know that the webapp can be requested to always send
 204       // the client's dimensions.
 205       this.capabilities_.push(
 206           remoting.ClientSession.Capability.SEND_INITIAL_RESOLUTION);
 207
 208       // Let the host know that we're interested in knowing whether or not
 209       // it rate-limits desktop-resize requests.
 210       this.capabilities_.push(
 211           remoting.ClientSession.Capability.RATE_LIMIT_RESIZE_REQUESTS);
 212     } else if (this.pluginApiVersion_ >= 6) {
 213       this.pluginApiFeatures_ = ['highQualityScaling', 'injectKeyEvent'];
 214     } else {
 215       this.pluginApiFeatures_ = ['highQualityScaling'];
 216     }
 217     this.helloReceived_ = true;
 218     if (this.onInitializedCallback_ != null) {
 219       this.onInitializedCallback_(true);
 220       this.onInitializedCallback_ = null;
 221     }
 222
 223   } else if (message.method == 'sendOutgoingIq') {
 224     this.onOutgoingIqHandler(getStringAttr(message.data, 'iq'));
 225
 226   } else if (message.method == 'logDebugMessage') {
 227     this.onDebugMessageHandler(getStringAttr(message.data, 'message'));
 228
 229   } else if (message.method == 'onConnectionStatus') {
 230     var state = remoting.ClientSession.State.fromString(
 231         getStringAttr(message.data, 'state'))
 232     var error = remoting.ClientSession.ConnectionError.fromString(
 233         getStringAttr(message.data, 'error'));
 234     this.onConnectionStatusUpdateHandler(state, error);
 235
 236   } else if (message.method == 'onDesktopSize') {
 237     this.desktopWidth = getNumberAttr(message.data, 'width');
 238     this.desktopHeight = getNumberAttr(message.data, 'height');
 239     this.desktopXDpi = getNumberAttr(message.data, 'x_dpi', 96);
 240     this.desktopYDpi = getNumberAttr(message.data, 'y_dpi', 96);
 241     this.onDesktopSizeUpdateHandler();
 242
 243   } else if (message.method == 'onPerfStats') {
 244     // Return value is ignored. These calls will throw an error if the value
 245     // is not a number.
 246     getNumberAttr(message.data, 'videoBandwidth');
 247     getNumberAttr(message.data, 'videoFrameRate');
 248     getNumberAttr(message.data, 'captureLatency');
 249     getNumberAttr(message.data, 'encodeLatency');
 250     getNumberAttr(message.data, 'decodeLatency');
 251     getNumberAttr(message.data, 'renderLatency');
 252     getNumberAttr(message.data, 'roundtripLatency');
 253     this.perfStats_ =
 254         /** @type {remoting.ClientSession.PerfStats} */ message.data;
 255
 256   } else if (message.method == 'injectClipboardItem') {
 257     var mimetype = getStringAttr(message.data, 'mimeType');
 258     var item = getStringAttr(message.data, 'item');
 259     if (remoting.clipboard) {
 260       remoting.clipboard.fromHost(mimetype, item);
 261     }
 262
 263   } else if (message.method == 'onFirstFrameReceived') {
 264     if (remoting.clientSession) {
 265       remoting.clientSession.onFirstFrameReceived();
 266     }
 267
 268   } else if (message.method == 'onConnectionReady') {
 269     var ready = getBooleanAttr(message.data, 'ready');
 270     this.onConnectionReadyHandler(ready);
 271
 272   } else if (message.method == 'fetchPin') {
 273     // The pairingSupported value in the dictionary indicates whether both
 274     // client and host support pairing. If the client doesn't support pairing,
 275     // then the value won't be there at all, so give it a default of false.
 276     var pairingSupported = getBooleanAttr(message.data, 'pairingSupported',
 277                                           false)
 278     this.fetchPinHandler(pairingSupported);
 279
 280   } else if (message.method == 'setCapabilities') {
 281     /** @type {!Array.<string>} */
 282     var capabilities = tokenize(getStringAttr(message.data, 'capabilities'));
 283     this.onSetCapabilitiesHandler(capabilities);
 284
 285   } else if (message.method == 'fetchThirdPartyToken') {
 286     var tokenUrl = getStringAttr(message.data, 'tokenUrl');
 287     var hostPublicKey = getStringAttr(message.data, 'hostPublicKey');
 288     var scope = getStringAttr(message.data, 'scope');
 289     this.fetchThirdPartyTokenHandler(tokenUrl, hostPublicKey, scope);
 290
 291   } else if (message.method == 'pairingResponse') {
 292     var clientId = getStringAttr(message.data, 'clientId');
 293     var sharedSecret = getStringAttr(message.data, 'sharedSecret');
 294     this.onPairingComplete_(clientId, sharedSecret);
 295
 296   } else if (message.method == 'extensionMessage') {
 297     var extMsgType = getStringAttr(message.data, 'type');
 298     var extMsgData = getStringAttr(message.data, 'data');
 299     switch (extMsgType) {
 300       case 'gnubby-auth':
 301         this.onGnubbyAuthHandler(extMsgData);
 302         break;
 303       case 'test-echo-reply':
 304         console.log('Got echo reply: ' + extMsgData);
 305         break;
 306       default:
 307         if (!this.onExtensionMessage_(extMsgType, extMsgData)) {
 308           console.log('Unexpected message received: ' +
 309                       extMsgType + ': ' + extMsgData);
 310         }
 311     }
 312
 313   } else if (message.method == 'mediaSourceReset') {
 314     if (!this.mediaSourceRenderer_) {
 315       console.error('Unexpected mediaSourceReset.');
 316       return;
 317     }
 318     this.mediaSourceRenderer_.reset(getStringAttr(message.data, 'format'))
 319
 320   } else if (message.method == 'mediaSourceData') {
 321     if (!(message.data['buffer'] instanceof ArrayBuffer)) {
 322       console.error('Invalid mediaSourceData message:', message.data);
 323       return;
 324     }
 325     if (!this.mediaSourceRenderer_) {
 326       console.error('Unexpected mediaSourceData.');
 327       return;
 328     }
 329     this.mediaSourceRenderer_.onIncomingData(
 330         (/** @type {ArrayBuffer} */ message.data['buffer']));
 331   }
 332 };
 333
 334 /**
 335  * Deletes the plugin.
 336  */
 337 remoting.ClientPlugin.prototype.cleanup = function() {
 338   this.plugin.parentNode.removeChild(this.plugin);
 339 };
 340
 341 /**
 342  * @return {HTMLEmbedElement} HTML element that correspods to the plugin.
 343  */
 344 remoting.ClientPlugin.prototype.element = function() {
 345   return this.plugin;
 346 };
 347
 348 /**
 349  * @param {function(boolean): void} onDone
 350  */
 351 remoting.ClientPlugin.prototype.initialize = function(onDone) {
 352   if (this.helloReceived_) {
 353     onDone(true);
 354   } else {
 355     this.onInitializedCallback_ = onDone;
 356   }
 357 };
 358
 359 /**
 360  * @return {boolean} True if the plugin and web-app versions are compatible.
 361  */
 362 remoting.ClientPlugin.prototype.isSupportedVersion = function() {
 363   if (!this.helloReceived_) {
 364     console.error(
 365         "isSupportedVersion() is called before the plugin is initialized.");
 366     return false;
 367   }
 368   return this.API_VERSION_ >= this.pluginApiMinVersion_ &&
 369       this.pluginApiVersion_ >= this.API_MIN_VERSION_;
 370 };
 371
 372 /**
 373  * @param {remoting.ClientPlugin.Feature} feature The feature to test for.
 374  * @return {boolean} True if the plugin supports the named feature.
 375  */
 376 remoting.ClientPlugin.prototype.hasFeature = function(feature) {
 377   if (!this.helloReceived_) {
 378     console.error(
 379         "hasFeature() is called before the plugin is initialized.");
 380     return false;
 381   }
 382   return this.pluginApiFeatures_.indexOf(feature) > -1;
 383 };
 384
 385 /**
 386  * @return {boolean} True if the plugin supports the injectKeyEvent API.
 387  */
 388 remoting.ClientPlugin.prototype.isInjectKeyEventSupported = function() {
 389   return this.pluginApiVersion_ >= 6;
 390 };
 391
 392 /**
 393  * @param {string} iq Incoming IQ stanza.
 394  */
 395 remoting.ClientPlugin.prototype.onIncomingIq = function(iq) {
 396   if (this.plugin && this.plugin.postMessage) {
 397     this.plugin.postMessage(JSON.stringify(
 398         { method: 'incomingIq', data: { iq: iq } }));
 399   } else {
 400     // plugin.onIq may not be set after the plugin has been shut
 401     // down. Particularly this happens when we receive response to
 402     // session-terminate stanza.
 403     console.warn('plugin.onIq is not set so dropping incoming message.');
 404   }
 405 };
 406
 407 /**
 408  * @param {string} hostJid The jid of the host to connect to.
 409  * @param {string} hostPublicKey The base64 encoded version of the host's
 410  *     public key.
 411  * @param {string} localJid Local jid.
 412  * @param {string} sharedSecret The access code for IT2Me or the PIN
 413  *     for Me2Me.
 414  * @param {string} authenticationMethods Comma-separated list of
 415  *     authentication methods the client should attempt to use.
 416  * @param {string} authenticationTag A host-specific tag to mix into
 417  *     authentication hashes.
 418  * @param {string} clientPairingId For paired Me2Me connections, the
 419  *     pairing id for this client, as issued by the host.
 420  * @param {string} clientPairedSecret For paired Me2Me connections, the
 421  *     paired secret for this client, as issued by the host.
 422  */
 423 remoting.ClientPlugin.prototype.connect = function(
 424     hostJid, hostPublicKey, localJid, sharedSecret,
 425     authenticationMethods, authenticationTag,
 426     clientPairingId, clientPairedSecret) {
 427   this.plugin.postMessage(JSON.stringify(
 428     { method: 'connect', data: {
 429         hostJid: hostJid,
 430         hostPublicKey: hostPublicKey,
 431         localJid: localJid,
 432         sharedSecret: sharedSecret,
 433         authenticationMethods: authenticationMethods,
 434         authenticationTag: authenticationTag,
 435         capabilities: this.capabilities_.join(" "),
 436         clientPairingId: clientPairingId,
 437         clientPairedSecret: clientPairedSecret
 438       }
 439     }));
 440 };
 441
 442 /**
 443  * Release all currently pressed keys.
 444  */
 445 remoting.ClientPlugin.prototype.releaseAllKeys = function() {
 446   this.plugin.postMessage(JSON.stringify(
 447       { method: 'releaseAllKeys', data: {} }));
 448 };
 449
 450 /**
 451  * Send a key event to the host.
 452  *
 453  * @param {number} usbKeycode The USB-style code of the key to inject.
 454  * @param {boolean} pressed True to inject a key press, False for a release.
 455  */
 456 remoting.ClientPlugin.prototype.injectKeyEvent =
 457     function(usbKeycode, pressed) {
 458   this.plugin.postMessage(JSON.stringify(
 459       { method: 'injectKeyEvent', data: {
 460           'usbKeycode': usbKeycode,
 461           'pressed': pressed}
 462       }));
 463 };
 464
 465 /**
 466  * Remap one USB keycode to another in all subsequent key events.
 467  *
 468  * @param {number} fromKeycode The USB-style code of the key to remap.
 469  * @param {number} toKeycode The USB-style code to remap the key to.
 470  */
 471 remoting.ClientPlugin.prototype.remapKey =
 472     function(fromKeycode, toKeycode) {
 473   this.plugin.postMessage(JSON.stringify(
 474       { method: 'remapKey', data: {
 475           'fromKeycode': fromKeycode,
 476           'toKeycode': toKeycode}
 477       }));
 478 };
 479
 480 /**
 481  * Enable/disable redirection of the specified key to the web-app.
 482  *
 483  * @param {number} keycode The USB-style code of the key.
 484  * @param {Boolean} trap True to enable trapping, False to disable.
 485  */
 486 remoting.ClientPlugin.prototype.trapKey = function(keycode, trap) {
 487   this.plugin.postMessage(JSON.stringify(
 488       { method: 'trapKey', data: {
 489           'keycode': keycode,
 490           'trap': trap}
 491       }));
 492 };
 493
 494 /**
 495  * Returns an associative array with a set of stats for this connecton.
 496  *
 497  * @return {remoting.ClientSession.PerfStats} The connection statistics.
 498  */
 499 remoting.ClientPlugin.prototype.getPerfStats = function() {
 500   return this.perfStats_;
 501 };
 502
 503 /**
 504  * Sends a clipboard item to the host.
 505  *
 506  * @param {string} mimeType The MIME type of the clipboard item.
 507  * @param {string} item The clipboard item.
 508  */
 509 remoting.ClientPlugin.prototype.sendClipboardItem =
 510     function(mimeType, item) {
 511   if (!this.hasFeature(remoting.ClientPlugin.Feature.SEND_CLIPBOARD_ITEM))
 512     return;
 513   this.plugin.postMessage(JSON.stringify(
 514       { method: 'sendClipboardItem',
 515         data: { mimeType: mimeType, item: item }}));
 516 };
 517
 518 /**
 519  * Notifies the host that the client has the specified size and pixel density.
 520  *
 521  * @param {number} width The available client width in DIPs.
 522  * @param {number} height The available client height in DIPs.
 523  * @param {number} device_scale The number of device pixels per DIP.
 524  */
 525 remoting.ClientPlugin.prototype.notifyClientResolution =
 526     function(width, height, device_scale) {
 527   if (this.hasFeature(remoting.ClientPlugin.Feature.NOTIFY_CLIENT_RESOLUTION)) {
 528     var dpi = Math.floor(device_scale * 96);
 529     this.plugin.postMessage(JSON.stringify(
 530         { method: 'notifyClientResolution',
 531           data: { width: Math.floor(width * device_scale),
 532                   height: Math.floor(height * device_scale),
 533                   x_dpi: dpi, y_dpi: dpi }}));
 534   }
 535 };
 536
 537 /**
 538  * Requests that the host pause or resume sending video updates.
 539  *
 540  * @param {boolean} pause True to suspend video updates, false otherwise.
 541  */
 542 remoting.ClientPlugin.prototype.pauseVideo =
 543     function(pause) {
 544   if (!this.hasFeature(remoting.ClientPlugin.Feature.PAUSE_VIDEO)) {
 545     return;
 546   }
 547   this.plugin.postMessage(JSON.stringify(
 548       { method: 'pauseVideo', data: { pause: pause }}));
 549 };
 550
 551 /**
 552  * Requests that the host pause or resume sending audio updates.
 553  *
 554  * @param {boolean} pause True to suspend audio updates, false otherwise.
 555  */
 556 remoting.ClientPlugin.prototype.pauseAudio =
 557     function(pause) {
 558   if (!this.hasFeature(remoting.ClientPlugin.Feature.PAUSE_AUDIO)) {
 559     return;
 560   }
 561   this.plugin.postMessage(JSON.stringify(
 562       { method: 'pauseAudio', data: { pause: pause }}));
 563 };
 564
 565 /**
 566  * Called when a PIN is obtained from the user.
 567  *
 568  * @param {string} pin The PIN.
 569  */
 570 remoting.ClientPlugin.prototype.onPinFetched =
 571     function(pin) {
 572   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
 573     return;
 574   }
 575   this.plugin.postMessage(JSON.stringify(
 576       { method: 'onPinFetched', data: { pin: pin }}));
 577 };
 578
 579 /**
 580  * Tells the plugin to ask for the PIN asynchronously.
 581  */
 582 remoting.ClientPlugin.prototype.useAsyncPinDialog =
 583     function() {
 584   if (!this.hasFeature(remoting.ClientPlugin.Feature.ASYNC_PIN)) {
 585     return;
 586   }
 587   this.plugin.postMessage(JSON.stringify(
 588       { method: 'useAsyncPinDialog', data: {} }));
 589 };
 590
 591 /**
 592  * Sets the third party authentication token and shared secret.
 593  *
 594  * @param {string} token The token received from the token URL.
 595  * @param {string} sharedSecret Shared secret received from the token URL.
 596  */
 597 remoting.ClientPlugin.prototype.onThirdPartyTokenFetched = function(
 598     token, sharedSecret) {
 599   this.plugin.postMessage(JSON.stringify(
 600     { method: 'onThirdPartyTokenFetched',
 601       data: { token: token, sharedSecret: sharedSecret}}));
 602 };
 603
 604 /**
 605  * Request pairing with the host for PIN-less authentication.
 606  *
 607  * @param {string} clientName The human-readable name of the client.
 608  * @param {function(string, string):void} onDone, Callback to receive the
 609  *     client id and shared secret when they are available.
 610  */
 611 remoting.ClientPlugin.prototype.requestPairing =
 612     function(clientName, onDone) {
 613   if (!this.hasFeature(remoting.ClientPlugin.Feature.PINLESS_AUTH)) {
 614     return;
 615   }
 616   this.onPairingComplete_ = onDone;
 617   this.plugin.postMessage(JSON.stringify(
 618       { method: 'requestPairing', data: { clientName: clientName } }));
 619 };
 620
 621 /**
 622  * Send an extension message to the host.
 623  *
 624  * @param {string} type The message type.
 625  * @param {string} message The message payload.
 626  */
 627 remoting.ClientPlugin.prototype.sendClientMessage =
 628     function(type, message) {
 629   if (!this.hasFeature(remoting.ClientPlugin.Feature.EXTENSION_MESSAGE)) {
 630     return;
 631   }
 632   this.plugin.postMessage(JSON.stringify(
 633       { method: 'extensionMessage',
 634         data: { type: type, data: message } }));
 635
 636 };
 637
 638 /**
 639  * Request MediaStream-based rendering.
 640  *
 641  * @param {remoting.MediaSourceRenderer} mediaSourceRenderer
 642  */
 643 remoting.ClientPlugin.prototype.enableMediaSourceRendering =
 644     function(mediaSourceRenderer) {
 645   if (!this.hasFeature(remoting.ClientPlugin.Feature.MEDIA_SOURCE_RENDERING)) {
 646     return;
 647   }
 648   this.mediaSourceRenderer_ = mediaSourceRenderer;
 649   this.plugin.postMessage(JSON.stringify(
 650       { method: 'enableMediaSourceRendering', data: {} }));
 651 };
 652
 653 /**
 654  * If we haven't yet received a "hello" message from the plugin, change its
 655  * size so that the user can confirm it if click-to-play is enabled, or can
 656  * see the "this plugin is disabled" message if it is actually disabled.
 657  * @private
 658  */
 659 remoting.ClientPlugin.prototype.showPluginForClickToPlay_ = function() {
 660   if (!this.helloReceived_) {
 661     var width = 200;
 662     var height = 200;
 663     this.plugin.style.width = width + 'px';
 664     this.plugin.style.height = height + 'px';
 665     // Center the plugin just underneath the "Connnecting..." dialog.
 666     var parentNode = this.plugin.parentNode;
 667     var dialog = document.getElementById('client-dialog');
 668     var dialogRect = dialog.getBoundingClientRect();
 669     parentNode.style.top = (dialogRect.bottom + 16) + 'px';
 670     parentNode.style.left = (window.innerWidth - width) / 2 + 'px';
 671   }
 672 };