โค้ดตัวอย่าง HTML5 สำหรับการเล่นวิดีโอ RTSP

ปัจจุบัน กล้องเว็บส่วนใหญ่ส่งสตรีมวิดีโอผ่านโปรโตคอล RTSP แต่ HTML ไม่รองรับสตรีม RTSP ตามมาตรฐาน ยกเว้นเบราว์เซอร์ Firefox ซึ่งสามารถเล่นสตรีม RTSP ได้โดยตรง แทบไม่มีเบราว์เซอร์อื่นใดที่สามารถเล่นสตรีม RTSP ได้โดยตรง แอปพลิเคชันอิเล็กตรอนใช้เคอร์เนล Chromium ดังนั้นจึงไม่สามารถเล่นสตรีม RTSP ได้โดยตรง

ด้วยความช่วยเหลือของเครื่องมือบางอย่าง สตรีม RTSP จึงสามารถเล่นบนเว็บเพจได้ วิธีการที่แนะนำในบทความนี้สามารถนำไปใช้กับเว็บแอปพลิเคชันแบบดั้งเดิมและแอปพลิเคชัน Electron ข้อแตกต่างเพียงอย่างเดียวคือกระบวนการหลักของแอปพลิเคชัน Electron ถูกใช้เป็นเซิร์ฟเวอร์ของแอปพลิเคชันเว็บแบบดั้งเดิม

เนื่องจากเป็นการถ่ายทอดสด ความล่าช้าจึงต้องต่ำ เมื่อกล้องออฟไลน์ ควรมีข้อความแจ้งเหตุการณ์บางอย่างด้วย ในสองจุดนี้ เราจะเปรียบเทียบโซลูชันการเล่น RTSP ที่มีอยู่ซึ่งมีการใช้งานโดยไม่ต้องซื้อใบอนุญาต (เราจะไม่วิเคราะห์ในขณะนี้อยู่ในขั้นตอนหลัก)

ฉันได้ปรับใช้ทั้งสี่วิธีแล้ว และวิธีที่สี่มีผลโดยรวมที่ดีที่สุด โดยจะใช้พอร์ตน้อยลง มีความหน่วงต่ำ มีความเร็วในการเรนเดอร์ที่รวดเร็ว และง่ายต่อการจัดการกับเหตุการณ์ออฟไลน์

flv.js เป็นเบราว์เซอร์ HTML5 แบบโอเพ่นซอร์สจาก Bilibili อาศัยส่วนขยายแหล่งที่มาของสื่อสำหรับการเล่นวิดีโอ วิดีโอจะถูกส่งผ่านโปรโตคอล HTTP-FLV หรือ WebSocket-FLV และรูปแบบวิดีโอจะต้องเป็นรูปแบบ FLV

