สำหรับการสตรีมวิดีโอสด ฉันศึกษาโซลูชันมากมายในระยะเริ่มต้น รวมถึงเว็บซ็อกเก็ต ด้วยเหตุผลหลายประการ ฉันจึงไม่นำโซลูชันนี้มาใช้ในท้ายที่สุด แต่ฉันยังคงต้องการบันทึกประสบการณ์การเรียนรู้ของฉัน
WebSocket เป็นโปรโตคอลสำหรับการสื่อสารฟูลดูเพล็กซ์บนการเชื่อมต่อ TCP เดียวที่ HTML5 เริ่มให้บริการ
ใน WebSocket API เบราว์เซอร์และเซิร์ฟเวอร์จำเป็นต้องดำเนินการจับมือเท่านั้น จากนั้นช่องทางที่รวดเร็วจะถูกสร้างขึ้นระหว่างเบราว์เซอร์และเซิร์ฟเวอร์ ข้อมูลสามารถส่งโดยตรงระหว่างคนทั้งสอง
เบราว์เซอร์ส่งคำขอไปยังเซิร์ฟเวอร์เพื่อสร้างการเชื่อมต่อ WebSocket ผ่าน JavaScript หลังจากสร้างการเชื่อมต่อแล้ว ไคลเอนต์และเซิร์ฟเวอร์สามารถแลกเปลี่ยนข้อมูลโดยตรงผ่านการเชื่อมต่อ TCP
หลังจากที่คุณได้รับการเชื่อมต่อเว็บซ็อกเก็ตแล้ว คุณสามารถส่งข้อมูลไปยังเซิร์ฟเวอร์ผ่านเมธอด send() และรับข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์ผ่านเหตุการณ์ onmessage
ในระหว่างกระบวนการ แนวคิดหลักคือ: ใช้ setTimeout() บนหน้าการบันทึกเพื่อแปลงวิดีโอเป็นภาพทีละเฟรมผ่านแคนวาสในช่วงเวลาที่กำหนด จากนั้นใช้ socket.send() ของ websocket เพื่อส่งข้อมูลภาพไปที่ เซิร์ฟเวอร์ บนเพจการถ่ายทอดสด ขั้นแรกให้คุณสร้างโครงสร้าง <img> รับข้อมูลรูปภาพผ่าน socket.onmessage() ของ websocket และแสดงบนแท็ก <img> เพื่อสร้างการถ่ายทอดสด
รหัสที่แนบมา
โครงสร้าง HTML ของหน้าวิดีโอ
<วิดีโอเล่นอัตโนมัติ id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
หน้าวิดีโอ js
<script type=text/javascript charset=utf-8> //สร้าง + อินสแตนซ์ var socket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); /ส่งคืนสภาพแวดล้อมสำหรับการวาดภาพบนผืนผ้าใบ var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var Success = function(stream){ // รับสตรีมวิดีโอและแปลงเป็น url video.src = window.URL.createObjectURL(stream); } //เปิดซ็อกเก็ต socket.onopen = function(){ วาด(); console.log(เปิดสำเร็จ) } // วาดเฟรมวิดีโอลงบนวัตถุ Canvas และ Canvas จะสลับเฟรมทุกๆ 100 มิลลิวินาทีเพื่อสร้างเอฟเฟกต์วิดีโอด้วยตาเปล่า var Draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height) ; } จับ ( e) { ถ้า (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout (วาด, 100); if(video.src){/ //เนื้อหาของ Canvas ถูกแปลงเป็น URI ข้อมูล PNG และส่งไปยังเซิร์ฟเวอร์ 0.5 คือค่าสัมประสิทธิ์การบีบอัด socket.send(back.toDataURL(image/jpeg, 0.5)); } setTimeout(draw , 100) ; } //เรียกกล้องของอุปกรณ์และใส่ทรัพยากรลงในแท็กวิดีโอ navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||. navigator.mozGetUserMedia ||. navigator.msGetUserMedia; navigator.getUserMedia({วิดีโอ:true, เสียง:false}, ความสำเร็จ, console.log);โครงสร้าง HTML ของเพจสด:
<img id=สไตล์ผู้รับ=ความกว้าง:1600px;ความสูง:900px/>
เพจสดJS
<script type=text/javascript charset=utf-8> //สร้างอินสแตนซ์ซ็อกเก็ต var receiver_socket = new WebSocket(ws://+document.domain+:8008); alert(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // ฟังข้อความ receiver_socket.onmessage = ฟังก์ชั่น (ข้อมูล) { image.src=data.data; } </script> สรุปข้างต้นคือการใช้งาน websocket ใน HTML5 ที่ตัวแก้ไขแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วตัวแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!