HTML5에서 RTSP 또는 RTP를 통한 스트리밍


150

서버 http://lscube.org/projects/feng 에서 RTSP / RTP 스트림을 재생 해야하는 웹 응용 프로그램을 만들고 있습니다.

HTML5 비디오 / 오디오 태그가 rtsp 또는 rtp를 지원합니까? 그렇지 않다면 가장 쉬운 해결책은 무엇입니까? 아마도 VLC 플러그인이나 그와 비슷한 것으로 드롭 다운 될 것입니다.


RTSP에서는 비디오 태그가 "작동"하지 않습니다. RTSP는 내가 아는 브라우저에서 기본적으로 구현되지 않습니다. 이미 알아 낸대로 플러그인이 필요합니다. 또는 Chrome 및 Firefox에서 기본적으로 지원하는 webRTC를 사용하면 일부 webRTC 논리와 함께 비디오 태그를 사용할 수 있습니다. IP 카메라와 같은 소스에서 스트리밍하려는 경우 Wowza와 같은 스트리밍 서비스를 사용하거나 RTSP에서 webRTC로 트랜스 코딩하십시오. 이것은 당신을위한 나의 충고입니다.
— Michael P


html5로 스트림을 얻을 수 있지만 어딘가로 스트리밍 할 수는 없다고 생각합니다.
— Salih Karagoz

좋은 질문입니다. 감사합니다. "저희는 videojs-flash를 통해 RTSP 만 지원하고 RTMP 만 지원하지 않습니다." -이것은 Video.js 미디어 플레이어의 주요 관리자의 답변입니다. 나는 주제를 연구하고 그것에 대한 좋은 해결책을 찾을 수 없습니다.
— zhibirc

WebRTC RTCPeerConnection을 사용하여 HTML 비디오 요소에서 RTSP (또는 RTSP가 설정 한 RTP 스트림)를 재생할 수 있습니다. 이전에는 webrtc.live555.com에 데모가 있었습니다 . 트릭은 필요한 WebRTC DTLS 및 SRTP 메커니즘을 추가 한 RTSP 서버를 찾는 것입니다.
— sipwiz

답변:


89

기술적으로 '예'

(그러나 실제로는 아닙니다 ...)

HTML 5의 <video>태그는 프로토콜에 구애받지 않으며 상관 없습니다. srcURL의 일부로 속성에 프로토콜을 배치합니다 . 예 :

<video src="rtp://myserver.com/path/to/stream">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

아니면

<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
    Your browser does not support the VIDEO tag and/or RTP streams.
</video>

즉, <video>태그 의 구현 은 브라우저마다 다릅니다. HTML 5의 초기 단계이기 때문에 자주 변경되는 지원 (또는 지원 부족)이 예상됩니다.

W3C의 HTML5 사양 ( 비디오 요소 )에서 :

사용자 에이전트는 모든 비디오 및 오디오 코덱 및 컨테이너 형식을 지원할 수 있습니다


3
업데이트 : 크롬에서 첫 번째 방법을 시도하고 얻었습니다 GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEME. video요소 에는 HTTP [S] 체계 만 허용되는 것 같습니다 .
— Yan Foto

HTTP를 통해 비디오를 전송하지 않고 RTP와 같은 프로토콜 만 사용합니까? TCP보다
— 훨씬

7
@markmnl 저것은 풍자입니까? (나는 말할 수 없다 ... 나는 그렇게 쓸모가 없다.) HTTP 전송은 몇 년 동안 웹을 통해 비디오를 전송하는 지배적 인 방법이다. 유튜브, 넷플릭스 등. 효율성의 문제가 아니라 단순성, 방화벽 통과, 캐시 서버 친 화성 등
— Stu Thompson

Netflix는 HTTP를 사용하여 비디오를 스트리밍합니까?! 비열한 일이 비디오를 스트리밍하는 비효율적 인 방법은 아닙니다.
— markmnl

6
@markmnl 후손을 위해 Netflix가 MS Silverlight와 함께 스트리밍하는 데 사용했지만 잠시 뒤로 물러났다는 것을 언급 할 가치가 있습니다. 2001 년부터 스트리밍에 참여한 사람으로서 처음에는 HTTP가 인계되는 것을보고 충격을 받았습니다. 지금은 쿨 에이드를 마시고 있습니다. 효율성이 중요한 회사 네트워크의 경우, 특히 멀티 캐스트와 같은 기능을 제공 할 수있는 경우 특수 목적 프로토콜 RTP가 표준입니다.
— Stu Thompson

55

