DEV Community

Discussion on: I Created A Simple 1 To 1 Meeting Tool

Collapse
 
brense profile image
Rense Bakker

Nice! WebRTC is awesome :)

I couldnt find your frontend code, but if you want to add mute/unmute of your track:

function SomeReactComponent() {
  const streamRef = useRef()

  const captureUserMedia = useCallback(async () => {
    const stream = await navigator.mediaDevices.getUserMedia({
      audio: true,
      video: true,
    })
    stream.getTracks().forEach(track => {
      // add track to your WebRTC conneciton
      webRTCConnection.addTrack(track, stream)
    })
    streamRef.current = stream
  }, [])

  const toggleMute = useCallback(() => {
    streamRef.current?.getTracks().forEach(track => {
      track.enabled = !track.enabled
    })
  }, [])

  // ...render something
}
Enter fullscreen mode Exit fullscreen mode

Oh and for screen sharing, just replace getUserMedia with getDisplayMedia:

const stream = await navigator.mediaDevices.getDisplayMedia({
  audio: true
  // video is always true for getDisplayMedia
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ethand91 profile image
Ethan

Thanks for the sample code! :)
There are lots of things you can do with WebRTC, hard to learn but it's fun!

Collapse
 
brense profile image
Rense Bakker

Yea it can take a while to wrap your head around the concept, but very rewarding once you do "get" it.