基于WebRTC点对点视频通话解决方案

发表于 分类于 Disqus： 本文字数： 327 阅读时长 ≈ 1 分钟

基于 WebRTC 点对点视频通话解决方案

技术支持

  • 基于 WebRTC，实现点对点视频通话
  • 使用 signalr，发送即时消息

视频通话

视频通话

发送即时消息

使用facade-signalr-client发送即时消息

1
yarn add facade-signalr-client
  1. 定义即时消息类型
1
2
3
4
5
6
7
const NOTIFY_TYPE = {
  listen: 'listen', // A发送接听通知给B
  busy: 'busy', //B发送占线通知给A
  listened: 'listened', // B发送已接听通知给A
  reject: 'reject', // B发送拒绝接听通知给A
  handUp: 'handUp', // A先挂断后，发送挂断通知给B，或者B先挂断后，发送挂断通知给A
}
  1. 发送即时消息
1
2
3
4
5
6
7
8
9
10
11
12
13
import signalrClient from 'facade-signalr-client'

// message
const messageBody = JSON.stringify({
  targetUserId: 'B',
  notifyMessage: {
    type: NOTIFY_TYPE.listen,
  },
})
// send message
signalrClient.sendMessage('SendWebRTCMessage', messageBody).then(resp => {
  console.log('resp:' + resp)
})
  1. 接受即时消息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
signalrClient.receiveMessage('ReceiveWebRTCMessage', resp => {
  console.log('resp:' + resp)
  const senderUserId = resp.senderUserId
  const message = JSON.parse(response.notifyMessage)
  if (message.type === NOTIFY_TYPE.listen) {
    //....收到 A 的接听通知
  } else if (message.type === NOTIFY_TYPE.busy) {
    //....收到 B 的占线通知
  } else if (message.type === NOTIFY_TYPE.listened) {
    //....收到 B 的已接听的通知
  } else if (message.type === NOTIFY_TYPE.reject) {
    //....收到 B 拒绝接听 通知
  } else if (message.type === NOTIFY_TYPE.reject) {
    //....挂断通知
  }
})

注意事项

媒体流必须使用 https 才能使用，或者在每个用户使用的 chrome 浏览器上加入命令：

1
--unsafely-treat-insecure-origin-as-secure="http://192.168.0.187:8080"

更多关于 webrtc，可查看 webrtc 文档