网页上如何使用WebRTC

最新推荐文章于 2024-12-23 14:28:00 发布

Anser11

最新推荐文章于 2024-12-23 14:28:00 发布

阅读量2.4k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一段简单的代码，展示了如何使用HTML5 WebRTC技术实现音视频通话的功能，包括请求本地设备媒体流、建立远程连接并共享音视频等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

标签： WebRTC

代码片段(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 }