流媒体协议之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 navigatindex.php/tags-1038.html" >or.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页的前端面试题