사용자 지정 React.js 앱을 만들어 나만의 비디오 스트리밍 사이트 만들기
동영상 스트리밍 응용 프로그램을 구축하는 것은 처음에는 어려워 보일 수 있지만 이 동영상에서 구축할 수 있는 방법을 설명합니다. 특히 다음 구성 요소를 사용하여 스트리밍 서비스를 구현하는 방법을 보여드리겠습니다.
– 서버 측 Node.js 비디오 가져오기 및 스트리밍, 동영상에 대한 축소판 생성, 동영상 에 대한 캡션 및 자막 제공 을 처리하는 응용 프로그램입니다.
– 우리의 서버에서 비디오를 소비하는 반응의 클라이언트 응용 프로그램. 이 응용 프로그램은 두 개의 보기가 있을 것 이다: 사용 가능한 비디오의 목록, 각 비디오에 대 한 플레이어 보기.
챕터:
0:00 소개
0:50 전제 조건
1:19 앱 디렉토리 만들기
1:48 런 npm 이니트
2:04 종속성 설치
2:15 자산 디렉터리 만들기
2:34 Github에서 에셋 다운로드
2:44 자산에 첫 번째 비디오 추가
2:58 앱 만들기.js
5:48 개발자에서 앱 테스트
6:17 프론트엔드에서 작업을 시작
8:27 반응 앱 시작
8:55 다음 단계는 무엇입니까?
9:13 부트스트랩 구현
9:30 반응 라우터 돔 설치
9:56 홈 뷰 만들기
14:18 홈을 통해 실행.js
15:28 플레이어 보기 만들기
18:21 플레이어를 통해 실행.js
19:00 앱을 조정합니다.js
20:36 서버에 프런트엔드 요청을 연결
22:21 프론트 엔드에 넥타이 비디오
23:26 비디오 미리보기 이미지 만들기
25:11 청크에서 동적으로 동영상 제공
30:07 빠른 요약
31:49 FFMPEG 설치
33:47 캡션 추가
35:56 캡션 끝점 만들기
36:58 스타일 우리의 응용 프로그램
40:25 헤더 및 푸터 구성 요소 만들기
43:03 결론
리노드를 처음 사용하시나요? 여기에서 $100 크레딧으로 시작하세요!
React 비디오 스트리밍 앱 배포에 대한자세한 내용은 문서를 읽어보세요.
React에 대해 자세히 알아보세요.
여기에서 FFMPEG를 다운로드하세요.
새로운 에피소드가 나올 때마다알림을 받으려면 구독하세요.
#Linode #React #Video #Streaming
제품: Linode, 오픈 소스, 반응; 샘 호울리;