Problems with iPad using Safari with video chat app. We want to present the user's video feed and provide the ability to select their own webcam device in a pop-up window. However, to show the selected webcam device, the video of the selected webcam is displayed in a pop-up window, but the original camera feed turns black and the audio is cut off. This seems to happen when calling navigator.mediaDevices.getUserMedia().
my code to get the device
const constraints = {
speaker: {deviceId: audioOutputSelect.value ? {exact: audioOutputSelect.value} : undefined},
audio: {deviceId: audioInputSelect.value ? {exact: audioInputSelect.value} : undefined},
video: {deviceId: videoSelect.value ? {exact: videoSelect.value} : undefined}
};
navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
...
})
The biggest problem is that the audio of the existing video disappears.
this is a known limitation of getUserMedia in Safari, described as far back as 2018 in https://webrtchacks.com/guide-to-safari-webrtc/
If your pop-up video is just a HTML element it should be possible to reuse the MediaStream object but if you are building a "select your camera" dialog this still won't work.