Hello!!, I'm using [liowbrtc]. [REDUX] has difficulty applying.

[seoksanghwan]

Hello!!, I'm using [liowbrtc]. [REDUX] has difficulty applying. The problem with that is that it will be in the attachStream event. [RemoteVideosEl] part.

this redux app container code (mapDispatchToProps)

rtc.on('videoAdded', (stream, peer) => {
    dispatch({
         type : ADD_MEDIA ,
         peer,
         stream : rtc.attachStream(stream, rtc.config.remoteVideosEl[peer.id])
      });
})

this react videoDetail component code.. remoteVideosEl not working..

componentDidMount() {
    this.webrtc = this.props.webrtc;
    this.webrtc.config.localVideoEl = this.localVid;
    this.webrtc.config.remoteVideosEl = this.remoteVideos;
    this.webrtc.startLocalVideo();
  }

What's wrong with my code?

( When I asked the question, I turned the translator around and asked the question. I'm sorry the sentence isn't smooth. I turned the translator.😢 )

[lazorfuzz]

Hi, I'd be happy to help. Are there any errors getting logged? If so, can you paste the error output? As for your code, I'm going to remove the videoAdded event in the near future, please use on('peerStreamAdded', ...) instead.

I see in your second parameter you're passing rtc.config.remoteVideosEl[peer.id].. LioWebRTC expects a string for remoteVideosEl, so it's possible that you're using a string as an object?

[seoksanghwan]

First of all, thank you for your quick feedback. Once I put it in my code, I get information about peer, but I don't get any important remote videos.

is my screen.

is developer tool logged

is render code

<div className="remotevideo">
  {
  peers.map( data => (
  <div className="vidContainer" key={data.id} id={`${this.webrtc.getContainerId(data)}`}>
    <video id={this.webrtc.getId(data)} ref={(v)=> this.remoteVideos[data.id] = v} playsInline />
      <div className="nick">
        <p>{data.nick.split(',')[0]}</p>
      </div>
  </div>
  ))
  }
</div>

redux mapDispatchToProps code

init: (cfg) => {
    let roomName = history.location.pathname.split('/rooms/')[1];
    let user = JSON.parse(localStorage.getItem('user'));
    let email = (user !== null) ? `${user.email},${user.url}` : 'Not user';
    rtc = new LioWebRTC({
        url: 'https://sandbox.simplewebrtc.com:443/',
        localVideoEl: '',
        network: {
            minPeers: 2,
            maxPeers: 2
        },
        debug: true,
        nick: email
    });
    rtc.on('videoAdded', (stream, peer) => {
        dispatch({
            type: ADD_MEDIA,
            peer,
            stream: rtc.attachStream(stream, rtc.config.remoteVideosEl[peer.id])
        });
        console.log(rtc.config.remoteVideosEl[peer.id])
    })
        .on('videoRemoved', (peer) => {
            dispatch({
                type: REMOVE_VIDEO,
                peer
            });
        })
        .on('readyToCall', () => {
            dispatch({
                type: READY_TO_CALL,
                rtc,
                roomName
            })
        });
    dispatch({ type: RTC_SETTING, payload: rtc });
}

thank you👍

[lazorfuzz]

I see, in your render code you're correctly setting the ref to {(v)=> this.remoteVideos[data.id] = v}.

In your redux dispatch code however, you're passing rtc.config.remoteVideosEl[peer.id] as the video element. You should be passing this.remoteVideos[peer.id].

[seoksanghwan]

I see, in your render code you're correctly setting the ref to {(v)=> this.remoteVideos[data.id] = v}.

In your redux dispatch code however, you're passing rtc.config.remoteVideosEl[peer.id] as the video element. You should be passing this.remoteVideos[peer.id].

my new solution code

AddpeerVideo: (targetremote) => {
      rtc.on('videoAdded', (stream, peer) => {
        if(targetremote) {
          dispatch({ type: ADD_MEDIA, peer });
          rtc.attachStream(stream, targetremote[peer.id], { autoplay : true });
        }
      })
    }

You must refresh to see local and remote. When you enter the chat room for the first time, you will see only local. component videoRoom setting code

componentDidMount() {
    const { room_name } = this.props.match.params;
    this.webrtc = this.props.webrtc;
    this.props.startLoclaVideo(this.localVideo);
    this.props.AddpeerVideo(this.remoteVideos);
    this.props.joinChat(room_name);
  }

component Main & waitingRoom setting code

componentDidUpdate() {
    if (this.props.webrtc !== null) {
      if (!this.props.location.pathname.split('/rooms/')[1]) {
        this.props.webrtc.connection.disconnect();
        this.props.webrtc.stopLocalVideo();
        this.props.webrtc.leaveRoom();
      }
    }
  }

Other pages except chat rooms used 'disconnect()'. So when you go back to the chat room, if you want to communicate with others, you have to click Refresh.

Is there any objection to 'disconnect'? disconnect.. Is there an opposite function?

Thank you for your feedback every time!!👍

[lazorfuzz]

Hi, sorry for the delayed response! Did you figure it out yet? I see in your code you have a typo going on, "this.props.startLoclaVideo(this.localVideo);"

[lazorfuzz]

If the peer video isn't being added, I assume the event handler is not implemented correctly...

[seoksanghwan]

Hello, thank you for your feedback. But I haven't found a way yet.

this.props.startLoclaVideo (this.localVideo) is mean

startLoclaVideo: (localvideo) => {
      dispatch({ type: LOCAL_VIDEO, start: rtc.startLocalVideo() });
      if (localvideo) {
        rtc.config.localVideoEl = localvideo;
      }
    },

If you look at the code, every page except chat rooms has a connection.disconnect() method. So I'm curious. Is there any objection to disconnect()?

These are the skills that I'm using right now.

1. React
2. React-router-dom
3. Redux
4. React-redux . . . . .

I have another question. Can I set the maximum number of people in the chat room?

[lazorfuzz]

Hi, do you have the app on your GitHub? Maybe it'll be easier for me to clone it and run it on my own machine to see what the problem is. As for connection.disconnect, that's just for disconnecting from the signaling server. If you have one instance of LioWebRTC running, you should only need to call it when the video conference is ended, or when you are leaving the room.

As for max number of people in a room, that's left to the app developer to implement. A peer should join the room and leave if there are too many people. In the upcoming version (on GitHub, but not yet released on NPM), there will be a way to limit the number of peers to directly connect to, in a room of say, 2000 peers. However, this feature only works for rooms with data channels only.

[seoksanghwan]

Hello, we've taken a new approach. Password added. If the password is correct, a channel input button is created. During the journey, it was refreshed and connected. But I don't know if this is the right way.