on
웹에서 IP 카메라 스트리밍 하기
웹에서 IP 카메라 스트리밍 하기
카메라는 공유기 포트포워딩해서 RTSP로 접속해서 데이터를 가져오고 있는 상태
찾아보면서 너무 오래된 답변이 많아서 고생했다.
목차
- VLS 해보기
- 이것저것 찾아보기
- FFMPEG로 RTSP를 HLS로 변환하여 배포
- 기존 서비스와 통합
VLS 해보기
처음 원했던 건 서버를 들리지 않고 카메라와 웹브라우저를 직접 연결하는 것이었다.
처음 나온건 VLS로 하는 방법
정말 많은 글들이 VLS를 솔루션으로 보여주는데 찾다보면 크롬45부터 지원안한다고 한다.
그리고 이렇게 하는게 ActiveX 방식이라고 한다. 지금은 대부분의 브라우저에서 구동이 불가능할것으로 생각됨
RTSP를 지원하는 브라우저가 없어서 이걸 우회하는데 ActiveX나 플러그인 등이 사용되는것으로 보인다.
돌아다니다 보면 뭐가 잘 안되는데 이 답변(cab파일 링크가 잘못됨)을 보고 codebase를 수정했더니 뭔가 되기는 한다.
https://stackoverflow.com/questions/11591918/vlc-player-embed-code-not-working-in-ie
기존 : "http://download.videolan.org/pub/videolan/vlc/last/win32/axvlc.cab"
변경 : "https://download.videolan.org/vlc/0.8.2/win32/axvlc.cab"
경로 접속했을때 이런식으로 파일이 나와야 한다.
아래 코드는 HTML 넣는건데 여기저기 찾아보니 IE랑 IE가 아닐때 아래 코드는 모양이 조금 다르다고 한다.
크롬에서 실행 결과, 옛날 IE에서는 뭔가 실행되는거 같더니 신뢰할수 없는 프로그램이라고 실행 불가하다는 메시지가 뜬다.
이것저것 찾아보기
https://stackoverflow.com/questions/1735933/streaming-via-rtsp-or-rtp-in-html5
1. Power K의 답변. ffmpeg로 RTSP를 HLS로 변환해서 video.js로 클라이언트에서 읽어들인다는 이야기
ffmpeg를 쓴다. 서버는? 있어야되나보다.
2. ffmpeg를 클라이언트에서 달 수 없나? ffmpeg.wasm이라는게 있다.
ffmpeg 실행을 웹 어셈블리로 웹 클라이언트에서 바로 해버리는 것
하지만 애석하게도 아직 RTSP는 지원 목록에 포함되어 있지 않다.
https://github.com/ffmpegwasm/ffmpeg.wasm
https://github.com/ffmpegwasm/ffmpeg.wasm/issues/61
아래는 현재 지원되는 목록
3. WebRTC에 눈을 돌린다.
크롬에 빌트인 돼 있는 기능이라고 해서 한번 써보려고 했다.
읽어보다보니 P2P 통신인가?? 싶어서 그러면 카메라랑 웹브라우저랑 바로 붙을수 있나?
하고 열심히 찾아봤는데 두번째 링크를 보니 결국 서버가 나온다.
https://medium.com/@hyun.sang/webrtc-webrtc%EB%9E%80-43df68cbe511
https://flashphoner.com/browser-based-webrtc-stream-from-rtsp-ip-camera-with-low-latency/
4. RTSP를 직접 연결하는건 불가능하다는 사실을 알았다.
https://aljjabaegi.tistory.com/560
명확하게 안된다고 해줘서 좋았다. VLS도 IE에서는 된다고 하는데 거기서만 돼도 문제다.
5. 이제 클라이언트로만 하는것을 포기하고 서버 예시를 찾아본다.
https://webnautes.tistory.com/1476
아래 링크는 노드에서 ffmpeg를 돌려서 웹소켓으로 HLS를 뿌리는거 같은데 회사에서 노드 쓰는사람이 없어서 부담
6. 실행파일로 제공되는 rtsp server가 깃헙에 있었다.
https://realapril.tistory.com/41
이글을 읽고 찾았는데 이분은 rtsp를 직접 뿌리는 서버를 만드시는거 같다.
FFMPEG로 RTSP를 HLS로 변환하여 배포
찾은 깃헙은 이것
릴리즈로 가서 다운받으면 exe 실행파일과 yaml 설정파일 두개가 들어있다.
설정을 바꿔주면 되는거 같다.
https://github.com/aler9/rtsp-simple-server
https://golangrepo.com/repo/aler9-rtsp-simple-server-go-server-applications#convert-streams-to-hls
여기 보면 더 자세한 설정 방법이 나오는데 딱 내가 필요한 부분이 있다.
convert streams to HLS 파트를 보면 된다. 보면 rtsp를 ffmpeg를 써서 HLS로 뿌려주는거 같다.
설명에도 웹페이지에 라이브스트리밍을 embed할수 있다고 나옴.
https://dev.to/tejasvi2/rtsp-stream-to-web-browser-using-ffmpeg-1cb
이 글에 정확히 내가 원하는 내용이 들어있다.
웹캠을 웹페이지에 띄울때 가장 좋은 방법은 RTSP를 HLS로 바꿔서 뿌리는 것
서버는 이미 구했고 클라이언트 관련 내용을 참조하면 되겠다.
기존 서비스와 통합
위 내용들을 아직 테스트는 안해봤지만(내 업무는 아니라서) 될거같은데
기존 서버가 아니라 별도 서버로 구동되는게 아쉽다.
기존 스프링 서버에 붙일수 있는 방법이 없을까?
찾아보기로 했다.
netty에서도 RTSP를 지원한다고 한다.
아래 스택오버플로우 글을 보면 JMF라는게 나오고 이건 너무 오래된 기술이라고 다른거 없냐는 질문에
Netty가 RTSP를 지원한다는 답변이 있다.
https://stackoverflow.com/questions/820888/java-rtsp-client-server-library
https://netty.io/
http://mobicents-media-server.blogspot.com/2010/02/rtsp-supported-by-jboss-netty.html
너무 복잡하게 생각한 부분이 있다.
질문자는 서버에서 FFMPEG로 RTMP(RTSP는 아니지만 상관없다.)를 HLS로 변환했고 그 파일을 클라이언트에 스트리밍 하고 싶은데 어떻게 하면 되냐고 물어본다.
답변을 보면
너무 복잡하게 생각했음을 알게 된다.
HLS로 파일을 자르고 나면 그냥 영상 조각을 호스팅하는 느낌으로 변하나보다.
https://stackoverflow.com/questions/62547650/how-can-i-broadcast-hls-in-java
더 좋은걸 찾았다.
뭐 해봐야 아는거지만 설명만 보면 기존 시스템에 통합이 가능하다고 한다.
기존 서비스에 통합 가능하면서 브라우저의 rtsp 스트리밍 문제를 해결한다.
https://github.com/Roverr/rtsp-stream
from http://qodbtn.tistory.com/392 by ccl(A) rewrite - 2021-12-09 12:00:44