HTML5-Web RTC(1) - 芒果文档

📌 相关文章

📜 HTML5-Web RTC(1)

📅 最后修改于: 2023-12-03 15:31:18.859000 🧑 作者: Mango

HTML5-Web RTC介绍

简介

WebRTC（Web Real-Time Communications）是一种使用Web浏览器和相应API来实现点对点（P2P）通信的开放源代码项目，它允许实时通信，例如视频音频通话和P2P文件共享等。HTML5-WebRTC是指使用HTML5和WebRTC技术来创建实时通信的应用程序。

WebRTC API

WebRTC API包括三个主要部分：

MediaStream API：获取用户的摄像头和麦克风等媒体设备流。
RTCPeerConnection API：用于建立点对点通信连接，允许实时音频/视频通信，以及数据通信。这是WeRTC的核心API。
RTCDataChannel API：允许点对点数据通信的低延迟建立。

WebRTC的优势

实时性高：借助于其点对点通信（P2P）技术，WebRTC可以减少网络延迟，使实时通信更加快速和流畅。
跨平台性强：由于使用Web浏览器和WebRTC API，WebRTC可以在多个平台上运行，包括桌面、移动设备和嵌入式设备。
无需插件：传统的实时通信技术需要安装不同的插件才能正常工作，WebRTC可以直接在Web浏览器上运行，无需任何插件，降低了用户的门槛。
开放源代码：WebRTC是一个开源项目，拥有强大的社区支持，将持续更新和改进。

实例演示

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5-WebRTC Demo</title>
   </head>
	
   <body>
      <div class="video">
         <video id="localVideo"></video>
         <video id="remoteVideo"></video>
      </div>

      <div class="control">
         <button id="startButton">Start Cam</button>
         <button id="callButton">Start Call</button>
         <button id="hangupButton">Hang Up</button>
      </div>

      <script>
         var localVideo = document.getElementById('localVideo');
         var remoteVideo = document.getElementById('remoteVideo');
         var startButton = document.getElementById('startButton');
         var callButton = document.getElementById('callButton');
         var hangupButton = document.getElementById('hangupButton');

         var localStream;
         var remoteStream;
         var pc;

         var stunServer = {
            'iceServers': [
               {'url': 'stun:stun.l.google.com:19302'},
               {'url': 'stun:stun1.l.google.com:19302'},
            ]
         };

         startButton.onclick=function() {
            navigator.mediaDevices.getUserMedia({
               audio: false,
               video: true
            })
            .then(gotStream)
            .catch(function(e) {
               alert('getUserMedia() error: ' + e.name);
            });
         }

         callButton.onclick = function() {
            pc = new RTCPeerConnection(stunServer);
            pc.addStream(localStream);
            pc.onaddstream = function(event) {
               remoteVideo.srcObject = event.stream;
            }
            pc.createOffer(setLocalAndSendMessage, function(){});
         }

         hangupButton.onclick = function() {
            pc.close();
            pc = null;
            hangupButton.disabled = true;
         }

         function gotStream(stream) {
            localVideo.srcObject = stream;
            localStream = stream;
            callButton.disabled = false;
            startButton.disabled = true;
         }

         function setLocalAndSendMessage(sessionDescription) {
            pc.setLocalDescription(sessionDescription);
         }
      </script>
   </body>
</html>

总结

HTML5-WebRTC是一个快速、高效、跨平台的实时通信技术，通过它可以创建强大的实时音频视频通话、屏幕共享等应用。我们可以使用MediaStream API、RTCPeerConnection API和RTCDataChannel API来实现WebRTC应用程序。由于WebRTC是一个开源项目，拥有强大的社区支持，因此我们可以预计，它将持续更新和发展，它将在未来成为Web应用程序中的一个永久标准。