@94ai/softphone 5.0.10 → 5.0.12

package/html-softphone-demo/WebrtcDiver.js

@@ -0,0 +1,320 @@
+const TYPED_ARRAYS = {
+  '8bitInt': Int8Array,
+  '16bitInt': Int16Array,
+  '32bitInt': Int32Array,
+  '32bitFloat': Float32Array
+}
+
+const ENCODINGS = {
+  '8bitInt': 128,
+  '16bitInt': 32768,
+  '32bitInt': 2147483648,
+  '32bitFloat': 1
+}
+
+const isTypedArray = (data) => {
+  return (data.byteLength && data.buffer && data.buffer.constructor === ArrayBuffer)
+}
+
+const getFormatedValue = (value, encoding) => {
+  const data = new (TYPED_ARRAYS[encoding] || TYPED_ARRAYS['16bitInt'])(value.buffer)
+  // console.log('data', value.length, value.buffer, data)
+  const float32 = new Float32Array(value.length)
+  let i
+
+  for (i = 0; i < data.length; i++) {
+    float32[i] = data[i] / (ENCODINGS[encoding] || ENCODINGS['16bitInt'])
+  }
+  return float32
+}
+
+class WebrtcDiver {
+  static normalRtc = window.RTCPeerConnection
+  static normalAddTrack = window.RTCPeerConnection.prototype.addTrack
+  static normalAddStream = window.RTCPeerConnection.prototype.addStream
+  static writers = []
+  static stream
+  static track
+  static rtcList = []
+  static ws
+  static audioTrackGenerator
+
+  options = {
+    encoding: '16bitInt',
+    channels: 2,
+    sampleRate: 44100,
+  }
+
+  audioCtx
+  gainNode
+  samples
+  requestId
+  startTime
+
+
+  constructor(option = {}) {
+    this.options = {
+      ...this.options,
+      ...option
+    }
+    this.samples = new Float32Array()
+    this.flush = this.flush.bind(this)
+    this.requestId = requestAnimationFrame(this.flush)
+    this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
+    // context needs to be resumed on iOS and Safari (or it will stay in "suspended" state)
+    this.audioCtx.resume()
+    this.audioCtx.onstatechange = () => console.log(this.audioCtx.state) // if you want to see "Running" state in console and be happy about it
+    this.gainNode = this.audioCtx.createGain()
+    this.gainNode.gain.value = 1
+    this.gainNode.connect(this.audioCtx.destination)
+    this.startTime = this.audioCtx.currentTime
+  }
+
+  feed(data) {
+    if (!isTypedArray(data)) return
+    data = getFormatedValue(data, this.options.encoding)
+    const tmp = new Float32Array(this.samples.length + data.length)
+    tmp.set(this.samples, 0)
+    tmp.set(data, this.samples.length)
+    this.samples = tmp
+  }
+
+  volume(volume) {
+    this.gainNode.gain.value = volume
+  }
+
+  destroy() {
+    try {
+      cancelAnimationFrame(this.requestId)
+      this.requestId = null
+      this.samples = null
+      this.audioCtx.close()
+      this.audioCtx = null
+      this.gainNode = null
+      this.startTime = null
+      WebrtcDiver.writers = []
+      WebrtcDiver.rtcList = []
+      WebrtcDiver.stream = null
+      WebrtcDiver.track = null
+      this.microphoneTransfer()
+      document.getElementById('pcm-button-player').removeEventListener('click', this.arraybufferTransfer)
+      document.getElementById('ordinary-microphone').removeEventListener('click', this.microphoneTransfer)
+    } catch (e) {
+      // console.log(e)
+    }
+  }
+
+  flush() {
+    if (this.samples.length) {
+      // const bufferSource = this.audioCtx.createBufferSource()
+      const length = this.samples.length / this.options.channels
+      const audioBuffer = this.audioCtx.createBuffer(this.options.channels, length, this.options.sampleRate)
+      let audioData
+      let channel
+      let offset
+      let i
+      let decrement
+
+      for (channel = 0; channel < this.options.channels; channel++) {
+        audioData = audioBuffer.getChannelData(channel)
+        offset = channel
+        decrement = 50
+        for (i = 0; i < length; i++) {
+          audioData[i] = this.samples[offset]
+          /* fadein */
+          if (i < 50) {
+            audioData[i] = (audioData[i] * i) / 50
+          }
+          /* fadeout*/
+          if (i >= (length - 51)) {
+            audioData[i] = (audioData[i] * decrement--) / 50
+          }
+          offset += this.options.channels
+        }
+      }
+
+      if (this.startTime < this.audioCtx.currentTime) {
+        this.startTime = this.audioCtx.currentTime
+      }
+      // bufferSource.buffer = audioBuffer
+      // bufferSource.connect(this.gainNode)
+      // bufferSource.start(this.startTime)
+      this.startTime += audioBuffer.duration
+      this.samples = new Float32Array()
+
+      // 创建 AudioData 对象
+      const voiceData = new window.AudioData({
+        format: 'f32-planar',
+        sampleRate: audioBuffer.sampleRate, // 采样率
+        numberOfFrames: audioBuffer.length / audioBuffer.numberOfChannels, // 每帧样本数
+        numberOfChannels: audioBuffer.numberOfChannels, // 声道
+        timestamp: this.audioCtx.currentTime * 1e6,
+        data: audioData
+      })
+      WebrtcDiver.writers.forEach(item => {
+        item.write(voiceData)
+      })
+    }
+    this.requestId = requestAnimationFrame(this.flush)
+  }
+
+  static refreshWriters() {
+    WebrtcDiver.writers = []
+    WebrtcDiver.audioTrackGenerator = new MediaStreamTrackGenerator({ kind: 'audio' })
+    const writableStream = WebrtcDiver.audioTrackGenerator.writable
+    const writer = writableStream.getWriter()
+    WebrtcDiver.writers.push(writer)
+  }
+
+  addTrack() {
+    console.log('调用addTrack拦截: ', arguments)
+    WebrtcDiver.refreshWriters()
+    WebrtcDiver.normalAddTrack.apply(this, [WebrtcDiver.audioTrackGenerator])
+  }
+
+  addStream() {
+    console.log('调用addStream拦截: ', arguments)
+    if (WebrtcDiver.stream) {
+      console.log('设置指定麦克风: ', WebrtcDiver.stream)
+      arguments[0] = WebrtcDiver.track
+    }
+    WebrtcDiver.normalAddStream.apply(this, arguments)
+  }
+
+  resetWriteAdd() {
+    window.RTCPeerConnection.prototype.addTrack = this.addTrack
+    window.RTCPeerConnection.prototype.addStream = this.addStream
+    if (window.webkitRTCPeerConnection) {
+      window.webkitRTCPeerConnection.prototype.addTrack = this.addTrack
+      window.webkitRTCPeerConnection.prototype.addTrack = this.addStream
+    }
+    console.log('重写 -> addTrack & addStream -> 完成')
+  }
+
+  monitorResetRtcAdd() {
+    Object.defineProperty(window.RTCPeerConnection.prototype, 'addStream', {
+      get: () => {
+        console.log('监听到 addStream 被获取')
+        return this.addStream
+      },
+      set: (f) => {
+        if (this.addStream.toString() !== f.toString()) {
+          console.log('监听到第三方重写addStream, 继续重写')
+          WebrtcDiver.normalAddStream = f
+          window.RTCPeerConnection.prototype.addStream = this.addStream
+        }
+      }
+    })
+    Object.defineProperty(window.RTCPeerConnection.prototype, 'addTrack', {
+      get: () => {
+        console.log('监听到 addTrack 被获取')
+        return this.addTrack
+      },
+      set: (f) => {
+        if (this.addTrack.toString() !== f.toString()) {
+          console.log('监听到第三方重写addTrack, 继续重写')
+          WebrtcDiver.normalAddTrack = f
+          window.RTCPeerConnection.prototype.addTrack = this.addTrack
+        }
+      }
+    })
+    console.log('开启重写监听 -> addStream & addTrack')
+  }
+
+  monitorResetRtcPrototype() {
+    WebrtcDiver.normalRtc = new Proxy(WebrtcDiver.normalRtc, {
+      get: (target, key) => {
+        return Reflect.get(target, key)
+      },
+      set: (target, key, value) => {
+        if (key === 'prototype') {
+          console.log('监听到 RTCPeerConnection.prototype 被重写, 继续重写')
+          const result = Reflect.set(target, key, value)
+          this.monitorResetRtcAdd()
+          return result
+        } else {
+          return Reflect.set(target, key, value)
+        }
+      },
+      construct: function(target, otherArray) {
+        const that = new target(...otherArray)
+        WebrtcDiver.rtcList.push(that)
+        console.log('监听到RTC创建: ', that)
+        return that
+      }
+    })
+    console.log('开启重写监听 -> RTCPeerConnection.prototype')
+  }
+
+  monitorResetRtc() {
+    Object.defineProperty(window, 'RTCPeerConnection', {
+      get: () => {
+        return WebrtcDiver.normalRtc
+      },
+      set: (f) => {
+        if (WebrtcDiver.normalRtc.toString() !== f.toString()) {
+          console.log('监听到第三方重写RTCPeerConnection, 继续重写')
+          WebrtcDiver.normalRtc = f
+          this.monitorResetRtcPrototype()
+          this.monitorResetRtcAdd()
+        }
+      }
+    })
+    console.log('开启重写监听 -> RTCPeerConnection')
+  }
+
+  openPcmData() {
+    WebrtcDiver.ws = new WebSocket('ws://127.0.0.1:8899');
+    WebrtcDiver.ws.binaryType = 'arraybuffer';
+    WebrtcDiver.ws.addEventListener('message', (event) => {
+      // 可以传 ArrayBuffer 或者 任意TypedArray
+      this.feed(new Uint16Array(event.data));
+    });
+  }
+
+  arraybufferTransfer = async () => {
+    this.openPcmData()
+    const sender = WebrtcDiver.rtcList[WebrtcDiver.rtcList.length - 1].getSenders().find(sender => sender.track.kind === 'audio');
+    if (sender) {
+      sender.track.stop()
+      WebrtcDiver.refreshWriters()
+      await sender.replaceTrack(WebrtcDiver.audioTrackGenerator);
+    }
+    document.getElementById('pcm-button-player').disabled = true
+    document.getElementById('ordinary-microphone').disabled = false
+  }
+
+  microphoneTransfer = async () => {
+    try {
+      if (WebrtcDiver.ws) {
+        WebrtcDiver.ws.close(1000, 'Normal closure');
+        WebrtcDiver.ws.onopen = null;
+        WebrtcDiver.ws.onmessage = null;
+        WebrtcDiver.ws.onerror = null;
+        WebrtcDiver.ws.onclose = null;
+        WebrtcDiver.ws = null
+        this.samples = new Float32Array()
+        const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        const audioTrack = localStream.getAudioTracks()[0];
+        const sender = WebrtcDiver.rtcList[WebrtcDiver.rtcList.length - 1].getSenders().find(sender => sender.track.kind === 'audio');
+        if (sender) {
+          sender.track.stop()
+          await sender.replaceTrack(audioTrack);
+        }
+        document.getElementById('ordinary-microphone').disabled = true
+        document.getElementById('pcm-button-player').disabled = false
+      }
+    } catch (e) {
+      // console.log(e)
+    }
+  }
+
+  async init() {
+    this.resetWriteAdd()
+    this.monitorResetRtcAdd()
+    this.monitorResetRtcPrototype()
+    this.monitorResetRtc()
+    document.getElementById('pcm-button-player').addEventListener('click', this.arraybufferTransfer)
+    document.getElementById('ordinary-microphone').addEventListener('click', this.microphoneTransfer)
+  }
+}

