FMUSER Wirless ส่งวิดีโอและเสียงได้ง่ายขึ้น!
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> แอฟริคานส์
sq.fmuser.org -> แอลเบเนีย
ar.fmuser.org -> ภาษาอาหรับ
hy.fmuser.org -> อาร์เมเนีย
az.fmuser.org -> อาเซอร์ไบจัน
eu.fmuser.org -> บาสก์
be.fmuser.org -> เบลารุส
bg.fmuser.org -> บัลแกเรีย
ca.fmuser.org -> คาตาลัน
zh-CN.fmuser.org -> ภาษาจีน (ประยุกต์)
zh-TW.fmuser.org -> ภาษาจีน (ดั้งเดิม)
hr.fmuser.org -> โครเอเชีย
cs.fmuser.org -> เช็ก
da.fmuser.org -> เดนมาร์ก
nl.fmuser.org -> ดัตช์
et.fmuser.org -> เอสโตเนีย
tl.fmuser.org -> ฟิลิปปินส์
fi.fmuser.org -> ฟินแลนด์
fr.fmuser.org -> ฝรั่งเศส
gl.fmuser.org -> กาลิเซีย
ka.fmuser.org -> จอร์เจีย
de.fmuser.org -> เยอรมัน
el.fmuser.org -> กรีก
ht.fmuser.org -> ชาวเฮติครีโอล
iw.fmuser.org -> ภาษาฮิบรู
hi.fmuser.org -> ภาษาฮินดี
hu.fmuser.org -> ฮังการี
is.fmuser.org -> ไอซ์แลนด์
id.fmuser.org -> ชาวอินโดนีเซีย
ga.fmuser.org -> ไอริช
it.fmuser.org -> อิตาเลี่ยน
ja.fmuser.org -> ภาษาญี่ปุ่น
ko.fmuser.org -> ภาษาเกาหลี
lv.fmuser.org -> ลัตเวีย
lt.fmuser.org -> ลิทัวเนีย
mk.fmuser.org -> มาซิโดเนีย
ms.fmuser.org -> มาเลย์
mt.fmuser.org -> มอลตา
no.fmuser.org -> นอร์เวย์
fa.fmuser.org -> เปอร์เซีย
pl.fmuser.org -> โปแลนด์
pt.fmuser.org -> โปรตุเกส
ro.fmuser.org -> โรมาเนีย
ru.fmuser.org -> รัสเซีย
sr.fmuser.org -> เซอร์เบีย
sk.fmuser.org -> สโลวัก
sl.fmuser.org -> สโลวีเนีย
es.fmuser.org -> สเปน
sw.fmuser.org -> ภาษาสวาฮิลี
sv.fmuser.org -> สวีเดน
th.fmuser.org -> ไทย
tr.fmuser.org -> ตุรกี
uk.fmuser.org -> ยูเครน
ur.fmuser.org -> ภาษาอูรดู
vi.fmuser.org -> เวียดนาม
cy.fmuser.org -> เวลส์
yi.fmuser.org -> ยิดดิช
1、 การพัฒนาการถ่ายทอดสดวิดีโอบนมือถือ
จะเห็นได้ว่าตั้งแต่พีซีไปจนถึงมือถือแอปถ่ายทอดสดออนไลน์มากขึ้นเรื่อย ๆ และการถ่ายทอดสดผ่านมือถือก็เข้าสู่ขั้นระเบิดอย่างไม่เคยปรากฏมาก่อน อย่างไรก็ตามสำหรับการถ่ายทอดสดบนมือถือส่วนใหญ่ยังคงใช้งานโดยไคลเอนต์เนทีฟเป็นหลัก แต่ HTML5 ยังมีบทบาทที่ไม่สามารถถูกแทนที่ได้ในการสิ้นสุดการถ่ายทอดสดบนอุปกรณ์เคลื่อนที่เช่น HTML5 ด้วยข้อดีของการส่งที่รวดเร็วและการเผยแพร่ที่ง่าย HTML5 ยังสามารถเล่นสดได้ วิดีโอเมื่อสำคัญที่สุด
การถ่ายทอดสดที่สมบูรณ์สามารถแบ่งออกเป็นดังต่อไปนี้:
(1) ช่องเสียบสำหรับบันทึกวิดีโอ: โดยทั่วไปแล้วก็คืออุปกรณ์อินพุตเสียงและวิดีโอของคอมพิวเตอร์หรือกล้องหรือไมโครโฟนที่ขั้วต่อมือถือ ปัจจุบันวิดีโอโทรศัพท์มือถือเป็นส่วนหลัก
(2) โปรแกรมเล่นวิดีโอ: อาจเป็นเครื่องเล่นบนคอมพิวเตอร์โปรแกรมเล่นเนทีฟบนโทรศัพท์มือถือและป้ายกำกับวิดีโอ HTML5 ปัจจุบันยังคงเป็นผู้เล่นเนทีฟหลักบนโทรศัพท์มือถือ
(3) เซิร์ฟเวอร์วิดีโอ: โดยทั่วไปเป็นเซิร์ฟเวอร์ nginx ซึ่งใช้เพื่อยอมรับแหล่งที่มาของวิดีโอที่จัดเตรียมโดยด้านการบันทึกวิดีโอและให้บริการสตรีมไปยังจุดสิ้นสุดการเล่นวิดีโอ
2、 วิดีโอบันทึก HTML5:
สำหรับการบันทึกวิดีโอ HTML5 webrtc (การสื่อสารแบบเรียลไทม์บนเว็บ) ที่มีประสิทธิภาพเป็นเทคโนโลยีที่รองรับการสนทนาด้วยเสียงหรือวิดีโอแบบเรียลไทม์ในเว็บเบราว์เซอร์ ข้อเสียคือรองรับเฉพาะ PC chrome ได้ดีกว่าและฝั่งมือถือไม่เหมาะ
ขั้นตอนพื้นฐานในการบันทึกวิดีโอด้วย webrtc คือ:
เรียก window.navigator.webkitGetUserMedia (รับข้อมูลวิดีโอจากกล้องพีซีของผู้ใช้)
แปลงข้อมูลที่ได้มาเป็นข้อมูลสตรีมวิดีโอเป็น window.webkitRTCPeerConnection (รูปแบบข้อมูลสตรีมวิดีโอ)
การใช้ websocket เพื่อถ่ายโอนข้อมูลสตรีมวิดีโอไปยังเซิร์ฟเวอร์
เนื่องจากเบราว์เซอร์ต้องขึ้นต้นด้วยวิธีการหลายอย่างเบราว์เซอร์มือถือจำนวนมากจึงไม่รองรับ webrtc ดังนั้นการบันทึกวิดีโอจริงยังคงดำเนินการโดยไคลเอนต์ (IOS, Android) และเอฟเฟกต์จะดีกว่า
3、 HTML5 ถ่ายทอดสดวิดีโอ:
สำหรับการเล่นวิดีโอคุณสามารถใช้โปรโตคอล HLS (HTTP live streaming) เพื่อเล่นสตรีมมิงแบบสด ทั้ง iOS และ Android รองรับโปรโตคอลนี้อย่างเป็นธรรมชาติ ง่ายต่อการกำหนดค่าและใช้แท็กวิดีโอโดยตรง
นี่คือรหัสง่ายๆในการเล่นวิดีโอสดโดยใช้วิดีโอ:
(1) โปรโตคอล HLS คืออะไร:
ในระยะสั้นสตรีมทั้งหมดจะแบ่งออกเป็นไฟล์ขนาดเล็กซึ่งดาวน์โหลดโดยใช้ HTTP มีการดาวน์โหลดเพียงบางส่วนเท่านั้นในแต่ละครั้ง ไฟล์ที่กล่าวถึงก่อนหน้านี้ของ M3u8 ที่เปิดตัวในวิดีโอถ่ายทอดสด HTML5 นั้นใช้โปรโตคอล HLS ซึ่งเก็บข้อมูลเมตาของสตรีมวิดีโอ
ไฟล์ M3u8 แต่ละไฟล์สอดคล้องกับไฟล์ TS หลายไฟล์ซึ่งเป็นข้อมูลสำหรับการจัดเก็บวิดีโอจริง ไฟล์ m3u8 เก็บเฉพาะข้อมูลคอนฟิกูเรชันและพา ธ ที่เกี่ยวข้องของไฟล์ TS บางไฟล์ เมื่อเล่นวิดีโอไฟล์ M3u8 จะเปลี่ยนแบบไดนามิก ป้ายกำกับวิดีโอจะแยกวิเคราะห์ไฟล์และค้นหาไฟล์ TS ที่เกี่ยวข้องเพื่อเล่น ดังนั้นเพื่อเร่งความเร็วไฟล์ M3u8 จะถูกใช้เพื่อวิเคราะห์ไฟล์และค้นหาไฟล์ TS ที่เกี่ยวข้องสำหรับการเล่น ดังนั้นเพื่อเร่งความเร็วไฟล์ M3u8 จะถูกใช้เพื่อวิเคราะห์ไฟล์และค้นหาไฟล์ TS ที่เกี่ยวข้องสำหรับการเล่น ดังนั้นเพื่อเพิ่มความเร็วในการวางบนเว็บเซิร์ฟเวอร์และไฟล์ TS บน CDN
ไฟล์ M3u8 เป็นไฟล์ M3U ที่เข้ารหัสด้วย UTF-8 ไฟล์นี้ไม่สามารถเล่นได้ด้วยตัวมันเองมี แต่ไฟล์ข้อความที่มีข้อมูลการเล่นเท่านั้น
(2) กระบวนการขอ HLS:
URL ของคำร้องขอ HTTP m3u8
เซิร์ฟเวอร์ส่งคืนเพลย์ลิสต์ของ m3u8 ซึ่งอัปเดตตามเวลาจริง โดยทั่วไป URL ของข้อมูล 5 กลุ่มจะได้รับพร้อมกัน
ไคลเอนต์แยกวิเคราะห์เพลย์ลิสต์ของ m3u8 จากนั้นขอ URL ของแต่ละเซ็กเมนต์เพื่อรับสตรีมข้อมูล TS
(3) ความล่าช้าในการถ่ายทอดสด HLS:
เราทราบดีว่าโปรโตคอล HLS แบ่งสตรีมแบบสดออกเป็นส่วนย่อย ๆ ของวิดีโอเพื่อดาวน์โหลดและเล่น ดังนั้นสมมติว่ารายการมีไฟล์ TS 5 ไฟล์แต่ละไฟล์ TS มีเนื้อหาวิดีโอ 5 วินาทีจากนั้นความล่าช้าโดยรวมคือ 25 วินาที เนื่องจากเมื่อคุณเห็นวิดีโอเหล่านี้แสดงว่าโฮสต์ได้บันทึกวิดีโอและอัปโหลดดังนั้นความล่าช้าจึงเกิดจากสิ่งนี้ แน่นอนความยาวรายการและขนาดของไฟล์ TS ไฟล์เดียวสามารถลดให้สั้นลงเพื่อลดความล่าช้า ในขั้นสุดยอดความยาวของรายการสามารถลดลงเหลือ 1 และระยะเวลา TS คือ 1 วินาที อย่างไรก็ตามสิ่งนี้จะเพิ่มจำนวนคำขอและเพิ่มแรงกดดันของเซิร์ฟเวอร์ เมื่อความเร็วเครือข่ายช้าจะมีการสร้างบัฟเฟอร์มากขึ้น ดังนั้นเวลา TS ที่แนะนำโดย Apple อย่างเป็นทางการจะอยู่ที่ 10 วินาทีดังนั้นจึงจะเปลี่ยนความล่าช้าของ 30 วินาทีได้อย่างมาก ดังนั้นเซิร์ฟเวอร์จึงรับสตรีมแปลงรหัสบันทึกตัดบล็อกแล้วกระจายไปยังไคลเอนต์ นี่คือสาเหตุที่แท้จริงของความล่าช้า
สำหรับคำถามเพิ่มเติมเกี่ยวกับความล่าช้าโปรดดูที่อยู่อย่างเป็นทางการของ Apple:
https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html
อย่างไรก็ตามวิดีโอสด HTML5 มีข้อดีที่ไม่สามารถถูกแทนที่ได้:
①การสื่อสารที่ดีง่ายต่อการแบ่งปันและการดำเนินการอื่น ๆ
②สามารถเผยแพร่ได้แบบไดนามิกซึ่งเอื้อต่อการทำซ้ำตามเวลาจริงของข้อกำหนดของผลิตภัณฑ์และการเปิดตัวอย่างรวดเร็ว
③โดยไม่ต้องติดตั้งแอพให้เปิดเบราว์เซอร์โดยตรง
4、 IOS คอลเลกชัน (บันทึก) ข้อมูลเสียงและวิดีโอ OS
สำหรับการรับและบันทึกเสียงและวิดีโอขั้นแรกให้อธิบายแนวคิดต่อไปนี้:
(1) การเข้ารหัสวิดีโอ: การเข้ารหัสวิดีโอหมายถึงวิธีที่ไฟล์ในรูปแบบวิดีโอถูกแปลงเป็นไฟล์รูปแบบวิดีโออื่นโดยใช้เทคโนโลยีการบีบอัดเฉพาะ วิดีโอที่บันทึกโดย iPhone ที่เราใช้จะต้องเข้ารหัสอัปโหลดและถอดรหัสก่อนจึงจะเล่นได้ในโปรแกรมเล่นฝั่งผู้ใช้
(2) มาตรฐานตัวแปลงสัญญาณ: มาตรฐานตัวแปลงสัญญาณที่สำคัญที่สุดในการส่งสตรีมวิดีโอ ได้แก่ H.261, H.263 และ H.264 ของ ITU ซึ่งโปรโตคอล HLS รองรับการเข้ารหัสรูปแบบ H.264
(3) การเข้ารหัสเสียง: คล้ายกับการเข้ารหัสวิดีโอสตรีมเสียงต้นฉบับจะถูกเข้ารหัสอัปโหลดถอดรหัสตามมาตรฐานบางอย่างและเล่นในโปรแกรมเล่น แน่นอนว่าเสียงยังมีมาตรฐานการเข้ารหัสอีกมากมายเช่นรหัส PCM รหัส wma รหัส AAC เป็นต้นวิธีการเข้ารหัสเสียงที่สนับสนุนโดยโปรโตคอล HLS ของเราคือรหัส AAC
การรับข้อมูลวิดีโอและเสียงส่วนใหญ่แบ่งออกเป็นขั้นตอนต่อไปนี้:
(1) การรับข้อมูลวิดีโอและเสียงโดยใช้กล้องบน IOS
(2) ใน IOS สตรีมข้อมูลเสียงและวิดีโอต้นฉบับสามารถรวบรวมได้โดย avcapturesession และ avcapturedevice
(3) วิดีโอถูกเข้ารหัสด้วย h264 และเสียงเป็นรหัส AAC ใน IOS มีไลบรารีการเข้ารหัสแบบแพ็กเกจเพื่อให้สามารถเข้ารหัสเสียงและวิดีโอได้
(4) ข้อมูลเสียงและวิดีโอหลังจากการเข้ารหัสถูกประกอบและปิดผนึก
(5) สร้างการเชื่อมต่อ RTMP แล้วดันขึ้นไปที่เซิร์ฟเวอร์
ต่อไปนี้เป็นกระบวนการเฉพาะในการรวบรวมข้อมูลเสียงและวิดีโอ:
(1) เกี่ยวกับ RTMP:
โปรโตคอลการส่งข้อความแบบเรียลไทม์ (RTMP) คือชุดของโปรโตคอลวิดีโอสดที่พัฒนาโดย Macromedia และตอนนี้เป็นของ adobe เช่นเดียวกับ HLS สามารถใช้สำหรับการออกอากาศวิดีโอ ความแตกต่างคือ RTMP ไม่สามารถเล่นในเบราว์เซอร์ IOS ที่ใช้แฟลชได้ แต่จะดีกว่าแบบเรียลไทม์มากกว่า HLS ดังนั้นโดยทั่วไปแล้วโปรโตคอลนี้จะใช้ในการอัปโหลดสตรีมวิดีโอนั่นคือสตรีมวิดีโอจะถูกส่งไปยังเซิร์ฟเวอร์
(2) ผลักดัน
สิ่งที่เรียกว่าสตรีมมิ่งหมายถึงการส่งข้อมูลเสียงและวิดีโอที่เราเข้ารหัสไปยังเซิร์ฟเวอร์สตรีมวิดีโอ ในรหัส IOS มักใช้การสตรีม RTMP Librtmp IOS ซึ่งเป็นไลบรารีของบุคคลที่สามสามารถใช้สำหรับการสตรีมได้ Librtmp ห่อหุ้ม API หลักบางส่วนเพื่อให้ผู้ใช้เรียกใช้ ตัวอย่างเช่นพุช API เป็นต้นกำหนดค่าที่อยู่เซิร์ฟเวอร์จากนั้นพุชสตรีมวิดีโอการแปลงรหัสไปยังเซิร์ฟเวอร์
แล้วจะสร้างเซิร์ฟเวอร์สตรีมมิ่งได้อย่างไร?
สร้างเซิร์ฟเวอร์สตรีมมิงอย่างง่าย เนื่องจากสตรีมวิดีโอที่เราอัปโหลดใช้โปรโตคอล RTMP เซิร์ฟเวอร์จึงต้องรองรับ RTMP อาจใช้ขั้นตอนต่อไปนี้:
(1) ติดตั้งเซิร์ฟเวอร์ nginx
(2) มีการติดตั้งส่วนขยาย RTMP ของ nginx กำหนดค่าไฟล์คอนฟิกสำหรับ nginx
(3) รีสตาร์ท nginx และเขียนที่อยู่สตรีมของ RTMP เป็น rtmp: // ip: 1935 / hls / mystream โดยที่ HLS_ Path แสดงที่อยู่ของไฟล์ M3u8 และ TS ที่สร้างขึ้น HLS_ Fragment แสดงถึงความยาวของชิ้นส่วนและ mystream แสดงถึงอินสแตนซ์ ชื่อไฟล์ที่จะสร้างสามารถตั้งได้เอง
5、 การโต้ตอบของผู้ใช้ในการถ่ายทอดสด:
สำหรับการโต้ตอบของผู้ใช้ในการถ่ายทอดสดสามารถแบ่งออกได้คร่าวๆเป็น:
ให้ของขวัญ
เพื่อแสดงความคิดเห็นหรือเล่น
สำหรับการจัดส่งของขวัญคุณสามารถใช้ DOM และ CSS3 เพื่อตระหนักถึงตรรกะของการส่งของขวัญและภาพเคลื่อนไหวของขวัญพิเศษบางอย่างบน HTML5 ปัญหาทางเทคนิคไม่ใหญ่มาก
สำหรับเขื่อนที่ซับซ้อนขึ้นเล็กน้อยคุณอาจต้องใส่ใจกับสิ่งต่อไปนี้:
ประสิทธิภาพแบบเรียลไทม์ของโพรเจกไทล์สามารถส่งและรับได้แบบเรียลไทม์โดย webscock และแสดงผล
สำหรับเบราว์เซอร์ที่ไม่รองรับ websocket สามารถลดระดับได้เฉพาะการโพลแบบยาวหรือตัวจับเวลาส่วนหน้าที่ส่งคำขอเพื่อรับป๊อปอัปแบบเรียลไทม์
ภาพเคลื่อนไหวและการตรวจจับการชนกัน (เช่นไม่มีการทับซ้อนกัน) และอื่น ๆ ในการเรนเดอร์
|
ป้อนอีเมลเพื่อรับเซอร์ไพรส์
es.fmuser.org
it.fmuser.org
fr.fmuser.org
de.fmuser.org
af.fmuser.org -> แอฟริคานส์
sq.fmuser.org -> แอลเบเนีย
ar.fmuser.org -> ภาษาอาหรับ
hy.fmuser.org -> อาร์เมเนีย
az.fmuser.org -> อาเซอร์ไบจัน
eu.fmuser.org -> บาสก์
be.fmuser.org -> เบลารุส
bg.fmuser.org -> บัลแกเรีย
ca.fmuser.org -> คาตาลัน
zh-CN.fmuser.org -> ภาษาจีน (ประยุกต์)
zh-TW.fmuser.org -> ภาษาจีน (ดั้งเดิม)
hr.fmuser.org -> โครเอเชีย
cs.fmuser.org -> เช็ก
da.fmuser.org -> เดนมาร์ก
nl.fmuser.org -> ดัตช์
et.fmuser.org -> เอสโตเนีย
tl.fmuser.org -> ฟิลิปปินส์
fi.fmuser.org -> ฟินแลนด์
fr.fmuser.org -> ฝรั่งเศส
gl.fmuser.org -> กาลิเซีย
ka.fmuser.org -> จอร์เจีย
de.fmuser.org -> เยอรมัน
el.fmuser.org -> กรีก
ht.fmuser.org -> ชาวเฮติครีโอล
iw.fmuser.org -> ภาษาฮิบรู
hi.fmuser.org -> ภาษาฮินดี
hu.fmuser.org -> ฮังการี
is.fmuser.org -> ไอซ์แลนด์
id.fmuser.org -> ชาวอินโดนีเซีย
ga.fmuser.org -> ไอริช
it.fmuser.org -> อิตาเลี่ยน
ja.fmuser.org -> ภาษาญี่ปุ่น
ko.fmuser.org -> ภาษาเกาหลี
lv.fmuser.org -> ลัตเวีย
lt.fmuser.org -> ลิทัวเนีย
mk.fmuser.org -> มาซิโดเนีย
ms.fmuser.org -> มาเลย์
mt.fmuser.org -> มอลตา
no.fmuser.org -> นอร์เวย์
fa.fmuser.org -> เปอร์เซีย
pl.fmuser.org -> โปแลนด์
pt.fmuser.org -> โปรตุเกส
ro.fmuser.org -> โรมาเนีย
ru.fmuser.org -> รัสเซีย
sr.fmuser.org -> เซอร์เบีย
sk.fmuser.org -> สโลวัก
sl.fmuser.org -> สโลวีเนีย
es.fmuser.org -> สเปน
sw.fmuser.org -> ภาษาสวาฮิลี
sv.fmuser.org -> สวีเดน
th.fmuser.org -> ไทย
tr.fmuser.org -> ตุรกี
uk.fmuser.org -> ยูเครน
ur.fmuser.org -> ภาษาอูรดู
vi.fmuser.org -> เวียดนาม
cy.fmuser.org -> เวลส์
yi.fmuser.org -> ยิดดิช
FMUSER Wirless ส่งวิดีโอและเสียงได้ง่ายขึ้น!
ติดต่อ
ที่ตั้ง:
เลขที่ 305 อาคาร HuiLan เลขที่ 273 Huanpu Road Guangzhou China 510620
หมวดหมู่
จดหมายข่าว