webrtc.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. var rtc_getTool = function(onmessage,onaddstream,onclose,onopen){
  2. //兼容不同浏览器客户端之间的连接,使用官方的兼用库 <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script><!--webrtc 兼容库-->
  3. var PeerConnection = RTCPeerConnection;
  4. //兼容不同浏览器获取到用户媒体对象
  5. var getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.mediaDevices.getUserMedia);
  6. //兼容不同浏览器
  7. var SessionDescription = (window.RTCSessionDescription || window.mozRTCSessionDescription || window.webkitRTCSessionDescription);
  8. var pc = null;//本地peerConnection对象
  9. var oppositeChannel = null;//远端的数据通道
  10. var localStream = null;//本地摄像头视频流
  11. var createPeerConnection = function(){
  12. //创建PeerConnection实例
  13. pc = new PeerConnection();
  14. pc.localChannel = pc.createDataChannel({
  15. ordered: false,
  16. maxRetransmitTime: 3000,
  17. });//本地通道,本地通道接收由远程通道发送过来的数据
  18. pc.localChannel.onerror = function (error) {
  19. console.log("数据传输通道建立异常:", error);
  20. };
  21. pc.localChannel.onopen = function () {
  22. console.log("本地数据通道建立成功");
  23. onopen();
  24. };
  25. pc.localChannel.onclose = function () {
  26. console.log("关闭数据传输通道");
  27. onclose();
  28. close();
  29. pc = null;
  30. };
  31. pc.localChannel.onmessage = function(event){
  32. onmessage(event);
  33. };
  34. pc.ondatachannel = function(event) {
  35. //对方的通道,发送数据使用这个通道,则发到对方的本地通道的onmessage回调,反之使用本地通道发送数据则oppositeChannel通道的onmessage接收到数据
  36. oppositeChannel = event.channel;
  37. };
  38. pc.onaddstream = function(event){//如果检测到媒体流连接到本地,将其绑定到一个video标签上输出
  39. onaddstream(event.stream);
  40. };
  41. pc.onicecandidate = function(event){//发送候选到其他客户端
  42. if (event.candidate !== null) {
  43. var candidate = {"candidate":event.candidate,"type":"_candidate"};
  44. chat_sendMsg(8,JSON.stringify(candidate));
  45. }
  46. };
  47. }
  48. /**
  49. * 发送发起信令
  50. */
  51. var sendOffer = function(){
  52. pc.createOffer(function(desc){
  53. pc.setLocalDescription(desc);
  54. chat_sendMsg(6,JSON.stringify({"sdp":desc,"type":"_offer"}));
  55. }, function (error) {
  56. console.log("发起信令失败:" + error);
  57. });
  58. }
  59. /**
  60. * 发送响应信令
  61. */
  62. var sendAnswer = function(){
  63. pc.createAnswer(function(desc){
  64. pc.setLocalDescription(desc);
  65. chat_sendMsg(7,JSON.stringify({"sdp":desc,"type":"_answer"}));
  66. }, function (error) {
  67. console.log("响应信令失败:" + error);
  68. });
  69. }
  70. /**
  71. * 处理发送过来的信令 temp 在群组的时候代表 回复给指定的人
  72. * @param {jsonObject} json 收到的消息,json对象
  73. */
  74. var signallingHandle = function(json){
  75. //如果是一个ICE的候选,则将其加入到PeerConnection中,否则设定对方的session描述为传递过来的描述
  76. if(json.type === "_candidate" ){
  77. pc.addIceCandidate(new RTCIceCandidate(json.candidate));
  78. }else{
  79. pc.setRemoteDescription(new SessionDescription(json.sdp),
  80. function(){
  81. // 如果是一个offer,那么需要回复一个answer
  82. if(json.type === "_offer") {
  83. sendAnswer();
  84. }
  85. }
  86. );
  87. }
  88. }
  89. /**
  90. * 通过建立的webrtc本地通道发送数据给对方
  91. * 传入的参数不会经过任何处理,直接发送过去
  92. * @param {object} msg
  93. */
  94. var send = function(msg){
  95. oppositeChannel.send(msg);
  96. }
  97. /**
  98. * 调用摄像头创建视频,音频对象,将对象流传入到回调中
  99. * @param {*} callbackLocalVideo 回调
  100. * @param {*} video 是否启动视频
  101. * @param {*} audio 是否启动音频
  102. */
  103. var openVideoAudioLocal = function(callbackLocalVideo,video,audio){
  104. getUserMedia.call(navigator, {
  105. video: video,//启动视频
  106. audio: audio//启动音频
  107. },function(localMediaStream) {//获取流成功的回调函数
  108. callbackLocalVideo(localMediaStream);
  109. },function(error){
  110. console.log("创建本地媒体对象失败:" + error);
  111. });
  112. }
  113. /**
  114. * 将打开的视频流发送给对方,同时发送offer信令通知
  115. * @param {视频流} stream
  116. */
  117. var sendAddStream = function(stream){
  118. localStream = stream;
  119. pc.addStream(localStream);
  120. sendOffer();
  121. }
  122. /**
  123. * 关闭webrtc通道
  124. */
  125. var close = function(){
  126. if(pc != null){
  127. closeStream();
  128. pc.localChannel.close();
  129. pc.close();
  130. pc = null;
  131. oppositeChannel = null;
  132. chat_sendMsg(4,"");//给对方发送关闭通道消息
  133. }
  134. }
  135. /**
  136. * 关闭本地视频流
  137. */
  138. var closeStream = function(){
  139. if(localStream != null){
  140. if(localStream.getVideoTracks()[0]){
  141. localStream.getVideoTracks()[0].stop();
  142. }
  143. if(localStream.getAudioTracks()[0]){
  144. localStream.getAudioTracks()[0].stop();
  145. }
  146. if(localStream.getTracks()[0]){
  147. localStream.getTracks()[0].stop();
  148. }
  149. localStream = null;
  150. }
  151. }
  152. return {
  153. "closeStream":closeStream,
  154. "sendAddStream":sendAddStream,
  155. "openVideoAudioLocal":openVideoAudioLocal,
  156. "close":close,
  157. "signallingHandle":signallingHandle,
  158. "sendOffer":sendOffer,
  159. "sendAnswer":sendAnswer,
  160. "createPeerConnection":createPeerConnection,
  161. "send":send};
  162. }