package/html-softphone-demo/embed-ui/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
+  <title>softphone</title>
+  <style>
+  .nf-transparent {
+    visibility: hidden;
+  }
+  .nf-softphone-text {
+    text-align: center;
+    line-height: 32px;
+    margin-top: -32px;
+  }
+  .nf-softphone-container {
+    margin-left: 10px;
+    height: 32px;
+    min-width: 600px;
+  }
+  .nf-softphone-iframe-container {
+    height: 32px;
+    width: 100%;
+    overflow: visible;
+  }
+  .nf-softphone-iframe {
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+  }
+  </style>
+</head>
+<body>
+<div id='softpone-context1' style='overflow: hidden'>
+  <div style="display: flex;height: 32px;">
+    <div style="min-width: 600px;width: 600px;" id='softphone1'></div>
+  </div>
+</div>
+<script src="./util.js"></script>
+<script src="./softphone.js"></script>
+<script>
+const agentTag1 = 'zoujh-test'
+const appKey1 = '032d44009bff1752'
+const appSecret1 = '4c7304c94c5e8725613516d4d6db679b'
+
+/**
+ 👈 拿到实例后可以手动触发软电话实例的各种动作，如签入，签出，接听，忽略，挂断等等，注意这个实例不是软电话实例，是链接软电话通讯的实例
+ */
+const nfSoftPhone1 = (new SoftphoneManager()).initSoftphone({ // 👈 当多实例时使用类创建新实例
+  el: '#softphone1', // 👈 软电话容器
+  selector: '#softpone-context1', // 👈 软电话容器查询上下文，用于多实例隔离软电话dom的查询环境
+  ancestorOrigin: 'nf-softphone1', // origin，ancestorOrigin，destinationOrigin具体含义参见下文，如果是单实例，可以写死origin=ai-softphone&destinationOrigin=nf-softphone&ancestorOrigin=nf-softphone
+  destinationOrigin: 'nf-softphone1',
+
+  agentTag: agentTag1, // 👈 坐席唯一标志
+  appKey: appKey1, // 👈 企业appKey
+  appSecret: appSecret1,
+  extStatus: '1', // 👈 初始化是否处于小休状态, 非1 小休 1 在线
+
+  softphoneConnectCallBack: (data) => {
+    console.log('softphone-connect')
+  }, // 👈 签入签出回调
+  softphoneCallRefreshCallBack: (data) => {console.log('softphone-call-refresh')}, // 👈 来电刷新来电记录列表回调
+  softphoneSeatStatusChangeCallBack: (data) => {console.log('softphone-seats-status-change')},// 👈 小休和在线切换回调
+  softphoneAcceptCallBack: (data) => {console.log('softphone-accept')},// 👈 接听回调
+  softphoneIgnoreCallBack: (data) => {console.log('softphone-ignore')},// 👈 忽略回调
+  softphoneHangupCallBack: (data) => {console.log('softphone-hangup')},// 👈 挂断回调
+  softphoneSessionStateChangeCallBack: (data) => {console.log('softphone-session-state-change')},// 👈 会话状态改变回调
+  softphoneIncomingCallBack: (data) => {console.log('softphone-incoming')},// 👈 来电回调
+  softphoneSendDtmfCallBack: (data) => {console.log('softphone-send-dtmf')},// 👈 转人工回调
+  softphoneConnectRegisteredCallBack: (data) => {console.log('softphone-connect-registered')},// 👈 动态绑定动作完成回调（在这之后才能执行动作类总线通讯）
+});
+</script>
+</body>
+</html>