คำอธิบายโดยละเอียดเกี่ยวกับแนวคิดในการใช้ฟังก์ชันการถ่ายทอดสดวิดีโอใน HTML5

ไม่นานมานี้ ฉันใช้เวลาค้นคว้าและสำรวจเกี่ยวกับการถ่ายทอดสดวิดีโอยอดนิยมในปัจจุบัน ทำความเข้าใจขั้นตอนการใช้งานโดยรวม และสำรวจความเป็นไปได้ของการถ่ายทอดสด HTML5 บนมือถือ

พบว่าโซลูชันการถ่ายทอดสดผ่านวิดีโอกระแสหลักในปัจจุบันคือ HLS และ RTMP ปัจจุบัน WEB บนมือถือนั้นใช้ HLS (HLS มีปัญหาด้านเวลาแฝง และ RTMP ก็สามารถนำมาใช้ด้วยความช่วยเหลือของ video.js) ในขณะที่ ฝั่งพีซีนั้นใช้ RTMP ซึ่งมีประสิทธิภาพแบบเรียลไทม์ที่ดีกว่า จากนั้นเราจะเริ่มแชร์ธีมการถ่ายทอดสด H5 เกี่ยวกับโปรโตคอลการสตรีมวิดีโอทั้งสองนี้

HTTP Live Streaming (เรียกสั้น ๆ ว่า HLS) เป็นโปรโตคอลการสตรีมวิดีโอบน HTTP ที่ Apple ใช้งาน QuickTime และ Safari บน Mac OS และ Safari บน iOS ล้วนรองรับ HLS เวอร์ชันที่สูงกว่าเช่นกัน ไคลเอนต์ทั่วไปบางตัวเช่น MPlayerX และ VLC ยังรองรับโปรโตคอล HLS อีกด้วย

โปรโตคอล HLS นั้นใช้ HTTP และเซิร์ฟเวอร์ที่ให้บริการ HLS ต้องทำสองสิ่ง:

การเข้ารหัส: เข้ารหัสรูปภาพในรูปแบบ H.263 เข้ารหัสเสียงในรูปแบบ MP3 หรือ HE-AAC และสุดท้ายบรรจุลงในคอนเทนเนอร์ MPEG-2 TS (Transport Stream) แยก: ตัดไฟล์ TS ที่เข้ารหัสให้มีความยาวเท่ากัน เป็นไฟล์ขนาดเล็กที่มีส่วนต่อท้าย ts และสร้างไฟล์ดัชนีข้อความธรรมดา .m3u8 เบราว์เซอร์ใช้ไฟล์ m3u8 m3u8 คล้ายกับรูปแบบรายการเสียง m3u มาก คุณสามารถนึกถึง m3u8 ว่าเป็นเพลย์ลิสต์ที่มีไฟล์ ts หลายไฟล์ ผู้เล่นจะเล่นทีละไฟล์ตามลำดับ จากนั้นขอไฟล์ m3u8 หลังจากเล่นทั้งหมด และรับเพลย์ลิสต์ที่มีไฟล์ ts ล่าสุดเพื่อเล่นต่อ และวงจรก็จะเริ่มต้นอีกครั้ง กระบวนการถ่ายทอดสดทั้งหมดอาศัย m3u8 ที่อัปเดตอยู่ตลอดเวลา และไฟล์ ts ขนาดเล็กจำนวนหนึ่งจะต้องได้รับการอัปเดตแบบไดนามิก และ ts สามารถผ่าน CDN ได้ รูปแบบไฟล์ m3u8 โดยทั่วไปจะเป็นดังนี้:

 #EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=200000gear1/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=311111gear2/prog_index.m3u8#EXT-X -STREAM -INF:รหัสโปรแกรม=1, BANDWIDTH=484444gear3/prog_index.m3u8#EXT-X-STREAM-INF:PROGRAM-ID=1, BANDWIDTH=737777gear4/prog_index.m3u8

