150

ฉันสร้าง app เว็บที่ควรเล่นกระแส RTSP / RTP จากเซิร์ฟเวอร์http://lscube.org/projects/feng

แท็กวิดีโอ / เสียง HTML5 สนับสนุน rtsp หรือ rtp หรือไม่ ถ้าไม่ทางออกที่ง่ายที่สุดคืออะไร อาจปล่อยลงปลั๊กอิน VLC หรืออะไรทำนองนั้น

— Elben Shira
แหล่งที่มา

แท็กวิดีโอไม่ได้ "ใช้งานได้" กับ RTSP และเบราว์เซอร์ใด ๆ ที่ฉันรู้ คุณจะต้องใช้ปลั๊กอินตามที่คุณคิดอยู่แล้ว หรือใช้ webRTC ซึ่งได้รับการสนับสนุนโดย Chrome และ Firefox และคุณจะสามารถใช้แท็กวิดีโอกับบาง webRTC logic หากคุณกำลังพยายามสตรีมจากแหล่งเช่นกล้อง IP ให้ใช้บริการสตรีมเช่น Wowza (หรือเขียนของคุณเอง) เพื่อแปลงรหัสจาก RTSP ไปยัง webRTC นี่คือคำแนะนำของฉันสำหรับคุณ

— Michael P

ฉันขอแนะนำให้ถามคำถามนี้ในStackOverflow สำหรับระบบมัลติมีเดีย

— Hamed

ฉันคิดว่าคุณสามารถรับสตรีมด้วย html5 ได้ แต่คุณไม่สามารถสตรีมไปที่อื่นได้

— Salih Karagoz

เป็นคำถามที่ดีขอบคุณ "ฉันเชื่อว่าเราไม่สนับสนุน RTSP เพียง RTMP ผ่าน videojs-flash" - นี่คือคำตอบของผู้ดูแลหลักของเครื่องเล่นสื่อ Video.js ฉันค้นหาเรื่องอีกครั้งและไม่สามารถหาทางออกที่ดีได้

— zhibirc

เป็นไปได้ที่จะใช้ WebRTC RTCPeerConnection เพื่อเล่น RTSP (หรือมากกว่านั้นอย่างถูกต้องสตรีม RTP ที่ RTSP ตั้งค่า) ในองค์ประกอบวิดีโอ HTML มีเคยเป็นความสนุกที่webrtc.live555.com เคล็ดลับจะค้นหาเซิร์ฟเวอร์ RTSP ที่ได้เพิ่ม emchanisms WebRTC DTLS และ SRTP ที่ต้องการ

— sipwiz

89

ในทางเทคนิค 'ใช่'

(แต่ไม่ใช่จริงๆ ... )

<video>แท็กของ HTML 5 เป็นผู้ไม่เชื่อเรื่องโปรโตคอล - มันไม่สนใจ คุณวางโปรโตคอลในsrcแอตทริบิวต์เป็นส่วนหนึ่งของ URL เช่น:

<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 ฉันคาดว่าการสนับสนุนที่เปลี่ยนแปลงบ่อยครั้ง (หรือขาดการสนับสนุน)

จากสเป็ค HTML5 ของ W3C ( องค์ประกอบวิดีโอ ):

ตัวแทนผู้ใช้อาจรองรับตัวแปลงสัญญาณวิดีโอและเสียงและรูปแบบคอนเทนเนอร์

— Stu Thompson
แหล่งที่มา

3

UPDATE : GET rtp://239.255.0.1:6970 net::ERR_UNKNOWN_URL_SCHEMEพยายามวิธีแรกในโครเมี่ยมและได้ ดูเหมือนว่าจะใช้ได้เฉพาะโครงร่าง HTTP [S] videoเท่านั้น

— Yan Foto

แน่นอนคุณจะไม่ถ่ายโอนวิดีโอผ่าน HTTP และใช้โปรโตคอลเช่น RTP เท่านั้นหรือ มันจะช้าชะมัดผ่าน TCP ..

— markmnl

7

@markmnl การเสียดสีนั่นคืออะไร? (ฉันไม่สามารถบอกได้ว่า ... ฉันใจง่ายเช่นนั้น) การรับส่ง HTTP เป็นวิธีการที่โดดเด่นสำหรับการถ่ายโอนวิดีโอผ่านเว็บในอีกไม่กี่ปีนี้ Youtube, Netflix และอื่น ๆ ไม่ใช่เรื่องของประสิทธิภาพ แต่ค่อนข้างเรียบง่ายการข้ามผ่านไฟร์วอลล์ความเป็นมิตรกับแคชของเซิร์ฟเวอร์และอื่น ๆ

— Stu Thompson

Netflix ส่งกระแสข้อมูลวิดีโอโดยใช้ HTTP! ไม่มีการเสียดสีดูเหมือนจะเป็นวิธีที่ไม่มีประสิทธิภาพในการสตรีมวิดีโอ

— markmnl

6

