Some mobile phones do not trigger the 'LocalTrackPublished' events
eyupduran opened this issue · comments
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
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.
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?
I had the same problem. Can you tell me how you solved it?
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.
Thank you very much for your reply guidance, according to your prompt, I have solved my problem, bow