フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

nativescriptでカメラ起動する

インストール

tns plugin add nativescript-camera

market.nativescript.org

 コード

<template>
    <Page>
        <ActionBar>
            <Label text="カメラ起動サンプル"/>
        </ActionBar>        
        <Button @tap="onButtonTap" text="カメラ起動7" class="-outline"></Button>
    </Page>
</template>

<script>
import * as camera from "nativescript-camera";
import { Image } from "tns-core-modules/ui/image";


  export default {
    mounted () {
      // カメラが利用できるかの確認
      var isAvailable = camera.isAvailable(); 
      console.log("############################")
      console.log(isAvailable)
    },
    methods: {
      onButtonTap() {
        // カメラ起動
        //var options = { width: 300, height: 300, keepAspectRatio: false, saveToGallery: true };
        camera.takePicture().
            then((imageAsset) => {
                console.log("Result is an image asset instance");
                var image = new Image();
                image.src = imageAsset;
                //console.log("Size: " + imageAsset.options.width + "x" + imageAsset.options.height);
                //console.log("keepAspectRatio: " + imageAsset.options.keepAspectRatio);
                //console.log("Photo saved in Photos/Gallery for Android or in Camera Roll for iOS");
            }).catch((err) => {
                console.log("Error22 -> " + err.message);
            });        
      }
    }
  };
</script>

<style scoped lang="scss">
    @import '~@nativescript/theme/scss/variables/blue';

    // Custom styles
    .fas {
        @include colorize($color: accent);
    }

    .info {
        font-size: 20;
        horizontal-align: center;
        vertical-align: center;
    }
</style>

マニフェストの設定

  • /App_Resources/Android/src/main/AndroidManifest.xmlを参照しandroid:requestLegacyExternalStorage="true"を追記する
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="__PACKAGE__"
        android:versionCode="10000"
        android:versionName="1.0">

        <supports-screens
                android:smallScreens="true"
                android:normalScreens="true"
                android:largeScreens="true"
                android:xlargeScreens="true"/>

        <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
        <uses-permission android:name="android.permission.INTERNET"/>

        <application
                android:name="com.tns.NativeScriptApplication"
                android:allowBackup="true"
                android:icon="@drawable/icon"
                android:label="@string/app_name"
                android:requestLegacyExternalStorage="true"
                android:theme="@style/AppTheme">

                <activity
                        android:name="com.tns.NativeScriptActivity"
                        android:label="@string/title_activity_kimera"
                        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
                        android:theme="@style/LaunchScreenTheme">

                        <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />

                        <intent-filter>
                                <action android:name="android.intent.action.MAIN" />
                                <category android:name="android.intent.category.LAUNCHER" />
                        </intent-filter>
                </activity>
                <activity android:name="com.tns.ErrorReportActivity"/>
        </application>
</manifest>

結果

  • エラー処理が走ってしまい写真を保存することができなかった。カメラは起動しました。
LOG from device AQUOS sense3 basic: '############################'
LOG from device AQUOS sense3 basic: true
LOG from device AQUOS sense3 basic: 'Error22 -> cancelled'