4

I'm using Twilio Rooms to do a webrtc video/audio conference call..

When receiving the tracks (video + audio) I attach them to an element:

participant.tracks.forEach(track => {
    document.getElementById('video-feeds').appendChild(track.attach());
  });

This effectively creates two HTML elements:

<div id="video-feeds" style="height:calc(100% - 50px)">
    <audio autoplay="" id="c22e4dfd-e0da-4ae4-a6ce-00b2d1b7ab5b" height="100%" controls="controls"></audio>
    <video autoplay="" id="bb11c320-c2e7-44d8-95c2-3d647cee4c7e" controls="controls" height="100%"></video>
</div>

Each of those HTML element has its own control enter image description here

In previous webrtc libraries I used you were able to add both as one element (a video object with sounds) but it seems like twilio splits them...

Can they be added together using twilio? I couldnt find anything in the documentation or here in stack overflow.

pmeyer
  • 890
  • 7
  • 31
  • This is how the SDK works I'm afraid. It allows you to control each track individually. I sense that your endgame here is not to put them back together as one ` – philnash Nov 13 '17 at 03:52
  • @philnash The only thing I'm trying to accomplish is to control the volume of the audio track in the video control using the native HTML video control (I know I can always write an external volume control and not use the native video control). – pmeyer Nov 13 '17 at 11:24
  • 1
    You could always hide the video controls (you can hardly pause or track along a live video) and css place the audio control under the video. Or implement your own controls as you have suggested. – philnash Nov 13 '17 at 11:42
  • Thanks @philnash sounds like Ill implement my own controller, cant really hide the video control as it has stuff such as a full screen control. – pmeyer Nov 13 '17 at 19:31
  • You could just implement the [browser fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) to replace that. – philnash Nov 13 '17 at 23:12

0 Answers0