oemProject/frontend/public/piVideo/web/templates/play_webrtc.tmpl

{{template "head.tmpl" .}}
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">Play webrtc video</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Play webrtc video</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</div>
<div class="content">
  {{template "player.tmpl" .}}

  {{template "foot.tmpl" .}}
</div>
<script>
  let webrtc, webrtcSendChannel;
  let mediaStream;

  $(document).ready(() => {
    startPlay();
  });

  async function startPlay() {
    mediaStream = new MediaStream();
    $("#videoPlayer")[0].srcObject =  mediaStream;
    webrtc = new RTCPeerConnection({
      iceServers: [{
        urls: ["stun:stun.l.google.com:19302"]
      }],
      sdpSemantics: "unified-plan"
    });
    webrtc.onnegotiationneeded = handleNegotiationNeeded;
    webrtc.onsignalingstatechange = signalingstatechange;

    webrtc.ontrack = ontrack
    let offer = await webrtc.createOffer({
            //iceRestart:true,
            offerToReceiveAudio:true,
            offerToReceiveVideo:true
        });
        await webrtc.setLocalDescription(offer);
  }

  function ontrack (event){
    console.log(event.streams.length + ' track is delivered');
    mediaStream.addTrack(event.track);
  }

  async function signalingstatechange (){
        switch (webrtc.signalingState){
            case 'have-local-offer':
            let uuid = $('#uuid').val();
            let channel = $('#channel').val();
            let url = "/stream/" + uuid + "/channel/" + channel + "/webrtc?uuid=" + uuid + '&channel=' + channel;
            $.post(url, {
              data: btoa(webrtc.localDescription.sdp)
            }, function(data) {
              try {
                console.log(data);
                webrtc.setRemoteDescription(new RTCSessionDescription({
                  type: 'answer',
                  sdp: atob(data)
                }))
              } catch (e) {
                console.warn(e);
              }

            });
                break;
            case 'stable':
                /*
                * There is no ongoing exchange of offer and answer underway.
                * This may mean that the RTCPeerConnection object is new, in which case both the localDescription and remoteDescription are null;
                * it may also mean that negotiation is complete and a connection has been established.
                */
                break;

            case 'closed':
                /*
                 * The RTCPeerConnection has been closed.
                 */
                break;

            default:
                console.log(`unhandled signalingState is ${webrtc.signalingState}`);
                break;
        }
    }

  async function handleNegotiationNeeded() {
    let uuid = $('#uuid').val();
    let channel = $('#channel').val();
    let url = "/stream/" + uuid + "/channel/" + channel + "/webrtc?uuid=" + uuid + '&channel=' + channel;
    let offer = await webrtc.createOffer();

    await webrtc.setLocalDescription(offer);
    $.post(url, {
      data: btoa(webrtc.localDescription.sdp)
    }, function(data) {
      try {
        console.log(data);
        webrtc.setRemoteDescription(new RTCSessionDescription({
          type: 'answer',
          sdp: atob(data)
        }))
      } catch (e) {
        console.warn(e);
      }

    });
  }

  $("#videoPlayer")[0].addEventListener('loadeddata', () => {
    $("#videoPlayer")[0].play();
    makePic();
  });

  $("#videoPlayer")[0].addEventListener('error', () => {
    console.log('video_error')
  });
</script>