Day1 カメラアプリを作る

2019-03-09T22:30:42+09:00

ボードのゴールには色々書いてますが、まずはカメラアプリを作っていきます。(Day1と書いてますが２日間かかりました)

パーミッションの取得

今回は以下３つの権限が必要。
- カメラ
- 音声録音
- 外部ストレージへの書き込み

componentWillMount(){
    (async()=>{
      await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.CAMERA)
      await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO)
      await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE)
    })();
  }

とりあえず全部投げておけばええやろ！的な実装なのであまり真似しないでください(戻り値をちゃんと評価しましょう)

動画の撮影処理

参考リンク：Record and Upload Videos with React Native

ストレージへの保存処理

カメラロールに保存する処理

ファイル名を特に決めずにデフォルトのまま保存するならカメラロールAPIを使うのが楽。
React Native CameraRoll API
Mastering the Camera Roll in React Native

なぜカメラロールを使わないか

ファイル名が自由に決められない→rn-fetch-blobのファイルシステムAPIを使う

startRecording() {
    (async()=>{
      this.setState({ recording: true });
      // default to mp4 for android as codec is not set
      const { uri, codec = "mp4" } = await this.camera.recordAsync();
      let file = await RNFetchBlob.fs.readFile(uri,'base64')
      let dir = RNFetchBlob.fs.dirs.PictureDir
      await RNFetchBlob.fs.writeFile(
        dir +'/'+ moment().format('YYYYMMDDHHmmSS') + '.mp4',
        file,
        'base64'
      )

      //await CameraRoll.saveToCameraRoll(uri)

    })()
    .catch((err)=>{
      console.log(err)
    })
  }

ハマりどころ

react-native-cameraが真っ白になる

先駆者は言っています、「スタイルを確認せよ」と。

ストレージの保存処理はstartRecording()の中で

stopRecording()メソッドの中で書くべきだと思ってreduxとか導入したのですが、再描画されないとstoreもstateも変化しないんですよね。

「React Nativeでカメラ同期アプリを作る」の投稿 - Crieit