text: 
  //const video = document.getElementById('live');
  //const error_context = document.querySelector('span#errorMsg');
  
  /*
              var front = false;
              document.getElementById('flip-button').onclick = function() { front = !front; };
  
              var constraints = { video: { facingMode: (front? "frontendRoutes.js" : "environment") } };
              * */
  //video: { facingMode: { exact: "environment" } } camara frontal en moviles y tablets
  //video: { facingMode: "frontendRoutes.js" } igual que el anterior (camara frontal)
  
  
  // Prefer camera resolution nearest to 1280x720.
  /*var constraints = {
      audio: true,
      video: {
          width: { min: 800, ideal: 1280, max: 1920 },
          height: { min: 600, ideal: 720, max: 1080 },
          frameRate: { min: 60, ideal: 120, max: 120 }
      }
  
  };*/
  
  /*
  *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
  *
  *  Use of this source code is governed by a BSD-style license
  *  that can be found in the LICENSE file in the root of the source
  *  tree.
  */
  
  'use strict';
  
  const videoElement = document.querySelector('video');
  //const canvas= Array(document.getElementById('preview'));
  //const ctx = Array(canvas.forEach((canva)=>{canva.getContext("2d")}));
  const canvas= document.getElementById('preview');
  const ctx = canvas.getContext("2d");
  //const audioInputSelect = document.querySelector('select#audioSource');
  //const audioOutputSelect = document.querySelector('select#audioOutput');
  const videoSelect = document.querySelector('select#videoSource');
  const selectors = [/*audioInputSelect, audioOutputSelect,*/ videoSelect];
  var muted = true;
  var videoContainer = {  // we will add properties as needed
      video : videoElement,
      ready : false,
  };
  //audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
  var FPS = 60;
  
  canvas.addEventListener("click",playPauseClick);
  //document.querySelector(".mute").addEventListener("click",videoMute);
  videoElement.oncanplay = readyToPlayVideo; // set the event to the play function that
  
  function playPauseClick(){
      if(videoContainer !== undefined && videoContainer.ready){
          if(videoContainer.video.paused){
              videoContainer.video.play();
          }else{
              videoContainer.video.pause();
          }
      }
  }
  
  video.onerror = function(e){
      canvas.hidden;
      //document.body.removeChild(canvas);
      //document.body.innerHTML += "<h2>There is a problem loading the video</h2><br>";
      //document.body.innerHTML += "Users of IE9+ , the browser does not support WebM videos used by this demo";
      //document.body.innerHTML += "<br><a href='https://tools.google.com/dlpage/webmmf/'> Download IE9+ WebM support</a> from tools.google.com<br> this includes Edge and Windows 10";
  }
  /*function videoMute(){
      muted = !muted;
      if(muted){
          document.querySelector(".mute").textContent = "Mute";
      }else{
          document.querySelector(".mute").textContent= "Sound on";
      }
  
  
  }*/
  
  function readyToPlayVideo(){ // this is a referance to the video
      // the video may not match the canvas size so find a scale to fit
      console.log("canvas.width"+videoElement.videoWidth);
      videoContainer.scale = Math.min(
          canvas.width / videoElement.videoWidth,
          canvas.height / videoElement.videoHeight);
      //console.log(videoElement.videoWidth);
      /*videoContainer.scale = Math.min(
          canvas.width / videoElement.offsetWidth,
          canvas.height / videoElement.offsetHeight);*/
      //console.log(" H: "+videoElement.offsetHeight+" V: "+videoElement.offsetWidth+" S: "+videoContainer.scale);
      videoContainer.ready = true;
      // the video can be played so hand it off to the display function
      requestAnimationFrame(updateCanvas);
      // add instruction
      //document.getElementById("playPause").textContent = "Click video to play/pause.";
      //document.querySelector(".mute").textContent = "Mute";
  }
  
  
  function updateCanvas(){
      ctx.clearRect(0,0,canvas.width,canvas.height);
      // only draw if loaded and ready
      if(videoContainer !== undefined && videoContainer.ready){
          // find the top left of the video on the canvas
          videoElement.muted = muted;
          /*var scale = videoContainer.scale;
          var vidH = videoContainer.video.videoHeight;
          var vidW = videoContainer.video.videoWidth;*/
          var scale = videoContainer.scale;
          var vidH = videoElement.videoHeight;
          var vidW = videoElement.videoWidth;
          //console.log(" H: "+vidH+" V: "+vidW+" S: "+scale);
          var top = canvas.height / 2 - (vidH /2 ) * scale;
          var left = canvas.width / 2 - (vidW /2 ) * scale;
          // now just draw the video the correct size
          ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);
          //ctx.drawImage(videoContainer.video, 0, 0, vidW, vidH);
          /*ctx.forEach((c)=>{
              c.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);
          });*/
          if(videoContainer.video.paused){ // if not playing show the paused screen
              drawPayIcon();
          }
      }
      // all done for display
      // request the next frame in 1/60th of a second
      requestAnimationFrame(updateCanvas);
  }
  
  function drawPayIcon(){
      ctx.fillStyle = "black";  // darken display
      ctx.globalAlpha = 0.5;
      ctx.fillRect(0,0,canvas.width,canvas.height);
      ctx.fillStyle = "#DDD"; // colour of play icon
      ctx.globalAlpha = 0.75; // partly transparent
      ctx.beginPath(); // create the path for the icon
      var size = (canvas.height / 2) * 0.5;  // the size of the icon
      ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end
      ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size);
      ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size);
      ctx.closePath();
      ctx.fill();
      ctx.globalAlpha = 1; // restore alpha
  }
  
  function gotDevices(deviceInfos) {
      // Handles being called several times to update labels. Preserve values.
      const values = selectors.map(select => select.value);
      selectors.forEach(select => {
          while (select.firstChild) {
              select.removeChild(select.firstChild);
          }
      });
      //videoSelect.appendChild('Sin video');
      for (let i = 0; i !== deviceInfos.length; ++i) {
          const deviceInfo = deviceInfos[i];
          const option = document.createElement('option');
          option.value = deviceInfo.deviceId;
  
          /*if (deviceInfo.kind === 'audioinput') {
              option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
              audioInputSelect.appendChild(option);
          } else if (deviceInfo.kind === 'audiooutput') {
              option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
              audioOutputSelect.appendChild(option);
          } else*/ if (deviceInfo.kind === 'videoinput') {
              //if (deviceInfo.deviceId!=='6c9c3fd1ab84c3a3115ca5f390e33fafd717a6ea463c55205df82367cee691d5'){
                  console.log(option.value);
                  option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
                  videoSelect.appendChild(option);
              //}else{delete deviceInfo[i];}
          } else {
              //console.log('Some other kind of source/device: ', deviceInfo);
          }
      }
      selectors.forEach((select, selectorIndex) => {
          if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
              select.value = values[selectorIndex];
          }
      });
  }
  
  navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
  
  // Attach audio output device to video element using device/sink ID.
  /*function attachSinkId(element, sinkId) {
      if (typeof element.sinkId !== 'undefined') {
          element.setSinkId(sinkId)
              .then(() => {
                  console.log(`Success, audio output device attached: ${sinkId}`);
              })
              .catch(error => {
                  let errorMessage = error;
                  if (error.name === 'SecurityError') {
                      errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
                  }
                  console.error(errorMessage);
                  // Jump back to first output device in the list as it's the default.
                  audioOutputSelect.selectedIndex = 0;
              });
      } else {
          console.warn('Browser does not support output device selection.');
      }
  }
  
  function changeAudioDestination() {
      const audioDestination = audioOutputSelect.value;
      attachSinkId(videoElement, audioDestination);
  }*/
  
  function gotStream(stream) {
      window.stream = stream; // make stream available to console
      videoElement.srcObject = stream;
      readyToPlayVideo();
      // Refresh button list in case labels have become available
      return navigator.mediaDevices.enumerateDevices();
  }
  
  function handleError(error) {
      console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
  }
  
  function start() {
      if (window.stream) {
          window.stream.getTracks().forEach(track => {
              track.stop();
          });
      }
      //const audioSource = audioInputSelect.value;
      const videoSource = videoSelect.value;
      console.log(videoSelect.value);
      /*const constraints = {
          audio: false,//{deviceId: audioSource ? {exact: audioSource} : undefined},
          video: {deviceId: videoSource ? {exact: videoSource} : undefined},
          frameRate: FPS
      };*/
      const constraints = {
          audio: false,
          /*video: {
              ,//{deviceId: videoSource ? {exact: videoSource} : undefined},
              width: 1920,
              height: 1080,
              frameRate: FPS
          }*/
          video: {
              deviceId: '868f2d10e12d02c991f408cefefc20fa2f86b225856be5ce90ce425dc19819ab',//(videoSource ? {exact: videoSource} : undefined),
              /*width: { min: 1280, ideal: 1920, max: 1920 },
              height: { min: 720, ideal: 1080, max: 1080 },
              frameRate: { min: 60, ideal: 60, max: 120 }*/
              width: 1920,
              height: 1080,
              frameRate: 120
          }
      };
      navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
  }
  
  //audioInputSelect.onchange = start;
  //audioOutputSelect.onchange = changeAudioDestination;
  
  videoSelect.onchange = start;
  
  start();