流媒体协议之WebRTC实现p2p视频通话（二）

socket.on(‘iceCandidate’, ({ iceCandidate }) => {
console.log(‘远端添加iceCandidate’);
this.peer && this.peer.addIceCandidate(new RTCIceCandidate(iceCandidate))
})

})
}
addEvent(name, cb) {
if (!this.socket) return
this.socket.on(name, (data) => {
cb.call(this, data)
})
}
sendMessage(name, data) {
if (!this.socket) return
this.socket.emit(name, data)
}
// 获取本地媒体流
async getLocalMedia() {
let localMedia = await navigator.mediaDevices
.getUserMedia({ video: { facingMode: “user” }, audio: true })
.catch(e => {
console.log(e)
})
this.localMedia = localMedia
return this
}
// 设置媒体流到video
setMediaTo(eleId, media) {
document.getElementById(eleId).srcObject = media
}
// 被叫响应
called(callingInfo) {
this.calledHandle && this.calledHandle(callingInfo)
}
// 创建RTC
createLoacalPeer() {
this.peer = new RTCPeerConnection()
return this
}
// 将媒体流加入通信
addTrack() {
if (!this.peer || !this.localMedia) return
//this.localMedia.getTracks().forEach(track => this.peer.addTrack(track, this.localMedia));
this.peer.addStream(this.localMedia)
return this
}
// 创建 SDP offer
async createOffer(cb) {
if (!this.peer) return
let offer = await this.peer.createOffer({ OfferToReceiveAudio: true, OfferToReceiveVideo: true })
this.peer.setLocalDescription(offer)
cb && cb(offer)
return this
}
async createAnswer(offer, cb) {
if (!this.peer) return
this.peer.setRemoteDescription(offer)
let answer = await this.peer.createAnswer({ OfferToReceiveAudio: true, OfferToReceiveVideo: true })
this.peer.setLocalDescription(answer)
cb && cb(answer)
return this

}
listenerAddStream(cb) {
this.peer.addEventListener(‘addstream’, event => {
console.log(‘addstream事件触发’, event.stream);
cb && cb(event.stream);
})
return this
}
// 监听候选加入
listenerCandidateAdd(cb) {
this.peer.addEventListener(‘icecandidate’, event => {
let iceCandidate = event.candidate;
if (iceCandidate) {
console.log(‘发送candidate给远端’);
cb && cb(iceCandidate);
}

})
return this
}
// 检测ice协商过程
listenerGatheringstatechange () {
this.peer.addEventListener(‘icegatheringstatechange’, e => {
console.log(‘ice协商中: ‘, e.target.iceGatheringState);
})
return this
}
// 关闭RTC
closeRTC() {
// …
}
}

后端

const SocketIO = require(‘socket.io’)
const socketIO = new SocketIO({
path: ‘/websocket’
})

let userRoom = {
list: [],
add(user) {
this.list.push(user)
return this
},
del(id) {
this.list = this.list.filter(u => u.id !== id)
return this
},
sendAllUser(name, data) {
this.list.forEach(({ id }) => {
console.log(‘>>>>>’, id)
socketIO.to(id).emit(name, data)
})
return this
},
sendTo(id) {
return (eventName, data) => {
socketIO.to(id).emit(eventName, data)
}

2.后端

const SocketIO = require(‘socket.io’)
const socketIO = new SocketIO({
path: ‘/websocket’
})

let userRoom = {
list: [],
add(user) {
this.list.push(user)
return this
},
del(id) {
this.list = this.list.filter(u => u.id !== id)
return this
},
sendAllUser(name, data) {
this.list.forEach(({ id }) => {
console.log(‘>>>>>’, id)
socketIO.to(id).emit(name, data)
})
return this
},
sendTo(id) {
return (eventName, data) => {
socketIO.to(id).emit(eventName, data)
}
},
findName(id) {
return this.list.find(u => u.id === id).name
}
}

socketIO.on(‘connection’, function(socket) {
console.log(‘连接加入.’, socket.id)

socket.on(‘addUser’, function(data) {
console.log(data.name, ‘加入房间’)
let user = {
id: socket.id,
name: data.name,
calling: false
}
userRoom.add(user).sendAllUser(‘updateUserList’, userRoom.list)
})

socket.on(‘sendMessage’, ({ content }) => {
console.log(‘转发消息：’, content)
userRoom.sendAllUser(‘updateMessageList’, { userId: socket.id, content, user: userRoom.findName(socket.id) })
})

socket.on(‘iceCandidate’, ({ id, iceCandidate }) => {
console.log(‘转发信道’)
userRoom.sendTo(id)(‘iceCandidate’, { iceCandidate, id: socket.id })
})

socket.on(‘offer’, ({id, offer}) => {
console.log(‘转发offer’)
userRoom.sendTo(id)(‘called’, { offer, id: socket.id, name: userRoom.findName(socket.id)})
})

socket.on(‘answer’, ({id, answer}) => {

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题