Masahiro Okubo

Nativescirpt cameraモジュールの使い方

Nativescirpt cameraモジュールの使い方

インターネットで見つけたチュートリアルには以下のようにインポートすることでカメラにアクセスできると書いてありましたが、
バージョンによっては?できないみたいで

// これはできない例
import {Component} from "@angular/core";
import *as Camera from "camera";

nativescript-cameraというカメラモジュールをインポートしてから起動すると無事に動きます!

$ npm install nativescript-camera --save
$ tns livesync android

ちなみにこんな感じで簡単に関数作れます

// component 側
import {Component} from "@angular/core";
// このようにインポートすることで使用可能になる
import Camera = require("nativescript-camera");

@Component({
    moduleId: module.id,
    selector: "test",
    templateUrl: "./test.component.html",
})

export class TestComponent {

    public capture() {
        Camera.takePicture().then((picture) => {
            //何かしらの処理を加える
        })
    }
}

// html側
// angularでは(click)を頻繁に使っていましたけど、nativescriptでは(tap) を使用するみたいです
// tapするとカメラが起動します
<ActionBar title="Testのバー">
    <NavigationButton text="戻る"></NavigationButton>
    <ActionItem text="カメラを起動する"  (tap)="capture()"></ActionItem>
</ActionBar>
<StackLayout>
    <Label text="Hello world"></Label>
</StackLayout>

参考にした記事
Camera


関連記事

copyright© 2016-2021 Masahiro Okubo