반응형 Next4 Next와 ffmpeg로 rtsp 출력하기 저번 화재 관제 시스템을 출력할때는 node-rtsp 라이브러리를사용했는데 뭔가 안정성이 떨어진다는 느낌을 받았다. 이번에 다른 프로젝트는 조금 다른방법으로 시도 하였고 ws가 아닌 http/https 방식을 사용하고 mp4로 변환 후 사용하는 클라이언트에서 도메인을 연결하고 렌더하는 방식으로 진행하였다. 바로 코드로 설명해보자클라이언트'use client';import { useEffect, useState } from 'react';const Rtsp = () => { const [videoRefs, setVideoRefs] = useState[] >([]); const [streamUrls, setStreamUrls] = useState([]); const [streamNames, setSt.. 2024. 8. 27. next/dynamic과 Lazy Loading을 알아보자 서버사이드 렌더링을 하는데 클라이언트사이드 렌더링 환경에서만 돌아가는 코드를 실행해보려고 한 적 있으신가요?!오류를 만납니다 빨강빨강!!!! 이런 경우에 next/dynamic 패키지를 사용해 레이지 로딩 처리하면 간단하게 해결 가능해요!!! 알아보죠!Lazy Loading리소스를 필요한 경우에만 불러오는 전략필요한 경우에만 불러오기 때문에 초기 로딩 속도를 향상시킬 수 있다.!ex) 이미지가 100장 있다고 친다면 100장을 다 불러오려고 하는데 사용자 경험이 매우 나빠질 것이다.하지만 사용자가 보는 가시영역만 불러온다면? 속도가 빠를 수 있을 것이다.이런식으로 필요할 때 불러오는게 Lazy Loading 이미지나 라이브러리 컴포넌트 단위로도 Lazy Loading이 가능하다.필요 시 로드사용자가 특정.. 2024. 6. 13. 실시간 스트리밍 출력하기 RTSP / WS RTSP(Real-Time Streaming Protocol) 실시간 데이터 전송을 위한 네트워크 프로토콜 RTSP 프로토콜은 오디오나 비디오와 같은 미디어 데이터를 실시간으로 스트리밍할 때 주로 사용(나의 경우 실시간 스트리밍) RTSP 주요 특징 제어 기능 RTSP는 VCR과 같은 제어 기능을 제공 클라이언트는 서버에게 미디어 스트림의 재생, 일시정지, 정지, 앞으로 빨리감기, 뒤로 빨리감기와 같은 요청 가능 실시간 전송 미디어 데이터는 실시간으로 전송되고 재생 라이브 방송이나 실시간 모니터링 등의 용도로 사용 서버-클라이언트 구조 RTSP는 서버-클라이언트 구조 클라이언트는 RTSP 요청을 통해 서버에게 미디어 스트림의 제어를 요청 서버는 이에 응답하여 요청된 작업을 수행 다양한 전송 프로토콜 지원.. 2023. 12. 12. 넥스트 getServerSideProps / getStaticProps / getStaticPaths 버전이 14까지 나왔다던디... 너무 빠르다 천천히 공부 하는 중! getServerSideProps getServerSideProps는 서버 사이드 렌더링을 위한 Next.js의 데이터 가져오기 함수 이 함수는 각 요청마다 서버에서 실행되며, 요청 시점의 데이터를 페이지에 주입 매 요청마다 결과가 달라질 수 있는 데이터를 다루는데 적합 export async function getServerSideProps(context) { // 데이터를 가져오는 코드 return { props: { /* 페이지 컴포넌트에 전달될 props */ }, }; } 또한 context 매개변수를 받는데, context 객체는 다음과 같은 속성을 포함 params: 동적 라우트의 매개변수를 포함 req: IncomingMe.. 2023. 11. 21. 이전 1 다음 반응형
