React Nativeでカメラ同期アプリを作る

2019-03-09に作成

ゴールは?

2台のandroid端末をBluetoothでペアリングして、片方が録画操作を行った際に同時にもう片方が録画動作を取るカメラアプリの開発

何に使える?

具体的には

野球のホームベースの後ろから撮る動画とセンターカメラ用に配置したandroid端末を同期させる。

使う技術

  • React Native ( with Native Code)
  • Android
  • Bluetoothペアリング
  • Androidアプリ間通信(サーバ・クライアント)

ライブラリ

  • react: 16.6.3
  • react-native: 0.57.8
  • react-native-camera(カメラ)
  • rn-fetch-blob(ファイルシステムアクセス)
所有者限定モードのためこのボードには投稿できません

Day1 カメラアプリを作る

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

パーミッションの取得

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

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も変化しないんですよね。

タグ

投稿月