castrax/sender.html

<!DOCTYPE html>
<html>
  <head>
    <title>CasTrax</title>
    <style type="text/css">
      html, body, #wrapper {
        height:100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
      }
      #wrapper td {
        vertical-align: middle;
        text-align: center;
      }
      input {
        font-family: "Arial", Arial, sans-serif;
        font-size: 40px;
        font-weight: bold;
      }
      .border {
        border: 2px solid #cccccc;
        border-radius: 5px;
      }
      .border:focus {
        outline: none;
        border-color: #8ecaed;
        box-shadow: 0 0 5px #8ecaed;
      }
    </style>
    <script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js"></script>
    <script type="text/javascript">
      var applicationID = 'A19256CC';
      var namespace = 'urn:x-cast:com.positiverobot.castrax';
      var session = null;

      /**
       * Call initialization for Cast
       */
      if (!chrome.cast || !chrome.cast.isAvailable) {
        setTimeout(initializeCastApi, 1000);
      }

      /**
       * initialization
       */
      function initializeCastApi() {
        var sessionRequest = new chrome.cast.SessionRequest(applicationID);
        var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
          sessionListener,
          receiverListener);

        chrome.cast.initialize(apiConfig, onInitSuccess, onError);
      }

      /**
       * initialization success callback
       */
      function onInitSuccess() {
        appendMessage('onInitSuccess');
      }

      /**
       * initialization error callback
       */
      function onError(message) {
        appendMessage('onError: ' + JSON.stringify(message));
      }

      /**
       * generic success callback
       */
      function onSuccess(message) {
        appendMessage('onSuccess: ' + message);
      }

      /**
       * callback on success for stopping app
       */
      function onStopAppSuccess() {
        appendMessage('onStopAppSuccess');
      }

      /**
       * session listener during initialization
       */
      function sessionListener(e) {
        appendMessage('New session ID:' + e.sessionId);
        session = e;
        session.addUpdateListener(sessionUpdateListener);
        session.addMessageListener(namespace, receiverMessage);
      }

      /**
       * listener for session updates
       */
      function sessionUpdateListener(isAlive) {
        var message = isAlive ? 'Session Updated' : 'Session Removed';
        message += ': ' + session.sessionId;
        appendMessage(message);
        if (!isAlive) {
          session = null;
        }
      }

      /**
       * utility function to log messages from the receiver
       * @param {string} namespace The namespace of the message
       * @param {string} message A message string
       */
      function receiverMessage(namespace, message) {
        appendMessage('receiverMessage: ' + namespace + ', ' + message);
      }

      /**
       * receiver listener during initialization
       */
      function receiverListener(e) {
        if(e === 'available') {
          appendMessage('receiver found');
        }
        else {
          appendMessage('receiver list empty');
        }
      }

      /**
       * stop app/session
       */
      function stopApp() {
        session.stop(onStopAppSuccess, onError);
      }

      /**
       * send a message to the receiver using the custom namespace
       * receiver CastMessageBus message handler will be invoked
       * @param {string} message A message string
       */
      function sendMessage(message) {
        if (session != null) {
          session.sendMessage(namespace, message, onSuccess.bind(this, 'Message sent: ' + message),
            onError);
        }
        else {
          chrome.cast.requestSession(function(e) {
              session = e;
              session.sendMessage(namespace, message, onSuccess.bind(this, 'Message sent: ' +
                message), onError);
            }, onError);
        }
      }

      /**
       * append message to debug message window
       * @param {string} message A message string
       */
      function appendMessage(message) {
        console.log(message);
        var dw = document.getElementById('debugmessage');
        dw.innerHTML += '\n' + JSON.stringify(message);
      }

      /**
       * utility function to handle text typed in by user in the input field
       */
      function update() {
        sendMessage(document.getElementById('input').value);
      }

      /**
       * handler for the transcribed text from the speech input
       * @param {string} words A transcibed speech string
       */
      function transcribe(words) {
        sendMessage(words);
      }
    </script>
  </head>
  <body>
    <table id="wrapper">
      <tr>
        <td>
          <form method="get" action="JavaScript:update();">
            <input id="input" class="border" type="text" size="30"
              onwebkitspeechchange="transcribe(this.value)" x-webkit-speech/>
          </form>
        </td>
      </tr>
    </table>

    <!-- Debbugging output -->
    <div style="margin:10px; visibility:hidden;">
      <textarea rows="20" cols="70" id="debugmessage">
      </textarea>
    </div>

    <script type="text/javascript">
      document.getElementById('input').focus();
    </script>
  </body>
</html>