Rendering videos

This tutorial will walk you through the steps of rendering videos on a DOM using the Between API. All calls with Between are by default encrypted using SCTP sockets, WSS for any signalling and RTP transmission is done with SRTP.

Please ensure you have a decent understanding of the basic concepts and have completed guide here before proceeding with this step. You should especially know what a Conference object is.

Setting up a Conference

As explained in the guide before, we first need to setup a Conference object.

import { Conference } from 'between'

let conf = new Conference(customCallId, customUserData)
conf.id // custom or auto generated callId

Code to Render Video

Once the conference object is setup, you can start working with the video streams. The following code snippet shows how to access the local video stream of the publishing user:

// ......
// with conference already setup

let LocalParticipant;
let remoteParticpants = {}
            
conf.on("localParticipant", (lp) => {

    lp = LocalParticipant

    LocalParticipant.on("videoCreated", (video) => {
        // we get a local video stream of the publishing user
        document.getElementById('localStream').append(video)
    })
})

We can also render the video streams of other Peers in the conference by listening for the "PeerJoined" event and accessing the video stream of the Peer:

conf.on("peerJoined", (Peer) => {
    Peer.on('videoCreated', (video) => {                    
        document.getElementById('remoteStreams').append(video)
    })

    remoteParticpants[Peer.id] = Peer
})

That's it! You should now be able to render the video streams of all Peers in the conference on the DOM.

Rendering Audio Only

If you want to render audio without video, this code snippet will enable you to do so. It's as easy as as changing a couple lines from the above code. You still need to first setup a Conference object.

// ......
// with conference already setup

let LocalParticipant;
let remoteParticpants = {}
            
conf.on("localParticipant", (lp) => {
    lp = LocalParticipant
    lp.publishVideo(false)
})

conf.on("peerJoined", (Peer) => {
    Peer.on('videoCreated', (video) => {      
        video.enabled = false          
        document.getElementById('remoteStreams').append(video)
    })

    remoteParticpants[Peer.id] = Peer
})

Next Steps

Great, you've now figured out how to render audio/video. But we're not done yet. What if your Peers want to mute themselves, change their video devices, and more? Head to Adjusting Audio/Video next.