Rendering videos

This tutorial will walk you through the steps of rendering videos on a DOM using the Between API.

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.

Rendering Videos

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
})

Rendering Audio Only

Between will output an HTML5 video object that you can customize via CSS

// ......
    <style>
        video.custom-video {
            border: 2px solid #ccc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        </style>

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.