webRTC 初探

2019年8月25日 203次阅读 来源: frontoldman

webRTC引见

webRTC是英文Web Real-Time Communication的缩写，中文翻译网页及时通讯，是浏览器不须要服务器的中转，能够直接通讯的手艺

webRTC 运用

网上的许多教程都邑包括及时视频的引见，不过我觉得视频看起来很酷，不过却不是webRTC的运用难点，却明显增加webRTC的运用复杂度，能够略过

webRTC是客户端对客户端的单对单及时通讯，然则照样须要服务器，就比如一个婚介所的作用

下面我们经由过程socket.io作为服务器端完成简朴的谈天功用

完成步骤

  1. 提议方向服务器发出关照并初始化RTCPeerConnection

  2. 服务器吸收到关照关照吸收并初始化RTCPeerConnection

  3. 两边都监听onicecandidate事宜，并在回调内里把event.candidate上传到服务器

  4. 双发都监听ondatachannel事宜，并在回调内里给event.channel监听onmessage事宜

  5. 提议方挪用createOffer要领，并在这个要领的回调中给本身的RTCPeerConnection实例设置setLocalDescription，并向服务器发送本身的Description

  6. 吸收方在服务器推送给本身的音讯内里把5中的Description设置为本身的RTCPeerConnection实例的RemoteDescription，并挪用createAnswer要领，在此要领的回调当中设置setLocalDescription，并把本身的Description上传到服务器

  7. 提议方吸收到服务器推送给本身的Description,设置为LocalDescription，至此两边衔接竖立

两边能够挪用本身的channel的send要领发送文本音讯

至于挪用视频和音频，我觉着这部份运用起来比较简朴，不绕

步骤就是一方的开启视频，猎取视频流，添加到RTCPeerConnection实例中，衔接的别的一方监听onaddstream事宜，猎取视频流，OK

多人会话的话，同一个RTCPeerConnection实例是不能够多人会话的。假如要多人会话，就要单对单竖立多个衔接。一样的步骤实行屡次就能够了

客户端代码

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<table width="800px">
  <tr>
    <td>
      <video id="myVideo"></video>
    </td>
    <td>
      <div style="height: 200px;overflow: auto"></div>
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <textarea style="height: 200px;width: 400px" id="textarea"></textarea>
    </td>
  </tr>
</table>


<button id="start">最先</button>
<button id="stop">完毕</button>
<button id="send">发送</button>

<script src='/socket.io/socket.io.js'></script>
<script src="js/index.js"></script>


</body>
</html>

js

var video = document.getElementById('video')
var localPeerConnection, remotePeerConnection
var localChannel

var socket = io.connect('http://localhost:8181')

// 翻开页面即开启守候形式
startWaiting()

function startWaiting() {
  
  var servers = {
    "iceServers": [{
      "url": "stun:stun.l.google.com:19302"
    }]
  }

  var pc_constraints = {
    optional: [{
      DtlsSrtpKeyAgreement: true
    }]
  }

  localPeerConnection = new RTCPeerConnection(servers, pc_constraints)

  localChannel = localPeerConnection.createDataChannel('sendDataChannel', { reliable: true })

  localPeerConnection.onicecandidate = function(event) {
    if (event.candidate) {
      socket.emit('onicecandidate', event.candidate)
    }
  }

  localChannel.onopen = function() {
    console.log('open')
  }

  localChannel.onclose = function() {
    console.log('close')
  }

  localPeerConnection.ondatachannel = function(event) {
    console.log(event.channel)

    event.channel.onmessage = function(msg) {
      console.log('event msg', msg)
    }
  }


  socket.on('offer', function(desc) {
    console.log('offer: ', desc)
    localPeerConnection.setRemoteDescription(desc)
    setRemote = true
    localPeerConnection.createAnswer(function(desc) {
       localPeerConnection.setLocalDescription(desc)
       socket.emit('answer', desc)
    }, function(error){console.log(error)})
  })

  socket.on('answer', function(desc) {
    console.log('answer: ', desc)
    localPeerConnection.setRemoteDescription(desc)
    console.log('answer end')
    setRemote = true
  })

  socket.on('onicecandidate', function(icecandidate) {
    localPeerConnection.addIceCandidate(icecandidate)
  })




}

document.getElementById('start').onclick = function() {
  localPeerConnection.createOffer(function(desc) {
    localPeerConnection.setLocalDescription(desc)
    socket.emit('offer', desc)
  }, function(error){console.log(error)})
}

document.getElementById('send').onclick = function() {
  var value = document.getElementById('textarea').value
  localChannel.send(value)
}

服务端代码

var static = require('node-static')

var http = require('http')

var file = new(static.Server)()

var app = http.createServer(function (req, res) {
  file.serve(req, res);
}).listen(8181);

var io = require('socket.io').listen(app)

io.sockets.on('connection', function(socket) {

  socket.on('offer',function(desc) {
    socket.broadcast.emit('offer', desc)
  })

  socket.on('answer',function(desc) {
    socket.broadcast.emit('answer', desc)
  })

  socket.on('onicecandidate', function(candidate) {
    socket.broadcast.emit('onicecandidate', candidate)
  })

  socket.on('message', function(message) {
    socket.broadcast.to(message.channel).emit('message', message.message)
  })


})
    原文作者：frontoldman
    原文地址: https://segmentfault.com/a/1190000009222753
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