allow to change language to spanish

[AutomataVM]

The web page I am currently working on is in spanish, and the language of the QR scanner area is in english, I wanted to add the possibility to change the lines to spanish.

[MSkred]

I want to do same in french

[MSkred]

I'm worked with vue but I've a bad solution for css and text in another language.

<template>
  <qrcode-scanner :qrbox="250" :fps="10" @result="onScan"/>
</template>


<script>
export default {
  middleware: ['authenticated'],
  head() {
    return {
      script: [ 
        { src: 'https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js' }
      ],
    }
  },
  methods: {
    onScan (qrCodeMessage) {
      // handle the message here :)
      console.log('qr', qrCodeMessage);
    },
    rafAsync() {
      return new Promise(resolve => {
        requestAnimationFrame(resolve); //faster than set time out
      });
    },
    async checkElement(selector) {
      var querySelector = null;
      while (querySelector === null) {
          await this.rafAsync();
          querySelector = document.querySelector(selector);
      }
      return querySelector;
    },
    changeQrScannerText(){
      const scanner = document.getElementById('lgc-qr-scanner')
      if(scanner){
        // Qr code scanner title
        let title = scanner.querySelector('div:first-of-type')
        title.style.display = "none"
        
        // Qr code scanner request permission button
        let requestButton = scanner.querySelector('#lgc-qr-scanner__dashboard_section_csr button');
        requestButton.innerHTML = "Demande d'accès à la caméra"

        // When requestButton is click,
        // await for its sub-elements to be present in the DOM
        requestButton.addEventListener('click', () => {
          // Select text
          this.checkElement('#lgc-qr-scanner__dashboard_section_csr span:nth-child(1)').then(el => {
            let array = el.innerHTML.split('&nbsp;')
            array[0] = 'Sélectionnez une caméra';
            el.innerHTML = array.join('')
          })
          // Start and Stop scanner button 
          this.checkElement('#lgc-qr-scanner__dashboard_section_csr span:nth-child(2)').then(el => {
              let startScan = el.querySelector('button:nth-child(1)')
              let stopScan = el.querySelector('button:nth-child(2)')
              startScan.innerHTML = 'Commencer le scan'
              stopScan.innerHTML = 'Arrêter le scan'
          })
        })
      }
    }
  },
  mounted(){
    this.changeQrScannerText()
  }
}
</script>

<style lang="scss">
@import "../assets/sass/settings/color";
@import "../assets/sass/settings/unit";
@import "../assets/sass/tools/mq";
@import "../assets/sass/tools/flex";

  #lgc-qr-scanner{
    &__dashboard{
      &_section{
        width: initial !important;
        &_csr{ // Request perrmission
          button{
            padding: $Rsu;
            font-size: $Rcu;
            background: $default;
            color: $w;
            border-radius: $Rtu;
            border: none;
          }
          span{ // Select
            margin-right: 0 !important;
            font-size: $Rcu;
            color: $default;
            select{
              margin: $Rtu 0;
              padding: $Rtu;
              border-radius: $Rtu;
            }
          }
        }
        &>div:last-of-type{}
        &_swaplink{ // Scan image file
            display: none !important;
            padding: $Rsu;
            font-size: $Rcu;
            background: $success;
            color: $w;
            border-radius: $Rtu;
            border: none;
            width: calc(100% - 24px);
        }
      }
    }
  }
</style>

[StevenKRT]

I want to do same in german

[AlfonsoML]

This is a duplicate of #132

[mebjas]

Duplicate of https://github.com/mebjas/html5-qrcode/issues/132 closing. Please track there directly.

This is WIP.