Quasar & Cordova plugins



  • Hi everyone,

    I really need your help to make a plugin of Cordova working with my Quasar app.
    I did exactly the same as in the doc here: http://quasar-framework.org/guide/cordova-plugins.html#Example-Camera but after i took a picture, it doesn’t render in my app. I tried to adapt it for video but i still have the same issue.

    What I really want to do is use this plugin of Cordova : https://www.npmjs.com/package/cordova-plugin-media-capture to allow the user to take a video and then display it in a vue component.

    Maybe it’s simple but i never really used the plugins of Cordova before and I can’t display the video after I recorded it.

    Here is my code :

    <template>
      <q-carousel
        color="white"
        class="fullscreen"
        quick-nav
      >
        <q-carousel-slide class="text-white bg-primary row flex-center column">
          <div class="text-center">
            <div class="q-display-2">First Slide</div>
            <div>Slides can contain any content.</div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide class="text-white bg-secondary row flex-center column">
          <div class="text-center">
            <div class="q-display-2">Second Slide</div>
            <div>Slides can contain any content.</div>
          </div>
        </q-carousel-slide>
        <q-carousel-slide class="text-white bg-tertiary flex-center column">
          <div class="text-center">
            <div class="q-display-2">Introduce Yourself</div>
            <div>Slides can contain any content.</div>
          </div>
          <q-video
            :src="videosrc"
            style="width: 100%; max-width: 600px; height: auto"
          />
          <q-btn color="amber" class="q-ma-md"  push size="lg" label="Take Video" @click="captureVideo"/>
        </q-carousel-slide>
        <q-btn
          slot="quick-nav"
          slot-scope="props"
          color="white"
          flat
          :label="`${props.slide + 1}`"
          @click="props.goToSlide()"
          :class="{inactive: !props.current}"
        />
      </q-carousel>
    </template>
    
    <script>
    document.addEventListener('deviceready', () => {
      // it's only now that we are sure
      // the event has triggered
    }, false)
    export default {
      name: 'Slides',
      data () {
        return {
          videosrc: ''
        }
      },
      methods: {
        captureVideo () {
          var captureSuccess = function (mediaFiles) {
            var i, path, len
            for (i = 0, len = mediaFiles.length; i < len; i += 1) {
              path = mediaFiles[i].fullPath
              this.videosrc = path
            }
          }
          var captureError = function (error) {
            this.$q.notify('Could not access device camera.')
            navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error')
          }
          navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1})
        }
      }
    }
    </script>
    

    I will be very grateful if someone could help me ! : /

    Thanks in advance !



  • Can someone help please ?



  • Hello Sweetyy , Try something like this:

    <html>
    
    <div id="videoArea"></div>
    
    </html>
    
    <script>
    captureVideo () {
          navigator.device.capture.captureVideo(this.onSuccess, this.fail, {limit: 1})
        },
    fail (e) {
          alert('falhou' + e)
        },
    onSuccess (s) {
          var v = "<video controls='controls'>"
          v += "<source src='" + s[0].fullPath + "' type='video/mp4'>"
          v += '</video>'
          document.querySelector('#videoArea').innerHTML = v
        }
    </script>
    

    Good Luck!



  • Hi @Katachinsky,

    Thanks so much for the proposition but it still doesn’t work.
    The problem is that i can’t show you any error from the console because i have to directly test on the device by installing the APK.

    I’m still searching for any solution and hope someone will be able to help 🙂


  • Admin

    @Sweetyy Hi. Why are you using QVideo? That’s for Youtube (as an example). Use the native <video> element for your use-case instead: https://www.w3schools.com/tags/tag_video.asp



  • Thanks for your help ! The problem was that the plugin ‘media-capture’ was not asking for permission to access to READ_EXTERNAL_STORAGE of the phone.
    Indeed @rstoenescu it’s better too with a <video> tag as @Katachinsky suggested !

    If someone has the same problem, here is a link to the plugin i installed to ask the permission for the app to access to the storage :
    https://github.com/NeoLSN/cordova-plugin-android-permissions