Handle 'stream' event

[callum-atwal]

• Looking at simple-peer, in the README it allows for easy video/voice streaming over WebRTC.

  • It would be good to have a capability for it to be handled within y-webrtc since it wraps over simple-peer.
  • Or the other option would be to have the Peer object being easily accessible from when you create the provider.

• The idea for usage here is you can iterate through providers.room.webrtcConns.peers and use .addStream(stream) on the other peers

[callum-atwal]

Would need to do something with that video tag though, it works if you just want any video tag off the page. It was okay for my use case

[dmonad]

Hey @callum-atwal ,

I agree with you, this would be a neat use-case and it would be nice if y-webrtc could provide a proper API to enable you to build this.

Conceptually, I don't like the idea to assume that there is a single video tag that all clients connect to. Even if we would allow the developer to specify a specific video-element for every user, I feel that we would make too many assumptions on how to build a conferencing solution.

Have you tried listening to the peers event? provider.on('peers', event => {}) is emitted every time a client is added or removed. Note that there are webrtc-peers and peers that communicate via broadcastchannel (communication within the browser)

Here is some sample code that you could use to listen to a stream object when a client is added:

provider.on('peers', event => {
  event.added.forEach(peerId => {
    const peer = event.webrtcPeers[peerId]
    // if peer is undefined it is a broadcastchannel connection
    if (peer) {
      this.peer.on('stream', stream => {
        const video = document.querySelector('video');
        if ('srcObject' in video) {
          video.srcObject = stream
        } else {
          video.src = window.URL.createObjectURL(stream) // for older browsers
        }
        video.play()
      })
      // here you can also stream your own video to the remote peer:
      peer.addStream(..)
    }
  })
})