github.com/pion/webrtc/v4@v4.0.1/examples/simulcast/jsfiddle/demo.js (about)

     1  /* eslint-env browser */
     2  
     3  // SPDX-FileCopyrightText: 2023 The Pion community <https://pion.ly>
     4  // SPDX-License-Identifier: MIT
     5  
     6  // Create peer conn
     7  const pc = new RTCPeerConnection({
     8    iceServers: [{
     9      urls: 'stun:stun.l.google.com:19302'
    10    }]
    11  })
    12  
    13  pc.oniceconnectionstatechange = (e) => {
    14    console.log('connection state change', pc.iceConnectionState)
    15  }
    16  pc.onicecandidate = (event) => {
    17    if (event.candidate === null) {
    18      document.getElementById('localSessionDescription').value = btoa(
    19        JSON.stringify(pc.localDescription)
    20      )
    21    }
    22  }
    23  
    24  pc.onnegotiationneeded = (e) =>
    25    pc
    26      .createOffer()
    27      .then((d) => pc.setLocalDescription(d))
    28      .catch(console.error)
    29  
    30  pc.ontrack = (event) => {
    31    console.log('Got track event', event)
    32    const video = document.createElement('video')
    33    video.srcObject = event.streams[0]
    34    video.autoplay = true
    35    video.width = '500'
    36    const label = document.createElement('div')
    37    label.textContent = event.streams[0].id
    38    document.getElementById('serverVideos').appendChild(label)
    39    document.getElementById('serverVideos').appendChild(video)
    40  }
    41  
    42  navigator.mediaDevices
    43    .getUserMedia({
    44      video: {
    45        width: {
    46          ideal: 4096
    47        },
    48        height: {
    49          ideal: 2160
    50        },
    51        frameRate: {
    52          ideal: 60,
    53          min: 10
    54        }
    55      },
    56      audio: false
    57    })
    58    .then((stream) => {
    59      document.getElementById('browserVideo').srcObject = stream
    60      pc.addTransceiver(stream.getVideoTracks()[0], {
    61        direction: 'sendonly',
    62        streams: [stream],
    63        sendEncodings: [
    64          // for firefox order matters... first high resolution, then scaled resolutions...
    65          {
    66            rid: 'f'
    67          },
    68          {
    69            rid: 'h',
    70            scaleResolutionDownBy: 2.0
    71          },
    72          {
    73            rid: 'q',
    74            scaleResolutionDownBy: 4.0
    75          }
    76        ]
    77      })
    78      pc.addTransceiver('video')
    79      pc.addTransceiver('video')
    80      pc.addTransceiver('video')
    81    })
    82  
    83  window.startSession = () => {
    84    const sd = document.getElementById('remoteSessionDescription').value
    85    if (sd === '') {
    86      return alert('Session Description must not be empty')
    87    }
    88  
    89    try {
    90      console.log('answer', JSON.parse(atob(sd)))
    91      pc.setRemoteDescription(JSON.parse(atob(sd)))
    92    } catch (e) {
    93      alert(e)
    94    }
    95  }
    96  
    97  window.copySDP = () => {
    98    const browserSDP = document.getElementById('localSessionDescription')
    99  
   100    browserSDP.focus()
   101    browserSDP.select()
   102  
   103    try {
   104      const successful = document.execCommand('copy')
   105      const msg = successful ? 'successful' : 'unsuccessful'
   106      console.log('Copying SDP was ' + msg)
   107    } catch (err) {
   108      console.log('Unable to copy SDP ' + err)
   109    }
   110  }