React Native에서 웹캠 영상을 재생하기

React Native앱에서 영상 분석 서비스를 제공하기로 함에 따라, React Native에서 cctv 실시간 영상을 볼 수 있게 만들어야한다. 아직 cctv가 없어서 스마트폰 웹캠을 cctv 대신으로 하여 테스트 하였다.

ReactJS에서 실시간 웹캠 영상을 재생하는 법

1. 스마트폰을 웹캠으로 만들어주는 앱을 다운받아 스트리밍 가능한 상태로 만든다.

2. react-native-vlc-player 모듈을 다운 받는다.

3. App.js에 다음과 같은 코드를 작성한다.

import React from 'react';
import VlcPlayer from 'react-native-vlc-player';

import {
  StyleSheet,
  Text,
  View,
} from 'react-native';


const App = () => {
  vlcplayer = React.createRef();  

  return (
    <View style={styles.container}>
      <Text>{"ip webcam 연결"} </Text>
      <VlcPlayer
        ref={this.vlcplayer}
        style={{
          width: 300,
          height: 200,
        }}
        paused={false}
        autoplay={true}
        source={{
          uri: 'ip camera address',
          autoplay: true,
          initOptions: ['--codec=avcodec'],
        }} >
      </VlcPlayer>
    </View>
  ); 
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'grey',
  },
});

export default App;

http로 시작하는 주소이든, rtmp로 시작하는 주소이든 다 잘된다. 폰트 파일은 시키는대로 assets/fonts로 옮겼지만 어째서인지 깨진다.

ref는 컴포넌트를 외부에서 컨트롤 할 수 있게 해주는 기능인 것 같다.