how to play video and audio in the same H5 element

[Bang He]

My web page receive video and audio from webRTC server, and play them successfully, by using the code below:

////////////////////////////////////////////////////////////////
pc.ontrack = function (event) {
    let el = document.createElement(event.track.kind)
    el.srcObject = event.streams[0]
    el.autoplay = true
    el.controls = true

    document.getElementById('remoteVideos').appendChild(el)
    console.log("ontrack %s", event.track.kind)
}
////////////////////////////////////////////////////////////////

The code above will create two H5 media elemnt: video element and audio element.

Is there any way to let video track and audio track be played in the same H5 media element?

[Vitaly Ivanov]

You don't have to create a new video element for every ontrack() - take a look at the most basic webrtc samples, they do el.srcObject = event.streams[0] on exact same HTML video element

--

---
You received this message because you are subscribed to the Google Groups "discuss-webrtc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to discuss-webrt...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/discuss-webrtc/e96898ee-cc77-4293-9656-782af0c207dfn%40googlegroups.com.

[guest271314]

You can wait for the 2d track event, something like https://github.com/guest271314/MediaFragmentRecorder/blob/b8e685e7cf56eebe2c52f2b44d89de44eafed01d/MediaFragmentRecorder.html#L113-L133

toLocalPeerConnection.addEventListener("track", event => {
  kinds.splice(kinds.findIndex(({
    kind
  }) => kind === event.track.kind), 1);
  // Wait for both "track" events
  if (kinds.length === 0) {
  const {
    streams: [stream]
  } = event;
  // Reassign stream to initial MediaStream reference
  mediaStream = stream;
});