@markmnl เพื่อประโยชน์ของลูกหลานมันคุ้มค่าที่จะกล่าวถึงว่า Netflix เคยทำการสตรีมด้วย MS Silverlight แต่ทิ้งไว้ครู่หนึ่ง ในฐานะที่เป็นคนที่ได้รับสตรีมมิ่งมาตั้งแต่ปี 2544 ฉันเริ่มรู้สึกตกใจเมื่อเห็นว่า HTTP เข้าครอบงำ ตอนนี้ฉันกำลังดื่ม Kool Aid อยู่ ในเครือข่ายองค์กรที่มีประสิทธิภาพเรื่องโปรโตคอลที่สร้างขึ้นเพื่อวัตถุประสงค์ RTP เป็นบรรทัดฐานโดยเฉพาะเมื่อสามารถส่งมอบคุณสมบัติเช่นมัลติคาสต์

— Stu Thompson

55

ฉันคิดว่าวิญญาณของคำถามนั้นยังไม่ได้รับคำตอบอย่างแท้จริง ไม่คุณไม่สามารถใช้แท็กวิดีโอเพื่อเล่นสตรีม rtsp ได้ในตอนนี้ คำตอบอื่น ๆ เกี่ยวกับลิงก์ไปยัง "ไม่เคย" ของ Chromium เป็นเรื่องเข้าใจผิดเล็กน้อยเนื่องจากการเชื่อมโยงเธรด / คำตอบไม่ได้อ้างอิงโดยตรงกับ Chrome ที่กำลังเล่น rtsp ผ่านแท็กวิดีโอ อ่านเธรดที่ลิงก์ทั้งหมดโดยเฉพาะความคิดเห็นที่ด้านล่างสุดและลิงก์ไปยังเธรดอื่น

คำตอบที่แท้จริงคือ: ไม่คุณไม่สามารถใส่แท็กวิดีโอในหน้า html 5 และเล่น rtsp คุณต้องใช้ไลบรารี Javascript บางประเภท (เว้นแต่ว่าคุณต้องการเล่นสิ่งที่มีผู้เล่น flash และ silverlight) เพื่อเล่นวิดีโอสตรีมมิ่ง {IMHO} อัตราการสนทนาวิดีโอและ html 5 กำลังดำเนินไปผู้จำหน่ายวิดีโอมาตรฐานต่าง ๆ ไม่สนใจที่จะช่วยให้ก้าวไปข้างหน้านี้ดังนั้นอย่านับการใช้แท็กวิดีโอที่สะดวกตามสัญญาเว้นแต่ผู้สร้างเบราว์เซอร์ ลองคิดดูว่าจะแก้ปัญหาอย่างไร ... อีกครั้งไม่น่าเป็นไปได้ {/ IMHO}

— GolfARama
แหล่งที่มา

1

ความคิดเห็นที่ดีกอล์ฟ ฉันต้องการทำสิ่งที่ Elben ทำโดยไม่ประสบความสำเร็จ

— will824

31

นี่คือ qustion เก่า แต่ฉันต้องทำด้วยตัวเองเมื่อเร็ว ๆ นี้และประสบความสำเร็จบางอย่างทำงาน (นอกเหนือจากการตอบสนองเช่นฉันจะช่วยฉันบางเวลา): โดยทั่วไปใช้ ffmpeg เพื่อเปลี่ยนคอนเทนเนอร์เป็น HLS กระแส IPCams ส่วนใหญ่ 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

จากนั้นใช้video.jsกับปลั๊กอิน HLSซึ่งจะเล่นสตรีมสดเป็นอย่างดีนอกจากนี้ยังมีตัวอย่าง jsfiddle ภายใต้ลิงก์ที่สอง)

หมายเหตุ: แม้ว่านี่จะไม่ใช่การสนับสนุนแบบดั้งเดิม แต่ก็ไม่จำเป็นต้องมีอะไรเพิ่มเติมในส่วนหน้าของผู้ใช้

— Pawel K
แหล่งที่มา

มันใช้งานได้สำหรับฉันแล้ว 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

— Pawel K

1

@Arter โดยทั่วไปคุณต้องเรียกใช้บนเซิร์ฟเวอร์ของคุณ (จากบรรทัดคำสั่ง) เช่นกล่อง Linux หรือสิ่งที่ห่างไกล คุณต้องมีสิทธิ์เข้าถึง / var / www / html / โฟลเดอร์ (ในตัวอย่างนี้) จากมุมมองผู้ใช้ปัจจุบัน คุณสามารถลองทำบน windows ได้ด้วยความช่วยเหลือของ LAMP stack หรือ The Uniform Server (โซลูชันที่บางกว่า)

— 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 สตรีมมิง

อย่างน้อยในคำพูดของนักพัฒนา Chromium ที่นี่ :

เราจะไม่เพิ่มการสนับสนุนสำหรับสิ่งนี้

— janesconference
แหล่งที่มา

4

ก็เกือบแล้ว โครเมี่ยมแล้วสนับสนุน RTSP สตรีมมิ่งที่ว่าทำไมเขาไม่เคยจะเพิ่มการสนับสนุนสำหรับการนี้;)

— สเตฟานสไตเกอร์

2

ไม่คุณไม่สามารถทำให้มันทำงานได้ในโครเมี่ยมมันไม่ทำงานเมื่อลองกับลิงก์ youtube rtsp

