网页上如何使用WebRTC

最新推荐文章于 2025-10-05 14:06:22 发布

转载最新推荐文章于 2025-10-05 14:06:22 发布 · 1.9k 阅读

html5-webrtc 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用HTML5 WebRTC技术实现视频通话的方法。通过示例代码展示了如何利用RTCPeerConnection进行点对点连接，并实现了视频和音频流的传输。

http://www.oschina.net/code/snippet_54371_18805

网页上如何使用WebRTC

这是一段简单的代码,关于HTML5的WebRTC技术,主要描述了如何使用RTCPeerConnection的步骤 .
代码地址: https://github.com/samdutton/simpl/blob/master/rtcpeerconnection/js/main.js
Demo地址: http://www.simpl.info/rtcpeerconnection/

标签： WebRTC

代码片段(1)[全屏查看所有代码]

1. [代码][JavaScript]代码

 
        001 performance.now = performance.now || performance.webkitNow; // hack added by SD!
 
        002  
 
        003 //var vid1 = document.getElementById("vid1");
 
        004 //var vid2 = document.getElementById("vid2");
 
        005 btn1.disabled = false;
 
        006 btn2.disabled = true;
 
        007 btn3.disabled = true;
 
        008 var localstream;
 
        009  
 
        010 function trace(text) {
 
        011   // This function is used for logging.
 
        012   if (text[text.length - 1] == '\n') {
 
        013     text = text.substring(0, text.length - 1);
 
        014   }
 
        015   console.log((performance.now() / 1000).toFixed(3) + ": " + text);
 
        016 }
 
        017  
 
        018 function gotStream(stream){
 
        019   trace("Received local stream");
 
        020   vid1.src = webkitURL.createObjectURL(stream);
 
        021   localstream = stream;
 
        022   btn2.disabled = false;
 
        023 }
 
        024  
 
        025 function start() {
 
        026   trace("Requesting local stream");
 
        027   btn1.disabled = true;
 
        028   navigator.webkitGetUserMedia({audio:true, video:true},
 
        029                                gotStream, function() {});
 
        030 }
 
        031  
 
        032 function call() {
 
        033   btn2.disabled = true;
 
        034   btn3.disabled = false;
 
        035   trace("Starting call");
 
        036  
 
        037   // temporary hacks to cope with API change
 
        038   if (!!localstream.videoTracks && !localstream.getVideoTracks) {
 
        039     localstream.getVideoTracks = function(){
 
        040       return this.videoTracks;
 
        041     }
 
        042   }
 
        043   if (!!localstream.audioTracks && !localstream.getAudioTracks) {
 
        044     localstream.getAudioTracks = function(){
 
        045       return this.audioTracks;
 
        046     }
 
        047   }
 
        048   ///////////////////////////////////////////
 
        049  
 
        050   if (localstream.getVideoTracks().length > 0)
 
        051     trace('Using Video device: ' + localstream.getVideoTracks()[0].label);
 
        052   if (localstream.getAudioTracks().length > 0)
 
        053     trace('Using Audio device: ' + localstream.getAudioTracks()[0].label);
 
        054   var servers = null;
 
        055   window.pc1 = new webkitRTCPeerConnection(servers);
 
        056   trace("Created local peer connection object pc1");
 
        057   pc1.onicecandidate = iceCallback1;
 
        058   window.pc2 = new webkitRTCPeerConnection(servers);
 
        059   trace("Created remote peer connection object pc2");
 
        060   pc2.onicecandidate = iceCallback2;
 
        061   pc2.onaddstream = gotRemoteStream;
 
        062  
 
        063   pc1.addStream(localstream);
 
        064   trace("Adding Local Stream to peer connection");
 
        065  
 
        066   pc1.createOffer(gotDescription1);
 
        067 }
 
        068  
 
        069 function gotDescription1(desc){
 
        070   pc1.setLocalDescription(desc);
 
        071   trace("Offer from pc1 \n" + desc.sdp);
 
        072   pc2.setRemoteDescription(desc);
 
        073   pc2.createAnswer(gotDescription2);
 
        074 }
 
        075  
 
        076 function gotDescription2(desc){
 
        077   pc2.setLocalDescription(desc);
 
        078   trace("Answer from pc2 \n" + desc.sdp);
 
        079   pc1.setRemoteDescription(desc);
 
        080 }
 
        081  
 
        082 function hangup() {
 
        083   trace("Ending call");
 
        084   pc1.close();
 
        085   pc2.close();
 
        086   pc1 = null;
 
        087   pc2 = null;
 
        088   btn3.disabled = true;
 
        089   btn2.disabled = false;
 
        090 }
 
        091  
 
        092 function gotRemoteStream(e){
 
        093   vid2.src = webkitURL.createObjectURL(e.stream);
 
        094   trace("Received remote stream");
 
        095 }
 
        096  
 
        097 function iceCallback1(event){
 
        098   if (event.candidate) {
 
        099     pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
 
        100     trace("Local ICE candidate: \n" + event.candidate.candidate);
 
        101   }
 
        102 }
 
        103  
 
        104 function iceCallback2(event){
 
        105   if (event.candidate) {
 
        106     pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
 
        107     trace("Remote ICE candidate: \n " + event.candidate.candidate);
 
        108   }
 
        109 }