ฝั่งเซิร์ฟเวอร์เขียนโดยใช้เฟรมเวิร์ก express + express-ws เมื่อคำขอ HTTP ถูกส่งไปยังที่อยู่ที่ระบุ โปรแกรมสตรีมมิ่ง ffmpeg จะเริ่มทำงาน สตรีม RTSP จะถูกห่อหุ้มโดยตรงในสตรีมวิดีโอในรูปแบบ FLV และผลักไปที่ สตรีมตอบกลับ WebSocket ที่ระบุ

 นำเข้า * เป็นด่วนจาก express; นำเข้า * เป็น expressWebSocket จาก express-ws; นำเข้า ffmpeg จาก fluent-ffmpeg; นำเข้า webSocketStream จาก websocket-stream/stream; นำเข้า WebSocket จาก websocket-stream; นำเข้า * เป็น http จาก http; ฟังก์ชั่น localServer() { ให้ app = express(); app.use(express.static(__dirname)); expressWebSocket(แอป, null, { perMessageDeflate: จริง }); app.ws(/rtsp/:id/, rtspRequestHandle) app.listen(8888); console.log (ฟังด่วน)} ฟังก์ชั่น rtspRequestHandle (ws, req) { console.log (ตัวจัดการคำขอ rtsp) ; const stream = webSocketStream (ws, { ไบนารี: จริง, browserBufferTimeout: 1000000 }, { browserBufferTimeout: 1000000 }); ให้ url = req.query.url; console.log(rtsp url:, url); console.log(rtsp params:, req.params); ลอง { ffmpeg(url) .addInputOption(-rtsp_transport , tcp, -buffer_size, 102400) // คุณสามารถเพิ่ม RTSP ได้ที่นี่ พารามิเตอร์ที่ปรับให้เหมาะสมแล้ว on(start, function () { console.log(url, Stream beginning.); }) .on(codecData, function () { console.log(url, Stream codecData.) // การประมวลผลกล้องออนไลน์} ) .on(ข้อผิดพลาด, ฟังก์ชั่น (ผิดพลาด) { console.log(url, เกิดข้อผิดพลาด: , err.message); }) .on(end, ฟังก์ชั่น () { console.log(url, Stream) สิ้นสุด!); // การจัดการการตัดการเชื่อมต่อของกล้อง}) .outputFormat(flv).videoCodec(copy).noAudio().pipe(stream); } catch (ข้อผิดพลาด) { console.log(ข้อผิดพลาด }}

เพื่อให้มีเวลาโหลดน้อยลง คุณสามารถเพิ่มพารามิเตอร์ต่อไปนี้ใน ffmpeg:

• การวิเคราะห์ระยะเวลาสามารถลดเวลาที่ต้องใช้ในการแยกวิเคราะห์โค้ดสตรีม
• ฉันจำฟังก์ชันเฉพาะของ max_delay ที่เขียนในข้อมูลไม่ค่อยได้

แน่นอนว่าการดำเนินการนี้ยังค่อนข้างหยาบ เมื่อมีการร้องขอหลายคำขอสำหรับที่อยู่เดียวกัน ควรเพิ่มเอาต์พุตของ ffmpeg แทนที่จะเริ่มสตรีมกระบวนการ ffmpeg ใหม่

ตัวอย่างนี้ใช้กรอบงาน Vue สำหรับการออกแบบเพจ

 <template> <div> <video class=demo-video ref=player></video> </div></template><script>นำเข้า flvjs จาก flv.js; ส่งออกค่าเริ่มต้น { อุปกรณ์ประกอบฉาก: { rtsp: สตริง, id : String }, /** * @returns {{player: flvjs.Player}} */ data () { return { player: null } }, mount () { if (flvjs.isSupported()) { ให้วิดีโอ = this.$refs.player; if (วิดีโอ) { this.player = flvjs.createPlayer ({ ประเภท: flv, isLive: true, url: `ws://localhost:8888 /rtsp/${this.id}/?url=${this.rtsp}` }); this.player.attachMediaElement(วิดีโอ); this.player.load(); this.player.play(); } catch (ข้อผิดพลาด) { console.log(ข้อผิดพลาด); }; beforeDestroy () { this.player.destory(); /script><style> .demo-video { ความกว้างสูงสุด: 480px; ความสูงสูงสุด: 360px;

หน้า Electron ใช้เพื่อแสดงกล้อง Hikvison NVR จำนวน 7 ตัว ซึ่งสามารถให้เวลาแฝงต่ำ การใช้งาน CPU ต่ำ และไม่มีการบิดเบือนหน้าจอ เนื่องจากการรักษาความลับ ฉันจะไม่โพสต์ภาพหน้าจอที่นี่

ในทำนองเดียวกัน ฉันเล่นวิดีโอ 1080p ในเครื่อง 9 รายการ "White Deer Plain" เพื่อดูเอฟเฟกต์

เอฟเฟกต์การเล่นนั้นดีมาก ไม่มีความล่าช้าหรือเบลอเลย และการใช้งาน CPU ก็ไม่สูง

ที่เก็บโค้ดตัวอย่าง: WhuRS-FGis/html5-rtsp ที่เก็บโค้ดตัวอย่าง:

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

หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณ คุณสามารถพิมพ์ซ้ำได้ โปรดระบุแหล่งที่มา ขอขอบคุณ!