webRTC引见
webRTC是英文Web Real-Time Communication的缩写,中文翻译网页及时通讯,是浏览器不须要服务器的中转,能够直接通讯的手艺
webRTC 运用
网上的许多教程都邑包括及时视频的引见,不过我觉得视频看起来很酷,不过却不是webRTC的运用难点,却明显增加webRTC的运用复杂度,能够略过
webRTC是客户端对客户端的单对单及时通讯,然则照样须要服务器,就比如一个婚介所的作用
下面我们经由过程socket.io作为服务器端完成简朴的谈天功用
完成步骤
提议方向服务器发出关照并初始化
RTCPeerConnection
服务器吸收到关照关照吸收并初始化
RTCPeerConnection
两边都监听
onicecandidate
事宜,并在回调内里把event.candidate
上传到服务器双发都监听ondatachannel事宜,并在回调内里给
event.channel
监听onmessage
事宜提议方挪用
createOffer
要领,并在这个要领的回调中给本身的RTCPeerConnection
实例设置setLocalDescription
,并向服务器发送本身的Description
吸收方在服务器推送给本身的音讯内里把5中的
Description
设置为本身的RTCPeerConnection
实例的RemoteDescription
,并挪用createAnswer
要领,在此要领的回调当中设置setLocalDescription
,并把本身的Description
上传到服务器提议方吸收到服务器推送给本身的
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)
})
})