How can Integrate video recorder to my ionic 5 project

[xamuel17]

I have followed all the predefined steps. The camera shows but I can't record. Can some one help me with the code snippet for ionic integration.

[vernondris]

same question here. I am having a problem integrating it to my ionic 5 capacitor

[gbrits]

So if you're running it on your device with the --livereload flag, it will be trying to execute the web/browser version (mock). And without it, I'm getting this error:
⚡️ [warn] - VideoRecorder: Web implementation is currently for mock purposes only, recording is not available
⚡️ [error] - ERROR Error: Uncaught (in promise): NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

So I'm guessing I need to add the permission check somewhere

[ilbertt]

Have you guys enabled the plugin in your Android app as described in #23 (comment)?

[donmb1]

@Luca8991 I did that but on compiling the app it throws an error

[error] WARNING:: Using flatDirs should be avoided because it doesn't support any meta-data formats.
        Currently detected usages:
        - repository flatDir used in: project ':app', project ':capacitor-cordova-android-plugins'
        WARNING:: Please remove usages of `jcenter()` Maven repository from your build scripts and migrate your build to
        other Maven repositories.
        This repository is deprecated and it will be shut down in the future.

[ilbertt]

@donmb1 what version of Capacitor are you using? When I commented I was using v2, but now v3 is available and there are some changes on how to enable plugins that you can find in the updating guide. Maybe this is the reason of your error! Otherwise, unfortunately I think I can't help you...

[donmb1]

Thanks. I will look later into this and hope to get it running 🤞

…

Am 07.03.2022 um 16:32 schrieb Luca Bertelli ***@***.***>:  @donmb1 what version of Capacitor are you using? When I commented I was using v2, but now v3 is available and there are some changes on how to enable plugins that you can find in the updating guide. Maybe this is the reason of your error! Otherwise, unfortunately I think I can't help you... — Reply to this email directly, view it on GitHub, or unsubscribe. Triage notifications on the go with GitHub Mobile for iOS or Android. You are receiving this because you were mentioned.

[donmb1]

@Luca8991
yes I was using exactly this method of registering the plugin:

package xxxxxxx;
import com.github.sbannigan.capacitor.VideoRecorder;
import android.os.Bundle;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        registerPlugin(VideoRecorder.class);
    }
}

However, it is still not registered.
What could be the reason?

[ilbertt]

@donmb1 if your are using Capacitor v2, this is the correct method to register the plugin and it should work I think... If you're are on Capacitor v3 instead, this is not necessary and is done automatically by Capacitor itself

[donmb1]

@Luca8991 so I'm really wondering what I am doing wrong. All I get is a mocked file location but no real file :(

[ilbertt]

@donmb1 which version of this plugin you have installed? Maybe you should use v4.0.1 instead of v5.0.0, which is the last one and introduces compatibility with Capacitor v3

[donmb1]

@Luca8991 this is my packacke.json, I am using 4.0.1

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/android": "^3.4.2",
    "@capacitor/core": "^3.4.2",
    "@teamhive/capacitor-video-recorder": "^4.0.1",
    "axios": "^0.26.0",
    "core-js": "^3.6.5",
    "sass": "^1.49.8",
    "sass-loader": "^10.2.1",
    "vue": "^2.6.11",
    "vue2-touch-events": "^3.2.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^3.4.2",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[donmb1]

V5.0.0 does not even have Android support. there is a PR pending which adds it:
#41
not sure why its not merged. is the plugin not maintained anymore?

[ilbertt]

@Luca8991 this is my packacke.json, I am using 4.0.1

{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/android": "^3.4.2",
    "@capacitor/core": "^3.4.2",
    "@teamhive/capacitor-video-recorder": "^4.0.1",
    "axios": "^0.26.0",
    "core-js": "^3.6.5",
    "sass": "^1.49.8",
    "sass-loader": "^10.2.1",
    "vue": "^2.6.11",
    "vue2-touch-events": "^3.2.2",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^3.4.2",
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

@donmb1 as I see you're using Capacitor v3, so this method you used to register the plugin is not working. You should import the plugin like it's written in this package's README.

[ilbertt]

V5.0.0 does not even have Android support. there is a PR pending which adds it: #41 not sure why its not merged. is the plugin not maintained anymore?

@donmb1 unfortunately I think you must use v5.0.0 as you're on Capacitor v3. I don't know anything about the plugin maintenance...

[donmb1]

@Luca8991 where do I find this feature module feature.module.ts?
Maybe I miss some Capacitor essential here :)
I was registering plugins in MainActivity.java

[ilbertt]

@Luca8991 where do I find this feature module feature.module.ts? Maybe I miss some Capacitor essential here :) I was registering plugins in MainActivity.java

@donmb1 I'm not sure as I never used Capacitor with Vue. Maybe using Ionic Framework + Vue could help you setup everything correctly for Capacitor and generate the feature.module.ts file for you.
Registering plugins in MainActivity.java was the right procedure in Capacitor v2. See here