— IdidntKnewIt

18

มีโปรโตคอล / เทคโนโลยีการสตรีมสามอย่างใน HTML5:

สตรีมมิงสด, เวลาแฝงต่ำ - WebRTC - Websocket

VOD และสตรีมสด, เวลาในการตอบสนองสูง - HLS

1. WebRTC

ในความเป็นจริง WebRTC เป็น SRTP (โปรโตคอล RTP ที่ปลอดภัย) ดังนั้นเราสามารถพูดได้ว่าแท็กวิดีโอรองรับ RTP (SRTP) ทางอ้อมผ่าน WebRTC

ดังนั้นเพื่อรับสตรีม RTP ใน Chrome, Firefox หรือเบราว์เซอร์ HTML5 อื่นคุณต้องมีเซิร์ฟเวอร์ WebRTC ซึ่งจะส่งสตรีม SRTP ไปยังเบราว์เซอร์

2. Websocket

มันใช้ TCP แต่มีความหน่วงแฝงต่ำกว่า HLS คุณต้องการเซิร์ฟเวอร์ Websocket อีกครั้ง

3. HLS

โปรโตคอลสตรีมมิ่งความล่าช้าสูงที่นิยมมากที่สุดสำหรับ VOD (วิดีโอที่บันทึกไว้ล่วงหน้า)

— ankitr
แหล่งที่มา

3

คุณเล่นสตรีมเสียง + วิดีโอแบบสดโดยใช้เว็บซ็อกเก็ตได้อย่างไร วิธีเดียวในการใช้วิดีโอคือการใช้ Broadway.js และนั่นเป็นการแฮ็กที่ค่อนข้างดีเมื่อใช้ h264 nal stream

— ทำเครื่องหมาย gamache

1

HLS ย่อมาจาก HTTP Live Streaming ฉันสงสัยว่าทำไม HLS จึงถูกใช้อย่างกว้างขวางสำหรับ VOD แต่ไม่ใช่ LOD

— shintaroid

1

คุณไม่สามารถเล่นวิดีโอในเว็บเบราว์เซอร์จาก WebSocket อย่างน้อยก็ไม่ออกนอกกรอบ

— Michael IV 4

-1 สำหรับเว็บซ็อกเก็ต ... แต่ไม่ใช่ด้วยเหตุผลอื่น ๆ ที่ผู้คนกำลังพูด คุณสามารถเล่นวิดีโอได้อย่างแน่นอนโดยรับข้อมูลผ่าน websocket นี่เป็นเรื่องเล็กน้อยโดยมีส่วนขยาย MediaSource คุณไม่ควรทำเพราะคุณสามารถใช้ HTTP Progressive ได้โดยตรง

— แบรด

8

ด้วย VLC ฉันสามารถแปลงรหัสสตรีมสด RTSP (mpeg4) เป็นสตรีม HTTP ในรูปแบบ OGG (Vorbis / Theora) คุณภาพไม่ดี แต่วิดีโอทำงานใน Chrome 9 ฉันได้ทดสอบด้วย trancoding ใน WEBM (VP8) แต่ดูเหมือนจะไม่ทำงาน (VLC มีตัวเลือก แต่ฉันไม่รู้ว่ามันใช้งานจริงหรือไม่ในตอนนี้ .)

คนแรกที่มีเอกสารเกี่ยวกับเรื่องนี้ควรแจ้งให้เราทราบ;)

— molokoloco
แหล่งที่มา

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 มีการรองรับ MP4 มากกว่า OGG

— Zsolt

1

มันก็ใช้ได้สำหรับฉันเช่นกัน ฉันได้ตั้ง VLC สำหรับการสตรีมทั้งเสียงและวิดีโอผ่านโปรโตคอล HTTP บนmy_ip:portที่อยู่และกว่าที่ฉันใช้ 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-backend ที่ตั้งค่าเป็น GStreamer) ฉันมีเฉพาะวิดีโอ (ไม่มีเสียง) ด้วยสตรีม H.264 / AAC RTSP (RTP)

สตรีมจากhttp://media.esof2010.org/ไม่ทำงานกับ konqueror (KDE 4.4.1 ชุดแบ็กเอนด์ Phonon เป็น GStreamer)

— Renegah
แหล่งที่มา

1

Chrome ไม่ได้ใช้การสนับสนุนการสตรีม RTSP โครงการที่สำคัญในการตรวจสอบ WebRTC

"WebRTC เป็นโครงการเปิดฟรีที่ให้บริการเบราว์เซอร์และแอปพลิเคชั่นมือถือที่มีความสามารถในการสื่อสารแบบเรียลไทม์ (RTC) ผ่าน API แบบง่าย"

เบราว์เซอร์ที่รองรับ:

Chrome, Firefox และ Opera

แพลตฟอร์มมือถือที่รองรับ:

Android และ IOS

http://www.webrtc.org/

— vrbsm
แหล่งที่มา

สตรีมมิ่งผ่าน RTSP หรือ RTP ใน HTML5

ในทางเทคนิค 'ใช่'