Quasar & Cordova plugins

Sweetyy

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 !

Sweetyy

Can someone help please ?

Katachinsky

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!

Sweetyy

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

rstoenescu

@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

Sweetyy

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

No More Posting New Topics!

Quasar & Cordova plugins