easyrtc adapter should register local media with clientId instead of local

[vincentfretin]

Currently the easyrtc adapter register the local media streams under the "local" key, see

networked-aframe/src/adapters/EasyRtcAdapter.js

Lines 270 to 287 in 76023a2

	addLocalMediaStream(stream, streamName) {
	const easyrtc = this.easyrtc;
	streamName = streamName || stream.id;
	this.setMediaStream("local", stream, streamName);
	easyrtc.register3rdPartyLocalMediaStream(stream, streamName);
	// Add local stream to existing connections
	Object.keys(this.remoteClients).forEach((clientId) => {
	if (easyrtc.getConnectStatus(clientId) !== easyrtc.NOT_CONNECTED) {
	easyrtc.addStreamToCall(clientId, streamName);
	}
	});
	}
	removeLocalMediaStream(streamName) {
	this.easyrtc.closeLocalMediaStream(streamName);
	delete this.mediaStreams["local"][streamName];
	}

I tried to change in this code "local" by NAF.clientId but the camera media will be under the empty "" key because NAF.clientId is not populated before setting the camera stream I guess.
Note that the networked-video-source component doesn't currently support showing local media stream, it's works only for remote participants.

This behavior differs from the janus adapter where the local media streams are registered with the NAF.clientId key, making it possible to create a component on a shared plane in the room that set a url like naf://clients/<clientId>/video (or could be naf://clients/<clientId>/screen for easyrtc supporting multi streams) and getting the correct media stream with:

const src = this.data.src;
// src equals for example "naf://clients/<clientId>/video"
const parts = src.substring(6).split("/");
const streamClientId = parts[1];
const streamName = parts[2];
const stream = await NAF.connection.adapter.getMediaStream(streamClientId, streamName)

The easyrtc adapter should be modified to register the local streams with the clientId.

[vincentfretin]

About the component that uses the naf://clients/<clientId>/video url, this is inspired from old hubs code. I already commented about it here #211 (comment)

[vincentfretin]

#299 is related if you want to work on displaying a screen share on a shared plane. You need to handle the ended event on the video track to reset the plane texture to a default image for example, if you create a modified version of networked-video-source, something like this (I didn't test this code, but some parts come from my own app):

      const videoTracks = newStream.getVideoTracks();
      if (videoTracks.length > 0) {
        videoTracks.forEach(track => {
          track.onended = () => {
            this._clearMediaStream();
            this.mesh.material.map = screenshareEmptyTexture;
            this.mesh.material.needsUpdate = true;
          };
        });

screenshareEmptyTexture is defined somewhere with:

  const screenshareEmptyImageSrc = "/images/screenshareEmpty.png";
  const screenshareEmptyImage = new Image();
  screenshareEmptyImage.src = screenshareEmptyImageSrc;
  const screenshareEmptyTexture = new THREE.Texture(screenshareEmptyImage);
  screenshareEmptyTexture.magFilter = THREE.NearestFilter;
  screenshareEmptyImage.onload = () => {
    screenshareEmptyTexture.needsUpdate = true;
  }

[kylebakerio]

saw this recently; was curious, does NAF handle this correctly by setting streams to null?

https://webrtchacks.com/srcobject-intervention/

[vincentfretin]

yes for video

networked-aframe/src/components/networked-video-source.js

Lines 75 to 77 in 39a9b8f

	video.pause();
	video.srcObject = null;
	video.load();

and for audio I did it in #288 a year ago

networked-aframe/src/components/networked-audio-source.js

Lines 60 to 62 in ce9c843

	this.audioEl.pause();
	this.audioEl.srcObject = null;
	this.audioEl.load();