HTML5 - เว็บ RTC

Web RTC ที่แนะนำโดย World Wide Web Consortium (W3C) ที่รองรับแอปพลิเคชั่นเบราว์เซอร์สำหรับโทรออกด้วยเสียงวิดีโอแชทและแชร์ไฟล์ P2P

ถ้าคุณต้องการที่จะลอง? เว็บ RTC พร้อมใช้งานสำหรับ Chrome, Opera และ Firefox สถานที่ที่ดีที่จะเริ่มต้นเป็นโปรแกรมแชทที่เรียบง่ายที่นี่ Web RTC ใช้ API สามตัวดังที่แสดงด้านล่าง -

  • MediaStream - เข้าถึงกล้องและไมโครโฟนของผู้ใช้

  • RTCPeerConnection - เข้าถึงสิ่งอำนวยความสะดวกการโทรด้วยเสียงหรือวิดีโอ

  • RTCDataChannel - เข้าถึงการสื่อสารแบบเพียร์ทูเพียร์

MediaStream

MediaStream แสดงให้เห็นถึงกระแสการประสานสื่อตัวอย่างเช่นคลิกบนเครื่องเล่นวิดีโอ HTML5 ใน HTML5 สาธิตส่วนหรืออื่น ๆ คลิกที่นี่

ตัวอย่างข้างต้นประกอบด้วย stream.getAudioTracks () และ stream.VideoTracks () หากไม่มีแทร็กเสียงจะส่งคืนอาร์เรย์ว่างและจะตรวจสอบสตรีมวิดีโอหากเชื่อมต่อเว็บแคม stream.getVideoTracks () จะส่งคืนอาร์เรย์ของ MediaStreamTrack หนึ่งรายการที่แสดงถึงสตรีมจากเว็บแคม ตัวอย่างง่ายๆคือแอปพลิเคชันแชทแอปพลิเคชั่นแชทรับสตรีมจากกล้องเว็บกล้องหลังไมโครโฟน

โค้ดตัวอย่างของ MediaStream

function gotStream(stream) {
   window.AudioContext = window.AudioContext || window.webkitAudioContext;
   var audioContext = new AudioContext();
   
   // Create an AudioNode from the stream
   var mediaStreamSource = audioContext.createMediaStreamSource(stream);
   
   // Connect it to destination to hear yourself
   // or any other node for processing!
   mediaStreamSource.connect(audioContext.destination);
}
navigator.getUserMedia({audio:true}, gotStream);

จับภาพหน้าจอ

นอกจากนี้ยังสามารถทำได้ในเบราว์เซอร์ Chrome ที่มี mediaStreamSource และต้องใช้ HTTPS คุณสมบัตินี้ยังไม่มีในโอเปร่า ตัวอย่างการสาธิตสามารถดูได้ที่นี่

การควบคุมเซสชันข้อมูลเครือข่ายและสื่อ

Web RTC ต้องการการสื่อสารแบบเพียร์ทูเพียร์ระหว่างเบราว์เซอร์ กลไกนี้จำเป็นต้องมีการส่งสัญญาณข้อมูลเครือข่ายการควบคุมเซสชันและข้อมูลสื่อ นักพัฒนาเว็บสามารถเลือกกลไกต่างๆในการสื่อสารระหว่างเบราว์เซอร์เช่น SIP หรือ XMPP หรือการสื่อสารสองทาง ตัวอย่างตัวอย่าง XHR เป็นที่นี่

ตัวอย่างโค้ดของ createSignalingChannel ()

var signalingChannel = createSignalingChannel();
var pc;
var configuration = ...;

// run start(true) to initiate a call
function start(isCaller) {
   pc = new RTCPeerConnection(configuration);
   
   // send any ice candidates to the other peer
   pc.onicecandidate = function (evt) {
      signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
   };
   
   // once remote stream arrives, show it in the remote video element
   pc.onaddstream = function (evt) {
      remoteView.src = URL.createObjectURL(evt.stream);
   };
   
   // get the local stream, show it in the local video element and send it
   navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
      selfView.src = URL.createObjectURL(stream);
      pc.addStream(stream);
      
      if (isCaller)
         pc.createOffer(gotDescription);
      
      else
         pc.createAnswer(pc.remoteDescription, gotDescription);
         
         function gotDescription(desc) {
            pc.setLocalDescription(desc);
            signalingChannel.send(JSON.stringify({ "sdp": desc }));
         }
      });
   }
   
   signalingChannel.onmessage = function (evt) {
      if (!pc)
         start(false);
         var signal = JSON.parse(evt.data);
      
      if (signal.sdp)
         pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
      
      else
         pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};