working rtc connection
This commit is contained in:
Thomas
@@ -1,4 +1,7 @@
|
||||
import { send } from './signalPlugin'
|
||||
import store from './index'
|
||||
|
||||
var lastPeer // horrible
|
||||
|
||||
const configuration = {
|
||||
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||
@@ -6,7 +9,7 @@ const configuration = {
|
||||
|
||||
const state = {
|
||||
name: null,
|
||||
connections: new Map()
|
||||
peers: []
|
||||
}
|
||||
|
||||
const getters = {
|
||||
@@ -17,15 +20,21 @@ const actions = {
|
||||
setName ({ commit }, name) {
|
||||
commit('SET_NAME', name)
|
||||
},
|
||||
async offer ({ commit }, offer, name) {
|
||||
commit('CREATE_PEER_CONNECTION', name)
|
||||
commit('ANSWER', name, offer)
|
||||
async makeOffer ({ commit }, targetName) {
|
||||
commit('CREATE_PEER_CONNECTION', targetName)
|
||||
commit('OFFER', targetName)
|
||||
},
|
||||
answer ({ commit }, answer, name) {
|
||||
commit('OFFER', name, answer)
|
||||
async offer ({ commit }, { offer, senderName }) {
|
||||
console.log('offer from ' + senderName)
|
||||
commit('CREATE_PEER_CONNECTION', senderName)
|
||||
commit('ANSWER', { target: senderName, offer: offer })
|
||||
},
|
||||
candidate ({ commit }, candidate, name) {
|
||||
commit('ANSWER', name, candidate)
|
||||
answer ({ commit }, { answer, senderName }) {
|
||||
console.log('answer from ' + senderName)
|
||||
commit('FINALIZE', { target: senderName, answer: answer })
|
||||
},
|
||||
candidate ({ commit }, { candidate, senderName }) {
|
||||
commit('CANDIDATE', { target: senderName, candidate: candidate })
|
||||
},
|
||||
leave ({ commit }) {
|
||||
commit('LEAVE')
|
||||
@@ -40,78 +49,105 @@ const mutations = {
|
||||
state.name = name
|
||||
},
|
||||
CREATE_PEER_CONNECTION (state, target) {
|
||||
console.log('CREATED PEER CONNECTION')
|
||||
var connection = new RTCPeerConnection(configuration)
|
||||
state.connections[target] = connection
|
||||
console.log('[RTC] create peer connection with ' + target)
|
||||
var peer = {
|
||||
name: target,
|
||||
connection: new RTCPeerConnection(configuration),
|
||||
dataChannel: null
|
||||
}
|
||||
|
||||
connection.onicecandidate = function (event) {
|
||||
state.peers.push(peer)
|
||||
|
||||
peer.connection.onicecandidate = function (event) {
|
||||
if (event.candidate) {
|
||||
send({
|
||||
type: 'candidate',
|
||||
name: name,
|
||||
name: state.name,
|
||||
target: target,
|
||||
candidate: event.candidate
|
||||
data: event.candidate
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
connection.onnegotiationneeded = function () { handleNegotiationNeededEvent(target) }
|
||||
connection.onsignalingstatechange = function () { handleSignalingStateChangeEvent(connection) }
|
||||
connection.oniceconnectionstatechange = function () { handleICEConnectionStateChangeEvent(connection) }
|
||||
connection.onicegatheringstatechange = function () { handleICEGatheringStateChangeEvent(connection) }
|
||||
peer.connection.onnegotiationneeded = function () { handleNegotiationNeededEvent(target) }
|
||||
peer.connection.onsignalingstatechange = function () { handleSignalingStateChangeEvent(peer.connection) }
|
||||
peer.connection.oniceconnectionstatechange = function () { handleICEConnectionStateChangeEvent(peer.connection) }
|
||||
peer.connection.onicegatheringstatechange = function () { handleICEGatheringStateChangeEvent(peer.connection) }
|
||||
},
|
||||
CREATE_DATA_CHANNEL (state) {
|
||||
async OFFER (state, target) {
|
||||
console.log('[RTC] make offer to ' + target)
|
||||
var peer = state.peers.find(peer => peer.name === target)
|
||||
|
||||
peer.dataChannel = peer.connection.createDataChannel('dataChannel')
|
||||
peer.dataChannel.onopen = handleDataChannelStateChangeEvent
|
||||
peer.dataChannel.onclose = handleDataChannelStateChangeEvent
|
||||
|
||||
var offer = await peer.connection.createOffer()
|
||||
send({
|
||||
type: 'offer',
|
||||
name: state.name,
|
||||
target: target,
|
||||
data: offer
|
||||
})
|
||||
await peer.connection.setLocalDescription(offer)
|
||||
},
|
||||
ANSWER (state, target, offer) {
|
||||
var connection = state.connections[target]
|
||||
async ANSWER (state, { target, offer }) {
|
||||
console.log('[RTC] answer to ' + target)
|
||||
var peer = state.peers.find(peer => peer.name === target)
|
||||
|
||||
connection.setRemoteDescription(new RTCSessionDescription(offer))
|
||||
// Permet d'associer le datachannel de la callback au bon peer
|
||||
lastPeer = peer
|
||||
|
||||
var answer = connection.createAnswer()
|
||||
peer.connection.ondatachannel = handleDataChannelCallback
|
||||
|
||||
connection.setLocalDescription(answer)
|
||||
await peer.connection.setRemoteDescription(new RTCSessionDescription(offer))
|
||||
|
||||
var answer = await peer.connection.createAnswer()
|
||||
|
||||
await peer.connection.setLocalDescription(answer)
|
||||
|
||||
send({
|
||||
type: 'answer',
|
||||
name: name,
|
||||
name: state.name,
|
||||
target: target,
|
||||
answer: answer
|
||||
data: answer
|
||||
})
|
||||
},
|
||||
OFFER (state, target, answer) {
|
||||
var connection = state.connections[target]
|
||||
connection.setRemoteDescription(new RTCSessionDescription(answer))
|
||||
FINALIZE (state, { target, answer }) {
|
||||
var peer = state.peers.find(peer => peer.name === target)
|
||||
peer.connection.setRemoteDescription(new RTCSessionDescription(answer))
|
||||
},
|
||||
CANDIDATE (state, target, candidate) {
|
||||
var connection = state.connections[target]
|
||||
connection.addIceCandidate(new RTCIceCandidate(candidate))
|
||||
CANDIDATE (state, { target, candidate }) {
|
||||
var peer = state.peers.find(peer => peer.name === target)
|
||||
peer.connection.addIceCandidate(new RTCIceCandidate(candidate))
|
||||
},
|
||||
LEAVE (state) {
|
||||
state.connections.forEach((connection) => {
|
||||
connection.close()
|
||||
connection = null
|
||||
state.peers.forEach((peer) => {
|
||||
peer.connection.close()
|
||||
})
|
||||
state.connections = new Map()
|
||||
state.peers = {}
|
||||
},
|
||||
BROADCAST (state, message) {
|
||||
state.peers.forEach(peer => {
|
||||
peer.dataChannel.send(message)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handleICEConnectionStateChangeEvent (connection) {
|
||||
console.log('ICE CONNECTION CHANGE ' + connection.iceConnectionState)
|
||||
console.log('[RTC] ice connection change to ' + connection.iceConnectionState)
|
||||
}
|
||||
|
||||
function handleICEGatheringStateChangeEvent (connection) {
|
||||
console.log('ICE GATHERING CHANGE ' + connection.iceGatheringState)
|
||||
console.log('[RTC] ice gathering change to ' + connection.iceGatheringState)
|
||||
}
|
||||
|
||||
async function handleNegotiationNeededEvent (target) {
|
||||
console.log('NEGOTIATION NEEDED FROM ' + target)
|
||||
console.log('[RTC] negotiation needed from ' + target)
|
||||
}
|
||||
|
||||
async function handleSignalingStateChangeEvent (connection) {
|
||||
console.log('STATE CHANGED TO : ' + connection.signalingState)
|
||||
console.log('[RTC] state changed to ' + connection.signalingState)
|
||||
switch (connection.signalingState) {
|
||||
case 'closed':
|
||||
await connection.close()
|
||||
@@ -119,6 +155,33 @@ async function handleSignalingStateChangeEvent (connection) {
|
||||
}
|
||||
}
|
||||
|
||||
function handleDataChannelStateChangeEvent () {
|
||||
console.log('[RTC] data channel state change')
|
||||
}
|
||||
|
||||
function handleDataChannelCallback (event) {
|
||||
console.log('[RTC] data channel callback ' + event)
|
||||
var peer = lastPeer
|
||||
peer.dataChannel = event.channel
|
||||
peer.dataChannel.onmessage = handleDataChannelMessage
|
||||
peer.dataChannel.onopen = handleDataChannelStateChangeEvent
|
||||
peer.dataChannel.onclose = handleDataChannelStateChangeEvent
|
||||
|
||||
store.dispatch('rtc/broadcast', store.state.room.roomStatus)
|
||||
}
|
||||
|
||||
function handleDataChannelMessage (event) {
|
||||
console.log('[RTC] data channel message ' + event.data)
|
||||
var data = event.data
|
||||
switch (data.type) {
|
||||
case 'status':
|
||||
store.dispatch('room/setRoomStatus', data.message)
|
||||
break
|
||||
case 'vote':
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
|
||||
Reference in New Issue
Block a user