RTSP 비디오 재생을 위한 HTML5 예제 코드

현재 대부분의 웹 카메라는 RTSP 프로토콜을 통해 비디오 스트림을 전송하지만 HTML은 표준적으로 RTSP 스트림을 지원하지 않습니다. RTSP 스트림을 직접 재생할 수 있는 Firefox 브라우저를 제외하고는 거의 다른 브라우저에서 RTSP 스트림을 직접 재생할 수 없습니다. Electron 애플리케이션은 Chromium 커널을 기반으로 하므로 RTSP 스트림을 직접 재생할 수 없습니다.

특정 도구를 사용하면 RTSP 스트림을 웹 페이지에서 재생할 수 있습니다. 본 글에서 소개하는 방법은 기존 웹 애플리케이션과 Electron 애플리케이션 모두에 적용 가능하다. 유일한 차이점은 Electron 애플리케이션의 주요 프로세스가 기존 웹 애플리케이션의 서버로 사용된다는 점이다.

생방송이라 딜레이가 낮아야 합니다. 카메라가 오프라인 상태가 되면 특정 이벤트 프롬프트도 표시되어야 합니다. 이 두 가지 점에서는 라이선스를 구매하지 않고 구현한 기존 RTSP 재생 솔루션을 비교해 보겠습니다(원칙 단계에서는 당분간 분석하지 않습니다).

네 가지 방법을 모두 구현했는데, 네 번째 방법이 전체적인 효과가 가장 좋습니다. 포트를 덜 차지하고, 지연 시간이 짧고, 렌더링 속도가 빠르고, 오프라인 이벤트를 처리하기 쉽습니다.

flv.js는 Bilibili의 오픈 소스 HTML5 브라우저입니다. 비디오 재생을 위해 Media Source Extension을 사용하면 비디오는 HTTP-FLV 또는 WebSocket-FLV 프로토콜을 통해 전송되며 비디오 형식은 FLV 형식이어야 합니다.

서버 측은 express + express-ws 프레임워크를 사용하여 작성됩니다. HTTP 요청이 지정된 주소로 전송되면 ffmpeg 스트리밍 프로그램이 시작되고 RTSP 스트림이 FLV 형식의 비디오 스트림으로 직접 캡슐화되어 지정된 WebSocket 응답 스트림.

 * express에서 express로 가져오기;import * express-ws에서 expressWebSocket으로 가져오기;fluent-ffmpeg에서 ffmpeg 가져오기;websocket-stream/stream에서 webSocketStream 가져오기;websocket-stream에서 WebSocket 가져오기;* http에서 http로 가져오기;function localServer() { app = express(); express.static(__dirname)); perMessageDeflate: true }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888) console.log(express listening)}function rtspRequestHandle(ws, req) { console.log(rtsp 요청 핸들) ; const 스트림 = webSocketStream(ws, { 바이너리: true, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); let url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); , tcp, -buffer_size, 102400) // 여기에 RTSP를 추가할 수 있습니다. 최적화된 매개변수.on(start, function () { console.log(url, Stream start.); }) .on(codecData, function () { console.log(url, Stream codecData.) // 카메라 온라인 처리} ) .on(error, function (err) { console.log(url, 오류가 발생했습니다: , err.message); }) .on(end, function () { console.log(url, Stream end!); // 카메라 연결 끊김 처리}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream) } catch (error) { console.log(error) }}

로딩 시간을 단축하려면 ffmpeg에 다음 매개변수를 추가할 수 있습니다.

• 분석을 통해 코드 스트림을 구문 분석하는 데 필요한 시간을 줄일 수 있습니다.
• 데이터에 기록된 max_delay의 구체적인 기능은 잘 기억나지 않습니다. 그 효과는 분석만큼 명확하지 않습니다.

물론 이 구현은 여전히 ​​상대적으로 거칠다. 동일한 주소에 대한 요청이 여러 개 있는 경우 새 ffmpeg 프로세스 스트림을 시작하는 대신 ffmpeg의 출력을 늘려야 합니다.

이 예제에서는 페이지 디자인에 Vue 프레임워크를 사용합니다.

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>flv.js에서 flvjs 가져오기; 기본값 내보내기 { props: { rtsp: 문자열, ID : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mount () { if (flvjs.isSupported()) { let video = this.$refs.player; if (비디오) { this.player = flvjs.createPlayer({ type: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(video); this.player.load(); this.player.play(); } catch (error) { console.log(error) } } } }, beforeDestroy() { this.player.destory(); /script><style> .demo-video { 최대 너비: 480px, 최대 높이: 360px }</style>

Electron 페이지는 낮은 대기 시간, 낮은 CPU 사용량 및 화면 왜곡을 달성할 수 있는 7대의 Hikvison NVR 카메라를 표시하는 데 사용됩니다. 기밀 유지로 인해 여기에는 스크린샷을 게시하지 않겠습니다.

같은 방법으로 로컬 1080p 비디오 "White Deer Plain" 9개를 재생하여 효과를 확인했습니다.

재생 효과는 매우 좋고, 렉이나 블러도 전혀 없고, CPU 사용량도 높지 않습니다.

샘플 코드 저장소: WhuRS-FGis/html5-rtsp 샘플 코드 저장소:

위는 편집자가 소개한 HTML5에서 RTSP 비디오를 재생하는 예제 코드입니다. 궁금한 사항이 있으면 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!

이 글이 도움이 되셨다면 재인쇄하셔도 좋고, 출처를 밝혀주시면 감사하겠습니다!