จะเห็นได้ว่าแก่นแท้ของโปรโตคอล HLS ยังคงเป็นคำขอ/ตอบกลับ HTTP เดียว ดังนั้นจึงมีความสามารถในการปรับตัวที่ดีและจะไม่ได้รับผลกระทบจากไฟร์วอลล์ แต่ก็มีจุดอ่อนร้ายแรงเช่นกัน: ความล่าช้านั้นชัดเจนมาก หากแต่ละ ts แบ่งออกเป็น 5 วินาทีและหนึ่ง m3u8 มีดัชนี 6 ts จะทำให้เกิดความล่าช้าอย่างน้อย 30 วินาที หากคุณลดความยาวของแต่ละ ts และลดจำนวนดัชนีใน m3u8 ความล่าช้าจะลดลงอย่างแน่นอน แต่จะทำให้เกิดการบัฟเฟอร์บ่อยขึ้น และความกดดันในการร้องขอบนเซิร์ฟเวอร์ก็จะเพิ่มขึ้นแบบทวีคูณเช่นกัน ดังนั้นเราจึงสามารถหาจุดประนีประนอมตามสถานการณ์จริงเท่านั้น

สำหรับเบราว์เซอร์ที่รองรับ HLS เพียงเขียนสิ่งนี้เพื่อเล่น:

 <video src=./bipbopall.m3u8″ height=300″ width=400″ preload=auto autoplay=autoplay loop=loop webkit-playsinline=true></video>

หมายเหตุ: HLS รองรับเฉพาะเบราว์เซอร์ซาฟารีบนพีซี คล้ายกับเบราว์เซอร์ Chrome ที่ใช้วิดีโอ HTML5

แท็กไม่สามารถเล่นรูปแบบ m3u8 ได้ คุณสามารถใช้วิธีแก้ปัญหาที่ค่อนข้างสมบูรณ์ได้โดยตรงบนอินเทอร์เน็ต เช่น sewise-player, MediaElement, videojs-contrib-hls และ jwplayer

Real Time Messaging Protocol (เรียกสั้น ๆ ว่า RTMP) คือชุดของโปรโตคอลการถ่ายทอดสดทางวิดีโอที่พัฒนาโดย Macromedia และปัจจุบันเป็นของ Adobe โซลูชันนี้จำเป็นต้องสร้างบริการสตรีม RTMP เฉพาะทาง เช่น Adobe Media Server และมีเพียง Flash เท่านั้นที่สามารถใช้เพื่อใช้งานโปรแกรมเล่นในเบราว์เซอร์ ประสิทธิภาพแบบเรียลไทม์นั้นดีมากและมีความล่าช้าน้อยมาก แต่ข้อบกพร่องคือไม่สามารถรองรับการเล่นเว็บบนมือถือได้

แม้ว่าจะไม่สามารถเล่นบนหน้า H5 ของ iOS ได้ แต่คุณสามารถเขียนการถอดรหัสและการแยกวิเคราะห์ของคุณเองสำหรับแอปพลิเคชัน iOS ดั้งเดิมได้ มีความหน่วงต่ำและประสิทธิภาพแบบเรียลไทม์ที่ดี ฝั่งเบราว์เซอร์ วิดีโอ HTML5

แท็กไม่สามารถเล่นวิดีโอโปรโตคอล RTMP ซึ่งสามารถทำได้ผ่าน video.js

 <link href=http://vjs.zencdn.net/5.8.8/video-js.css rel=stylesheet><video id=example_video_1″ class=video-js vjs-default-skin ควบคุม preload=auto width=640 height=264 loop=loop webkit-playsinline><source src=rtmp://10.14.221.17:1935/rtmplive/home type='rtmp/flv '></video><script src=http://vjs.zencdn.net/5.8.8/video.js>< /script><script>videojs.options.flash.swf = 'video.swf ';videojs('example_video_1′).ready(function() {this.play();});</script>

