title: I want to do peer to peer video Chat through webRTC by using pure javaScript
body: <p>I am new to webRTC i made a code for video Chat it is successfully executing by I don't want to use scaledrone.I want to use pure JavasCript. How will i do it please help me </p>
  
  <p><strong>html and css</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;style&gt;
      body {
        display: flex;
        height: 100vh;
        margin: 0;
        align-items: center;
        justify-content: center;
        padding: 0 50px;
        font-family: -apple-system, BlinkMacSystemFont, sans-serif;
      }
      video {
        max-width: calc(50% - 100px);
        margin: 0 50px;
        box-sizing: border-box;
        border-radius: 2px;
        padding: 0;
        box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
      }
      .copy {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: rgba(0, 0, 0, 0.5);
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="copy"&gt;Send your URL to a friend to start a video call&lt;/div&gt;
    &lt;video id="localVideo" autoplay muted&gt;&lt;/video&gt;
    &lt;video id="remoteVideo" autoplay&gt;&lt;/video&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>scaledrone script</strong></p>
  
  <pre><code>  &lt;script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'&gt;&lt;/script&gt;
  
  </code></pre>
  
  <p><strong>main js</strong></p>
  
  <pre><code> &lt;script&gt;
  
        // Generate random room name if needed
  if (!location.hash) {
    location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
  }
  const roomHash = location.hash.substring(1);
  
  // TODO: Replace with your own channel ID
  const drone = new ScaleDrone('yiS12Ts5RdNhebyM');
  // Room name needs to be prefixed with 'observable-'
  const roomName = 'observable-' + roomHash;
  const configuration = {
    iceServers: [{
      urls: 'stun:stun.l.google.com:19302'
    }]
  };
  let room;
  let pc;
  
  
  function onSuccess() {};
  function onError(error) {
    console.error(error);
  };
  
  drone.on('open', error =&gt; {
    if (error) {
      return console.error(error);
    }
    room = drone.subscribe(roomName);
    room.on('open', error =&gt; {
      if (error) {
        onError(error);
      }
    });
    // We're connected to the room and received an array of 'members'
    // connected to the room (including us). Signaling server is ready.
    room.on('members', members =&gt; {
      console.log('MEMBERS', members);
      // If we are the second user to connect to the room we will be creating the offer
      const isOfferer = members.length === 2;
      startWebRTC(isOfferer);
    });
  });
  
  // Send signaling data via Scaledrone
  function sendMessage(message) {
    drone.publish({
      room: roomName,
      message
    });
  }
  
  function startWebRTC(isOfferer) {
    pc = new RTCPeerConnection(configuration);
  
    // 'onicecandidate' notifies us whenever an ICE agent needs to deliver a
    // message to the other peer through the signaling server
    pc.onicecandidate = event =&gt; {
      if (event.candidate) {
        sendMessage({'candidate': event.candidate});
      }
    };
  
    // If user is offerer let the 'negotiationneeded' event create the offer
    if (isOfferer) {
      pc.onnegotiationneeded = () =&gt; {
        pc.createOffer().then(localDescCreated).catch(onError);
      }
    }
  
    // When a remote stream arrives display it in the #remoteVideo element
    pc.ontrack = event =&gt; {
      const stream = event.streams[0];
      if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) {
        remoteVideo.srcObject = stream;
      }
    };
  
    navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    }).then(stream =&gt; {
      // Display your local video in #localVideo element
      localVideo.srcObject = stream;
      // Add your stream to be sent to the conneting peer
      stream.getTracks().forEach(track =&gt; pc.addTrack(track, stream));
    }, onError);
  
    // Listen to signaling data from Scaledrone
    room.on('data', (message, client) =&gt; {
      // Message was sent by us
      if (client.id === drone.clientId) {
        return;
      }
  
      if (message.sdp) {
        // This is called after receiving an offer or answer from another peer
        pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () =&gt; {
          // When receiving an offer lets answer it
          if (pc.remoteDescription.type === 'offer') {
            pc.createAnswer().then(localDescCreated).catch(onError);
          }
        }, onError);
      } else if (message.candidate) {
        // Add the new ICE candidate to our connections remote description
        pc.addIceCandidate(
          new RTCIceCandidate(message.candidate), onSuccess, onError
        );
      }
    });
  }
  
  function localDescCreated(desc) {
    pc.setLocalDescription(
      desc,
      () =&gt; sendMessage({'sdp': pc.localDescription}),
      onError
    );
  }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Please help me out how will I set up p2p connection using pure js without using scaledrone. please help me out. Thanks in advance</p>