Some mobile phones do not trigger the 'LocalTrackPublished' events

[Eyüp Duran]

Describe the bug

I have written Angular code with Client JS, and I've encountered an issue on devices such as Redmi Note 7, Samsung S20, and a few others. When users attempt to open the camera in their browser the camera does not open. Upon debugging, I noticed that the 'LocalTrackPublish' method is not being triggered.

Reproduction

### Connect To Room
async connectToRoom(
    url: string,
    token: string,
    roomOptions?: RoomOptions,
    connectOptions?: RoomConnectOptions,
    shouldPublish?: boolean
  ): Promise<Room | undefined> {
    this.room = new Room(roomOptions);

    const startTime = Date.now();
    await this.room.prepareConnection(url, token); 
    const prewarmTime = Date.now() - startTime;
      this.room
        .on(RoomEvent.Connected, this.handleRoomConnect)
        .on(RoomEvent.Disconnected, this.handleRoomDisconnect) 
        .on(RoomEvent.ParticipantConnected, this.participantConnected) 
        .on(RoomEvent.ParticipantDisconnected, this.participantDisconnected)
        .on(RoomEvent.TrackPublished, this.handleTrackPublished) 
        .on(RoomEvent.LocalTrackPublished, this.handleLocalTrackPublished) 
        .on(RoomEvent.LocalTrackUnpublished, this.handleLocalTrackUnPublished) 
         .on(RoomEvent.MediaDevicesChanged, this.handleDevicesChanged)
        .on(RoomEvent.TrackSubscribed, this.handleTrackSubscribed) 
        .on(RoomEvent.TrackUnsubscribed, this.handleTrackUnSubscribed)
        .on(RoomEvent.SignalConnected, this.handleSignalConnected) 

    try {
      await this.room.connect(url, token, connectOptions);
    } catch (error: any) {
      let message: any = error.message || error;
      if (error.message) {
        message = error.message;
      }
      return;
    }
    this.room.participants.forEach((participant) => {
      this.participantConnected(participant);
    });
    this.participantConnected(this.room.localParticipant);
    return this.room;
  }```    
  -----------------------------------------------------------------------------------------------------------------------
### Toggle Video
  ''' async toggleVideo(open: boolean) {
    if (!this.room) return;
    await this.room.localParticipant.setCameraEnabled(open);
    this.renderVideoElement(this.room.localParticipant);
  }  
-----------------------------------------------------------------------------------------------------------------------
### Render Video Element
 renderVideoElement(participant: Participant, remove: boolean = false) {
    const { identity } = participant;
    let videoContainerId = "room_video_" + this.roomMicToken.roomId + "_" + identity;
    let videoElm = <HTMLVideoElement>document.getElementById(videoContainerId);
    const cameraPub = participant.getTrack(Track.Source.Camera);

    if (remove) {
      if (videoElm) {
        let appCameraId = Constants.mainSwiperTag + '' + MainPanels.RoomVideo + '_' + identity
        let appCameraComponent = <HTMLElement>document.getElementById(appCameraId);
        appCameraComponent.remove();
      }
      return;
    }

    const cameraEnabled = cameraPub && cameraPub.isSubscribed && !cameraPub.isMuted;
    if (cameraEnabled && videoElm) {
      if (participant instanceof LocalParticipant) {
        videoElm.style.transform = 'scale(-1, 1)';
      }
       cameraPub?.videoTrack?.attach(videoElm);

    } else {
      if (cameraPub?.videoTrack) {
        cameraPub.videoTrack?.detach(videoElm);
      }
    }
  }   
-----------------------------------------------------------------------------------------------------------------------
### Handle Local Track Published
 handleLocalTrackPublished = (pub: LocalTrackPublication) => {
    if (pub.kind == 'audio') {
      this.renderAudioElement(this.room.localParticipant);
    }
    if (pub.kind == 'video') {
      this.renderVideoElement(this.room.localParticipant);
    }
    if (pub.track instanceof LocalAudioTrack) {
      this.localMicLevelInterval = this.startLocalMicLevelInterval(this.room.localParticipant, pub.track);
    }
  }  ```
                                                                                                                                                                                        `

### Logs

Chrome Console
Error: Uncaught (in promise): NotReadableError: Could not start video source

System Info

Android 10,Red Mi Note 7,Chrome 119.0.6045.193

Severity

annoyance

Additional Information

No response

[David Zhao]

it doesn't fire the event because the video source cannot be started. You'd need to catch errors coming from setCameraEnabled and handle them.

[Eyüp Duran]

The error in the console is as follows. "Error: Uncaught (in promise): NotReadableError: Could not start video source". What could be the reason for this error on some devices?

[wxl17839938583]

I had the same problem. Can you tell me how you solved it?

[Eyüp Duran]

My problem was not caused by the livekit. There was a code in the application where I gave camera and microphone permissions somewhere other than the livekit. This code triggered the "cameraInUse" error. Therefore, the livekit assumed that the camera was in use and did not trigger the events. I removed the piece of code in which I gave camera and microphone permissions outside of the livekit. It worked successfully.

[wxl17839938583]

Thank you very much for your reply guidance, according to your prompt, I have solved my problem, bow