제 생각에 그 질문의 정신은 진정으로 대답되지 않았습니다. 아니요, 현재로서는 비디오 태그를 사용하여 rtsp 스트림을 재생할 수 없습니다. Chromium 사용자의 'never'링크에 대한 다른 답변은 링크 된 스레드 / 응답이 동영상 태그를 통해 rtsp를 재생하는 Chrome을 직접 참조하지 않기 때문에 약간 오해의 소지가 있습니다. 링크 된 전체 스레드, 특히 맨 아래에있는 주석과 다른 스레드에 대한 링크를 읽으십시오.

실제 답변은 다음과 같습니다. 아니요, HTML 5 페이지에 비디오 태그를 넣고 rtsp를 재생할 수는 없습니다. 스트리밍 비디오를 재생하려면 일종의 Javascript 라이브러리를 사용해야합니다 (플래시 및 silverlight 플레이어로 음악을 재생하려는 경우 제외). {IMHO} html 5 비디오 토론 및 구현이 진행되는 속도에 따라 독점 비디오 표준의 다양한 공급 업체는 이러한 발전에 도움이되지 않으므로 브라우저 제작자가 제공하지 않는 한 비디오 태그의 사용 편의성을 고려하지 마십시오. 어떻게 든 문제를 해결하기 위해 스스로 해결해 보라. {/ IMHO}


1
좋은 의견 골프. 또한 엘벤이 성공하지 못한 일을하고 싶었습니다.
— will824

31

이것은 오래된 qustion이지만 최근에 직접 수행해야했고 무언가를 달성했습니다 (내 것과 같은 응답은 시간을 절약 할 수 있습니다) : 기본적으로 ffmpeg를 사용하여 컨테이너를 HLS, 대부분의 IPCam 스트림 h264 및 일부로 변경하십시오 PCM의 기본 유형이므로 다음과 같이 사용하십시오.

ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8

그런 다음 HLS 플러그인 과 함께 video.js 를 사용 하십시오. 이것은 라이브 스트림을 잘 재생할 것입니다. 두 번째 링크에는 jsfiddle 예제도 있습니다).

참고 : 이것은 기본 지원이 아니지만 사용자 프론트 엔드에 추가 항목이 필요하지 않습니다.


그것은 나를 위해, Videojs 내가 이미 사용하고 있었고이 HLS 플러그인은 m3u8 파일이있는 라이브 채널을 대부분의 URL에서 작동하게 만듭니다.
— Dheeraj Thedijje

도움이되어 기쁘지만 대기 시간이 조금 더 있지만 도움이 될 수는 없습니다.
— Pawel K

1
이 @Cesar 시도ffmpeg -v info -rtsp_transport tcp -i rtsp://host:port/[sdp] -c:v copy -c:a copy -maxrate 400k -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
— 파블 K

1
@Arter 기본적으로 Linux 상자 또는 원격 장치와 같은 서버 (명령 줄에서)에서이를 실행해야합니다. 현재 사용자 관점에서 / var / www / html / 폴더 (이 예에서는)에 액세스 할 수 있어야합니다. 또한 LAMP 스택 또는 The Uniform Server (많은 솔루션)를 사용하여 Windows에서이를 시도 할 수도 있습니다.
— Pawel K

1
이것은 나를 위해 일했습니다. 'hls_wrap'은 최신 ffmpeg에서 더 이상 사용되지 않습니다. 나는이 명령 행을 관심있는 사람에게 사용했다 :ffmpeg.exe -fflags nobuffer -rtsp_transport tcp -i rtsp://[SOURCE] -flags +cgop -g 30 -hls_flags delete_segments [DESTINATION]
— DanTheMan

19

Chrome은 RTSP 스트리밍 지원을 구현하지 않습니다.

적어도, 크롬 개발자의 말에 여기 :

우리는 이것에 대한 지원을 추가하지 않을 것입니다


4
거의 요 Chrome은 이미 RTSP 스트리밍을 지원하므로이 기능에 대한 지원을 추가하지 않을 것입니다.)
— Stefan Steiger

2
아니요, 크롬에서는 작동하지 않습니다. youtube rtsp 링크로 시도하면 작동하지 않습니다.
— IdidntKnewIt

18

HTML5에는 세 가지 스트리밍 프로토콜 / 기술이 있습니다.

라이브 스트리밍, 짧은 대기 시간-WebRTC-Websocket

VOD 및 라이브 스트리밍, 높은 대기 시간-HLS

1. WebRTC

실제로 WebRTC는 SRTP (secure RTP protocol)입니다. 따라서 비디오 태그는 WebRTC를 통해 간접적으로 RTP (SRTP)를 지원한다고 말할 수 있습니다.