ในปัจจุบัน รูปแบบการแสดงการถ่ายทอดสดมักจะถูกครอบงำโดยหน้าต่างๆ เช่น YY Live และ Yingke Live คุณจะเห็นว่าโครงสร้างสามารถแบ่งออกเป็นสามชั้น:

1 เลเยอร์วิดีโอพื้นหลัง

② โมดูลติดตามและแสดงความคิดเห็น

3 ชอบแอนิเมชั่น

H5 ปัจจุบันมีความคล้ายคลึงกับเพจถ่ายทอดสด และการนำไปใช้งานนั้นไม่ยากในทางเทคนิค โดยสามารถแบ่งออกเป็น:

1 พื้นหลังวิดีโอที่ด้านล่างใช้แท็กวิดีโอในการเล่น

2 โมดูลติดตามและแสดงความคิดเห็นใช้ WebScoket เพื่อส่งและรับข้อความใหม่แบบเรียลไทม์ผ่าน DOM และ CSS3

3 กดไลค์และใช้แอนิเมชั่น CSS3

หลังจากเข้าใจรูปแบบการถ่ายทอดสดแล้ว เรามาทำความเข้าใจขั้นตอนการถ่ายทอดสดโดยรวมกันดีกว่า

กระบวนการถ่ายทอดสดโดยรวมสามารถแบ่งคร่าวๆ ได้เป็น:

สิ้นสุดการรวบรวมวิดีโอ: อาจเป็นอุปกรณ์อินพุตเสียงและวิดีโอบนคอมพิวเตอร์ หรือกล้องหรือไมโครโฟนบนโทรศัพท์มือถือ ปัจจุบันวิดีโอจากโทรศัพท์มือถือเป็นวิดีโอหลัก

เซิร์ฟเวอร์วิดีโอสตรีมสด: เซิร์ฟเวอร์ Nginx รวบรวมสตรีมวิดีโอ (การเข้ารหัส H264/ACC) ที่ส่งโดยจุดสิ้นสุดการบันทึกวิดีโอ แยกวิเคราะห์และเข้ารหัสบนฝั่งเซิร์ฟเวอร์ และพุชสตรีมวิดีโอรูปแบบ RTMP/HLS ไปยังจุดสิ้นสุดการเล่นวิดีโอ

เครื่องเล่นวิดีโอ: อาจเป็นเครื่องเล่นบนคอมพิวเตอร์ (QuickTime Player, VLC) เครื่องเล่นเนทีฟบนโทรศัพท์มือถือ หรือแท็กวิดีโอของ H5 เป็นต้น ปัจจุบันเครื่องเล่นเนทีฟบนโทรศัพท์มือถือเป็นเครื่องเล่นหลัก

(กลุ่มแลกเปลี่ยนการเรียนรู้เว็บส่วนหน้า: 328058344 ห้ามแชท หากไม่สนใจกรุณาอย่าเข้ามา!)

สำหรับการบันทึกวิดีโอ H5 คุณสามารถใช้ webRTC (การสื่อสารแบบเรียลไทม์ผ่านเว็บ) ซึ่งเป็นเทคโนโลยีที่รองรับเว็บเบราว์เซอร์สำหรับการสนทนาด้วยเสียงหรือการสนทนาทางวิดีโอแบบเรียลไทม์ ข้อเสียคือรองรับเฉพาะ Chrome บนพีซีเท่านั้น และไม่ค่อยดีนักบนอุปกรณ์เคลื่อนที่

กระบวนการพื้นฐานในการบันทึกวิดีโอโดยใช้ webRTC

1. โทรไปที่ window.navigator.webkitGetUserMedia()

รับข้อมูลวิดีโอจากกล้องพีซีของผู้ใช้

2 แปลงข้อมูลสตรีมวิดีโอที่ได้รับเป็น window.webkitRTCPeerConnection

(รูปแบบข้อมูลการสตรีมวิดีโอ)

3. ใช้ WebScoket

ส่งข้อมูลสตรีมมิ่งวิดีโอไปยังเซิร์ฟเวอร์

