self-webRTC.js

let servers = null
let pcConstraint = null
let dataConstraint = null
const localConnection = new RTCPeerConnection(null)
const remoteConnection = new RTCPeerConnection(null)
const dataChannel = localConnection.createDataChannel('chat', {
  negotiated: true,
  id: 0
})
const dataChannel2 = remoteConnection.createDataChannel('chat', {
  negotiated: true,
  id: 0
})

localConnection.addEventListener('iceconnectionstatechange', e =>
  console.log(e)
)
dataChannel.onopen = e => {
  dataChannel.send('Hello World')
}
dataChannel.onclose = e => console.log(e)
dataChannel2.onopen = e => {
  dataChannel2.send('Hello World')
}
dataChannel2.onclose = e => console.log(e)

localConnection.addEventListener('icecandidate', e => {
  if (e.candidate) remoteConnection.addIceCandidate(e.candidate)
})
remoteConnection.addEventListener('iceconnectionstatechange', e =>
  console.log(e)
)
remoteConnection.addEventListener('icecandidate', e => {
  if (e.candidate) remoteConnection.addIceCandidate(e.candidate)
})
dataChannel2.addEventListener('message', e => {
  console.log(e.data)
})
remoteConnection.addEventListener('iceconnectionstatechange', e =>
  console.log(e)
)
localConnection
  .createOffer({
    offerToReceiveAudio: 0,
    offerToReceiveVideo: 0
  })
  .then(
    async offer => {
      await localConnection.setLocalDescription(offer)
      await remoteConnection.setRemoteDescription(offer)
      const answer = await remoteConnection.createAnswer()
      await remoteConnection.setLocalDescription(answer)
      await localConnection.setRemoteDescription(answer)
    },
    err => console.log(err)
  )

// let recordOn = false
// let recordStream
// let d = document.getElementById('d')
// for (var i = 0; i < 256; i++) {
//   d.innerHTML += '<div></div>'
// }
// var dd = document.querySelectorAll('#d div')

// document.querySelector('#audio-record').addEventListener('click', () => {
//   if (recordOn) {
//     recordStream.getAudioTracks()[0].stop()
//     recordOn = false
//     return
//   }
//   recordOn = true
//   const audioContext = new AudioContext()
//   const analyser = audioContext.createAnalyser()
//   analyser.fftSize = 1024
//   // Setup all nodes
//   navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
//     recordStream = stream
//     const bufferLength = analyser.frequencyBinCount
//     const dataArray = new Uint8Array(bufferLength)
//     const mediaStreamSource = audioContext.createMediaStreamSource(stream)
//     mediaStreamSource.connect(analyser)
//     function getRecord() {
//       analyser.getByteFrequencyData(dataArray)
//       for (var j = 0; j < 256; j++) {
//         dd[j].style.height = dataArray[j] + 'px'
//         dd[j].style.background = 'rgba(' + (255 - j) + ',' + j * 2 + ',0,1)'
//       }
//       if (recordOn) requestAnimationFrame(getRecord)
//     }
//     requestAnimationFrame(getRecord)
//   })
// })