admin

PhoneGap(cordova) api로 하드웨어 접근하기

5.하이브리드 앱/개발2013. 9. 10. 15:17
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

PhoneGap(cordova) API를 이용하여 하드웨어에 접근하는 방법에 대하여 설명하겠습니다.

우선 하드웨어에 접근하려면 plugin을 설치 해야 합니다.

설치 방법은 2가지 방법이 있는데 

첫쨰 cordova를 이용하여 설치하는 방법

둘쨰 node.js설치 후 plugman을 이용하여 설치 하는 방법이있습니다.


여기서는 cordova을 이용하여 plugin을 설치 하겠습니다.

1. 만들 프로젝트 폴더로 이동합니다.

  cordova create MyFunkyApp

cd MyFunkyApp

cordova platform add ios

cordova emulate ios

이렇게 App을 만들었다면 MyFunkyApp의 폴더로 이동합니다

$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git 을 실행하여 plugin을 설치 합니다.

[Error: Error fetching plugin: Error: "git" command line tool is not installed: make sure it is accessible on your PATH.]

이렇게 메세지가 나온다면 git가 설치가 되지 않아서 보여지는 에러니 

https://help.github.com/articles/set-up-git에서 다운받아 설치 합니다.



이제 

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

다시 실행합니다.

정상적으로 실행 되었다면 ios>config.xml파일을 열어

    <feature name="Camera">

        <param name="ios-package" value="CDVCamera" />

    </feature>

카메라 관련 설정이 추가되어있는지 확인합니다.

마찬가지로 안드로이드도 프로젝트>/res/xml/config.xml에 

    <feature name="Camera">

        <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />

    </feature>

가 추가 되어있는것을 확인 할 수 있습니다.

API plugin URL

cordova-plugin-battery-status   https://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

cordova-plugin-camera   https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

cordova-plugin-console   https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

cordova-plugin-contacts   https://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

cordova-plugin-device   https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

cordova-plugin-device-motion (accelerometer)   https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

cordova-plugin-device-orientation (compass)   https://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

cordova-plugin-dialogs   https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

cordova-plugin-file   https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

cordova-plugin-file-transfer   https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

cordova-plugin-geolocation   https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

cordova-plugin-globalization   https://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

cordova-plugin-inappbrowser   https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

cordova-plugin-media   https://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

cordova-plugin-media-capture   https://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

cordova-plugin-network-information   https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

cordova-plugin-splashscreen   https://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

cordova-plugin-vibration   https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git


이제 추가 했으니 카메라 API sample을 작성해봅시다.

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // device APIs are available
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "https://t1.daumcdn.net/cfile/tistory/233A9D3A56EB11EE2E" + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    //
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
  </head>
  <body>
    <button onclick="capturePhoto();">Capture Photo</button> <br>
    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
  </body>
</html>

안드로이드 프로젝트에서 카메라 기능을 on시키고 확인하면 잘 동작 하는것을 확인 할 수 있습니다.

참고  URL

'5.하이브리드 앱 > 개발' 카테고리의 다른 글

IOS iphone cordova phonegap status bar(폰갭 코드바 제목과 겹치는 문제 해결)  (0) 2013.12.17
Text 입력시 키보드 위로 텍스트 박스 올리기 설정  (0) 2013.10.29
Google Cloud Messaging 서비스를 이용한 Push 정리  (0) 2013.10.07
IOS Simulator에 사진 넣기  (0) 2013.09.22
첫 하이브리드 앱(Ajax JSONP을 이용한 비동기 서버 호출)  (1) 2013.09.03

티스토리툴바