[flutter] Firebase Database와 플러터를 이용한 동영상 스트리밍 애플리케이션 만들기

30 Nov 2023

flutter

이번 블로그에서는 Firebase Database를 사용하여 플러터(Flutter)로 동영상 스트리밍 애플리케이션을 만드는 방법에 대해 알아보겠습니다.

Firebase Database란?

Firebase Database는 Google이 제공하는 실시간 데이터베이스입니다. 이를 사용하면 앱과 플랫폼 간에 데이터를 동기화하고 실시간으로 업데이트할 수 있습니다.

프로젝트 설정

Flutter 프로젝트를 생성합니다.
Firebase Console에서 새 프로젝트를 만듭니다.
Firebase 프로젝트 설정에서 “프로젝트 추가”를 선택하고, Firebase Database를 활성화합니다.
Firebase 프로젝트에 Flutter 앱을 추가합니다.
Firebase SDK를 프로젝트에 추가합니다.

Firebase Database에 동영상 업로드하기

Firebase Console에서 “Database”를 선택합니다.
“Realtime Database”를 선택하고 “+” 버튼을 클릭하여 새로운 데이터베이스를 만듭니다.
“Videos”라는 이름의 새로운 항목을 추가하고 동영상 링크를 포함하는 필드를 만듭니다.
Firebase Console에서 동영상 파일을 업로드합니다.

// Example code to upload video to Firebase Database
final DatabaseReference videosRef = FirebaseDatabase.instance.reference().child('videos');

void uploadVideo(String videoLink) {
  videosRef.push().set({
    'link': videoLink,
  });
}

플러터 애플리케이션 개발하기

firebase_database 패키지를 pubspec.yaml 파일에 추가합니다.
Firebase 앱에 연결합니다.

// Example code to connect Flutter app with Firebase
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  runApp(MyApp());
}

Firebase Database에서 동영상 목록을 가져와서 플러터 앱에 표시합니다.

// Example code to retrieve video list from Firebase Database
final DatabaseReference videosRef = FirebaseDatabase.instance.reference().child('videos');

class VideoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: videosRef.onValue,
      builder: (BuildContext context, AsyncSnapshot<Event> snapshot) {
        if (snapshot.hasData && !snapshot.hasError && snapshot.data!.snapshot.value != null) {
          final Map<dynamic, dynamic> videoList = snapshot.data!.snapshot.value;
          final List<VideoItem> videos = [];
          
          videoList.forEach((key, value) {
            videos.add(VideoItem(key, value['link']));
          });

          return ListView(
            children: videos,
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

class VideoItem extends StatelessWidget {
  final String videoId;
  final String videoLink;
  
  VideoItem(this.videoId, this.videoLink);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(videoId),
      onTap: () {
        // Play the video using videoLink
      },
    );
  }
}

마무리

이제 Firebase Database를 사용하여 동영상 스트리밍 애플리케이션을 플러터로 구축하는 방법에 대해 알아보았습니다. Firebase를 사용하면 앱과 데이터베이스 간에 실시간으로 데이터를 동기화할 수 있습니다. 이를 활용하여 동영상 업로드 및 재생 기능을 구현할 수 있습니다.

더 자세한 내용은 Firebase Database 문서를 참조하시기 바랍니다. Happy coding!