สังเกต:

แม้ว่า Google จะส่งเสริม WebRTC และมีผลิตภัณฑ์สำหรับผู้ใหญ่จำนวนมากปรากฏขึ้น แต่เบราว์เซอร์มือถือส่วนใหญ่ยังไม่รองรับ webRTC (iOS 10.0 ล่าสุดไม่รองรับ) ดังนั้นการบันทึกวิดีโอจริงยังคงขึ้นอยู่กับไคลเอนต์ (iOS, Android) ผลที่ตามมา จะดีกว่า.

รองรับ WebRTC

รองรับ WebRTC

แอปพลิเคชันเนทิฟ iOS เรียกกล้องเพื่อบันทึกกระบวนการวิดีโอ

1 สำหรับการรวบรวมเสียงและวิดีโอ สามารถรวบรวมสตรีมข้อมูลเสียงและวิดีโอต้นฉบับได้โดยใช้ AVCaptureSession และ AVCaptureDevice

② เข้ารหัส H264 สำหรับวิดีโอและ AAC สำหรับเสียง มีไลบรารีการเข้ารหัสแบบห่อหุ้ม (การเข้ารหัส x264, การเข้ารหัส faac, การเข้ารหัส ffmpeg) ใน iOS เพื่อเข้ารหัสเสียงและวิดีโอ

3. รวบรวมข้อมูลเสียงและวิดีโอที่เข้ารหัสไว้ในแพ็กเก็ต

④ สร้างการเชื่อมต่อ RTMP และพุชไปยังเซิร์ฟเวอร์

5.สร้างอึ้ง

ติดตั้ง nginx, nginx-rtmp-โมดูล

1. ขั้นแรกให้ทำการโคลนโปรเจ็กต์ nginx ในเครื่อง:

ชงแตะ homebrew/nginx

2. ดำเนินการและติดตั้งโมดูล nginx-rtmp

ชงติดตั้ง nginx-full –with-rtmp-module

2. ไฟล์การกำหนดค่า nginx.conf กำหนดค่า RTMP และ HLS

ค้นหาไฟล์การกำหนดค่า nginx.conf (path/usr/local/etc/nginx/nginx.conf) และกำหนดค่า RTMP และ HLS

1) เพิ่มเนื้อหาการกำหนดค่า rtmp ก่อนโหนด http:

② เพิ่มการกำหนดค่า hls ใน http

รีสตาร์ทบริการ nginx ป้อน http://localhost:8080 ในเบราว์เซอร์ และตรวจสอบว่าอินเทอร์เฟซต้อนรับปรากฏขึ้นหรือไม่ เพื่อยืนยันว่า nginx รีสตาร์ทได้สำเร็จ

nginx -s รีโหลด

เมื่อเซิร์ฟเวอร์ได้รับสตรีมวิดีโอที่ส่งมาจากจุดสิ้นสุดการบันทึกวิดีโอ เซิร์ฟเวอร์จะต้องแยกวิเคราะห์และเข้ารหัสและพุชสตรีมวิดีโอรูปแบบ RTMP/HLS ไปยังเครื่องเล่นวิดีโอ โซลูชันไลบรารีการเข้ารหัสทั่วไปที่ใช้กันทั่วไป เช่น การเข้ารหัส x264, การเข้ารหัส faac, การเข้ารหัส ffmpeg เป็นต้น เนื่องจากเครื่องมือ FFmpeg รวมการเข้ารหัสรูปแบบเสียงและวิดีโอหลายรูปแบบ เราจึงสามารถให้ความสำคัญกับการใช้ FFmpeg สำหรับการแปลงรูปแบบ การเข้ารหัส และการสตรีมได้

1.ติดตั้งเครื่องมือ FFmpeg

ชงติดตั้ง ffmpeg

2. พุชไฟล์ MP4

ที่อยู่ไฟล์วิดีโอ:/Users/gao/Desktop/video/test.mp4

