프런트엔드는 rtsp 비디오 스트림을 재생합니다(마지막으로 WebRtc 사용).
머리말:
연구실의 카메라 영상을 프런트 엔드 페이지에 소개해야 하는 프로젝트이기 때문에 몇 가지 일반적인 방법을 시도했지만 과정은 험난했지만 결과는 좋았습니다.
시도해 볼 사항:
-
RTSPtoWebRtc도구
RTSPtoWebRtc는 ice_serve로 구성되므로 LAN에서 비디오에 액세스할 수 없습니다.
-
nginx+FFmepg
초기 아이디어는 rtsp 스트림을 처리하여 rtmp로 변환하고 최종적으로 http 형식으로 액세스하는 것입니다. 그러나 며칠 동안 시도한 끝에 다음과 같은 단점을 발견했습니다.
- 실시간 비디오 사진은 지연 시간이 매우 길어서 약 10초의 지연이 발생합니다. GPU에서 디코딩한 후에도 여전히 6~7초의 지연이 있습니다.
- nginx의 http 구성에는 어느 정도 난이도가 있습니다(이게 제 문제인 것 같습니다). http 형태로 접근이 불가능해서 웹 페이지에 표시가 되지 않습니다.
우여곡절 끝에 WebRtc를 사용하기로 결정했습니다.
처음에는 이게 더 귀찮을 줄 알았는데, 더 일찍 시도하지 않은 걸 후회했어요...
1. WebRtc 다운로드
github：릴리스 · mpromonet/webrtc-streamer (github.com)
잘못된 것을 다운로드하지 않도록 주의하세요
2. webrtc-streamer 실행
다운로드 후 압축을 풀고 명령창을 열고 다음 명령을 실행합니다.
D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe -o -H 0.0.0.0:8000
D:\webrtc-streamer-v0.8.6-dirty-Windows-AMD64-Release\webrtc-streamer.exe절대 경로는 어디에 있습니까?
-o: 트랜스코딩이 필요 없으며 CPU를 줄입니다.
-H: 포트 번호 지정
그런 다음 브라우저에서 127.0.0.1:8001/webrtcstreamer.html?video=rtsp://192.168.10.112:8557/h264 에 액세스합니다.
rtsp를 수정하는 것을 잊지 마세요
3. Vue 소개
webrtc-streamer 다운로드 패키지의 html 폴더에 있는 webrtcstreamer.js 파일과 html/libs 폴더에 있는 Adapter.min.js 파일을 VUE 프로젝트의 public 디렉터리에 복사합니다. 그리고 index.html 파일에 이 두 개의 js 파일을 추가하세요. 형식은 다음과 같습니다.
<script src="<%= BASE_URL %>adapter.min.js"></script>
<script src="<%= BASE_URL %>webrtcstreamer.js"></script>
4. 페이지 작성
다음 코드는 직접 복사하여 붙여넣고 필요에 따라 수정할 수 있습니다.
<template>
<div>
<video id="video" autoplay width="500" height="300"></video>
</div>
</template>
<script>
export default {
name: 'index1',
data() {
return {
webRtcServer: null
}
},
mounted() {
//video：需要绑定的video控件ID
//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
//需要查看的rtsp地址，记得修改rtsp地址
this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
},
beforeDestroy() {
this.webRtcServer.disconnect()
this.webRtcServer = null
},
methods: {
}
}
</script>
<style scoped></style>
5. 운영결과
참조 링크:
VUE+webrtc-streamer는 실시간 비디오 재생을 실현합니다(모니터링 장치-rtsp)_vue webrtc-streamer-CSDN 블로그
[Vue2 + webrtc-steamer] rtsp 스트림은 Web에서 실시간으로 재생됩니다_Is webrtc-streamer stable-CSDN 블로그