JSFiddle - React, Tailwind, and code Playground

ApiRTC

by mozfet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cloud.apizee.com/apiRTC/apiRTC-latest.min.debug.js"></script>
<body>
  <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"  ></audio>
  <div id="command"></div>
  <div id="status"></div>
  <div id="local" style="position: absolute; width:640px; height:480px;">
     <video id="myLocalVideo" autoplay="autoplay" muted="true"></video>
  </div>
  <div id="remote" style="position: absolute;">
    <div id="myRemoteVideo" style="width:640px; height:480px;"></div>
    <div id="mini">
      <video width="20%" height="20%" id="myMiniVideo" autoplay="autoplay" muted="true"></video>
    </div>
  </div>
</body>

JavaScript

//apiRTC initialization
apiRTC.init({
  apiKey : "6d5d9e0862e0b118590b248fca093740",
  // apiCCId : "1",
  onReady() {
    console.log('Session created with sessionId :' + apiRTC.session.apiCCId)
    const webRTCClient = apiRTC.session.createWebRTCClient({
        localVideo : "myLocalVideo",
        minilocalVideo : "myMiniVideo",
        remoteVideo : "myRemoteVideo",
        status : "status",
        command : "command"
    })
  }
})
      
apiRTC.addEventListener('incomingCall', event => {
  audio.play()
})

apiRTC.addEventListener('callEstablished', event => {
  audio.stop()
})