พุชและดึงที่อยู่สตรีมมิ่ง: rtmp://localhost:1935/rtmplive/home, rtmp://localhost:1935/rtmplive/home

 // สตรีมโปรโตคอล RTMP ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://10.14.221.17:1935/rtmplive/home//HLS สตรีมโปรโตคอล ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile พื้นฐาน -acodec aac -ar 44100 -เข้มงวด -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

สังเกต:

หลังจากที่เราพุชสตรีม เราสามารถติดตั้ง VLC และ ffplay (เครื่องเล่นวิดีโอที่รองรับโปรโตคอล rtmp) เพื่อดึงสตรีมในเครื่องเพื่อการสาธิต

1 ไฟล์วิดีโอสำหรับการสตรีมสด

 ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile พื้นฐาน -acodec aac -ar 44100 -เข้มงวด -2 -ac 1 -f flv -q 10 rtmp://192.168.1.101: 1935/hls/testffmpeg-re-i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -เข้มงวด -2 -ac 1 -f flv -q 10 rtmp://10.14.221.17:1935/hls/test

② กดกล้องสตรีมมิ่ง + เดสก์ท็อป + การบันทึกไมโครโฟนสำหรับการถ่ายทอดสด

 ffmpeg -f avfoundation -framerate 30 -i 1:0″ /-f avfoundation -framerate 30 -video_size 640x480 -i 0 /-c:v libx264 - ตั้งค่าไว้ล่วงหน้าเร็วมาก /-filter_complex 'overlay=main_w-overlay_w-10:main_h-overlay_h -10′ -acodec libmp3lame -ar 44100 -ac 1 -f flv rtmp://192.168.1.101:1935/hls/test

สำหรับคำสั่งเพิ่มเติม โปรดดูที่:

รายการคำสั่ง FFmpeg ทั้งหมดสำหรับการประมวลผลสื่อสตรีมมิ่ง RTMP

คำสั่งสตรีมมิ่ง FFmpeg ที่ใช้กันทั่วไป

เทอร์มินัลมือถือทั้ง iOS และ Android รองรับโปรโตคอล HLS ตามปกติ หลังจากสิ้นสุดการรวบรวมวิดีโอและบริการพุชการสตรีมวิดีโอเสร็จสิ้น คุณสามารถกำหนดค่าแท็กวิดีโอบนหน้า H5 ได้โดยตรงเพื่อเล่นวิดีโอสด

 <การควบคุมวิดีโอ preload=auto autoplay=autoplay loop=loop webkit-playsinline><source src=http://10.14.221.8/hls/test.m3u8″ type=application/vnd.apple.mpegurl /><p class=warning >เบราว์เซอร์ของคุณไม่รองรับวิดีโอ HTML5</p></video>

บทความนี้ให้รายละเอียดเกี่ยวกับกระบวนการรวบรวมและอัปโหลดวิดีโอ การประมวลผลวิดีโอแบบพุชของเซิร์ฟเวอร์ และการเล่นวิดีโอสดในหน้า H5 โดยจะพบรายละเอียดเกี่ยวกับหลักการใช้งานการถ่ายทอดสดหลายประการ

1 ข้อจำกัด H5 HLS ต้องเป็นการเข้ารหัส H264+AAC

2) ปัญหาการเล่น H5 HLS ติดอยู่ ฝั่งเซิร์ฟเวอร์สามารถใช้กลยุทธ์การกระจายตัว วางไฟล์ ts บน CDN และส่วนหน้าสามารถลองใช้การแคช DNS ได้ ฯลฯ

3 เพื่อให้เกิดการโต้ตอบแบบเรียลไทม์ที่ดีขึ้น การถ่ายทอดสด H5 ยังสามารถใช้โปรโตคอล RTMP และเล่นผ่าน video.js ได้

ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับฟังก์ชันการถ่ายทอดสดวิดีโอ HTML5 ที่ผู้แก้ไขแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วผู้แก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!