DaveVoyles

    // initializeVideoStream() - Callback function when getUserMedia() returns successfully with a mediaStream object
    // 1. Set the mediaStream on the video tag
    // 2. Use 'srcObject' attribute to determine whether to use the standard-based API or the legacy version

    var initializeVideoStream = function(stream) {
        mediaStream = stream;

        var video = document.getElementById('videoTag');
        if (typeof (video.srcObject) !== 'undefined') {
            video.srcObject = mediaStream;

DaveVoyles

  // initializeVideoStream() - Callback function when getUserMedia() returns successfully with a mediaStream object
  // 1. Set the mediaStream on the video tag
  // 2. Use 'srcObject' attribute to determine whether to use the standard-based API or the legacy version

    var initializeVideoStream = function(stream) {
        mediaStream = stream;

        var video = document.getElementById('videoTag');
        if (typeof (video.srcObject) !== 'undefined') {
            video.srcObject = mediaStream;

DaveVoyles

 // savePhoto() - Function invoked when user clicks on the canvas element
 // 1. If msSaveBlob is supported, get the photo blob from the canvas and save the image file
 // 2. Otherwise, set up the download attribute of the anchor element and download the image file

    var savePhoto = function() {
        if (photoReady) {
            var canvas = document.getElementById('canvasTag');
            if (navigator.msSaveBlob) {
                var imgData = canvas.msToBlob('image/jpeg');
                navigator.msSaveBlob(imgData, 'myPhoto.jpg');

DaveVoyles

/*x-radial-buttons.html*/
var currentAccent = 'en-US';
var accentArr	  =  ['en-US', 'en-GB', 'es-ES'];
			
getCurrentAccent: function () {
	return currentAccent;
},


/* Main.js*/

DaveVoyles

form.addEventListener('submit',  function (e) { window.pokemonApp.sayTheName(e) });

// Say the text when button is pressed
pokemonApp.sayTheName = function (e) {
      e.preventDefault();
      playerElement.speak();
      console.log(radialButtons.intValue);
};

DaveVoyles

input.addEventListener('input',  function (e) {
	playerElement.setAttribute('text', input.value);
	xPokemon.name = input.value;
});

DaveVoyles

<!-- Container for Web Components content -->
<aside>
    <h3>Enter the name of a Pokemon!</h3>
    <form id="player-form" class="pure-form">
	<input  id="player-input" type="text" value="pikachu">
	<button id="player-submit" class="pure-button pure-button-primary">Speak!</button>
	<button id="btn-change-accent" class="pure-button pure-button-primary">Change Accent</button>
	<!-- Text-to-speech -->
	<voice-player id="player-element" accent="es-ES" text=""></voice-player>
    </form>

DaveVoyles

  <article>
	<header>
		<h1>Gotta say 'em all! </h1>
		<p>This web app takes advantage of Web Components and Polymer to enable new HTML features in the browser.</p>
		<p>
			In this particular case, we are using <a href="https://github.com/passy/x-pokemon" target="_blank">
			the x-pokemon web component </a> to pull the images from a database, as well as the 
			<a href="http://zenorocha.github.io/voice-elements/" target="_blank">voice-elements web component</a> to speak the name of the pokemon we entered.							
		</p>
		<p>

DaveVoyles

<script>
(function () { // IIFE makes attributes global 
	/* -- Global Attributes ------------------------------------------------ */
	var currentAccent = 'en-US';
	var accentArr	  =  ['en-US', 'en-GB', 'es-ES'];
 	Polymer('x-radial-buttons', {
		/* -- Methods --------------------------------------------------- */
		getCurrentAccent: function () {
    			return currentAccent;
		},

DaveVoyles

<link rel="import" href="bower_components/polymer/polymer.html"        >
<link rel="import" href="../paper-radio-group/paper-radio-group.html"  >
<link rel="import" href="../paper-radio-button/paper-radio-button.html">

<polymer-element name="x-radial-buttons">
    <!-- Shadow DOM -->
    <template>
        <style>
            #paper_radio_group {
                position: relative;