따라서 Chrome, Firefox 또는 다른 HTML5 브라우저에서 RTP 스트림을 얻으려면 SRTP 스트림을 브라우저로 전달할 WebRTC 서버가 필요합니다.

2. 웹 소켓

TCP 기반이지만 HLS보다 대기 시간이 짧습니다. 다시 Websocket 서버가 필요합니다.

3. HLS

VOD (사전 녹화 된 비디오)에 가장 많이 사용되는 대기 시간이 긴 스트리밍 프로토콜입니다.


3
웹 소켓을 사용하여 라이브 오디오 + 비디오 스트림을 어떻게 재생합니까? 비디오의 유일한 방법은 Broadway.js를 사용하는 것이며 h264 nal 스트림을 사용하는 것은 매우 해킹입니다.
— mark gamache

1
HLS는 HTTP Live Streaming의 약자입니다. 왜 HLS가 VOD에 널리 사용되고 LOD가 아닌지 궁금합니다.
— shintaroid

1
WebSocket의 웹 브라우저에서 비디오를 재생할 수 없습니다. 최소한 상자 밖으로 나가지 마십시오.
— Michael IV

웹 소켓의 경우 -1이지만 사람들이 말하는 다른 모든 이유는 아닙니다. 웹 소켓을 통해 데이터를 수신하면 비디오를 절대 재생할 수 있습니다. 이것은 MediaSource Extensions와 함께 사소한 것입니다. HTTP Progressive를 바로 사용할 수 있기 때문에 그렇게해서는 안됩니다!
— 브래드

8

VLC를 사용하면 라이브 RTSP 스트림 (mpeg4)을 OGG 형식 (Vorbis / Theora)의 HTTP 스트림으로 트랜스 코딩 할 수 있습니다. 품질은 좋지 않지만 Chrome 9에서 비디오가 작동합니다. WEBM (VP8)의 코드 변환으로 테스트했지만 작동하지 않는 것 같습니다 (VLC에는 옵션이 있지만 실제로 구현되었는지는 알 수 없습니다). .)

이것에 대한 의사를 가진 첫 번째 사람은 우리에게 알려 주어야합니다.)


2
"C:\Program Files\VideoLAN\VLC\vlc.exe" -I dummy screen:// :screen-fps=16.000000 :screen-caching=100 :sout=#transcode{vcodec=theo,vb=800,scale=1,width=600,height=480,acodec=mp3}:http{mux=ogg,dst=127.0.0.1:8080/desktop.ogg} :no-sout-rtp-sap :no-sout-standard-sap :ttl=1 :sout-keep-VLC 명령으로 입력 (예 : 화면 캡처 장치)을 지정된 출력 스트림 (예 : 127.0.0.1:8080/desktop.ogg )으로 스트리밍
— Zsolt

1
비디오 태그에 삽입 할 수 있습니다 : <video id="video" src="http://localhost:8080/desktop.ogg" autoplay="autoplay">.
— Zsolt

2
그러나 불행히도 성능은 매우 좋지 않으며 MP4 컨테이너로도 수행 할 수 있다면 좋을 것입니다. AFAIK 더 많은 브라우저는 OGG보다 MP4를 지원합니다.
— Zsolt

1
그것은 나에게도 효과가있었습니다. my_ip:port주소에서 HTTP 프로토콜을 통해 오디오와 비디오를 모두 스트리밍하도록 VLC를 설정 했으며 HTML5 <video>태그를 다음과 같이 사용했습니다 <video width="640"><source src="http://my_ip:port/test" type="video/ogg">HTML5 not supported</video>.
— patryk.beza

1

HTML 5 비디오 태그 및 rtsp (rtp) 스트림에 대한 나의 관찰은 konqueror (KDE 4.4.1, Phonon 백엔드는 GStreamer로 설정)에서만 작동한다는 것입니다. H.264 / AAC RTSP (RTP) 스트림이있는 비디오 (오디오 없음) 만 받았습니다.

http://media.esof2010.org/ 의 스트림은 konqueror (KDE 4.4.1, Phonon-backend가 GStreamer로 설정 됨)와 작동하지 않았습니다.


1

Chrome은 RTSP 스트리밍 지원을 구현하지 않습니다. WebRTC를 확인하는 중요한 프로젝트.

"WebRTC는 간단한 API를 통해 브라우저 및 모바일 애플리케이션에 RTC (Real-Time Communications) 기능을 제공하는 무료 공개 프로젝트입니다."

지원되는 브라우저 :

Chrome, Firefox 및 Opera.

지원되는 모바일 플랫폼 :

안드로이드와 IOS

http://www.webrtc.org/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.