I read through a related topic (#69650 - Audio not joining in Safari) and I am still encountering the same issue where Safari audio simply does not work. I’ve tried to start audio automatically and with a button press but still no progress. I am not getting any console error oddly enough.
Any help here would be immensely appreciated!
P.S.
Apologies in advance for creating the same ticket but the previous one was closed.
Browser Console Error
N/A
Which Web Video SDK version?
Initially - 1.2.7
Later on - 1.4.0
Could you serve your webpage on a web server? Sometimes the Safari audio cannot work in the local environment.
And could you take a look at our sample app?
Hey Brendan, we had lots of issues with waiting for the Stream to finish initializing before we were able to call startAudio successfully. Is it possible stream is null or undefined right before your startAudio is called? Recommend trying to log the stream in your pseudocode example to check for that scenario.
No it’s not possible the stream is null or undefined. I check the stream value before this gets called and it’s getting to the .then promise handler. I can try logging stream just in case though. Any other ideas here would be greatly appreciated .
Our code looks similar to this:
(using redux as a local store)
// file 1 (watch for media changes)
client.on("media-sdk-change", onMediaSDKChange)
const onMediaSDKChange = useCallback((payload) => {
const { action, type, result } = payload
const payload = { type: type, action: action, result: result === "success" } // converts to boolean
dispatch(setMediaShape(payload))
}, [])
// file 2 (redux action)
const setMediaShape = (state, action) => {
const mediaShape = state.mediaShape
const mediaType = action.payload.type
const mediaShapeAction = action.payload.action
if (mediaType && mediaShapeAction) {
mediaShape[mediaType][mediaShapeAction] = action.payload.result
}
}
// file 3 (button click)
const onAudioClick = useCallback(() => {
if (isStartedAudio) {
dispatch(setIsMuted(!isMuted))
} else {
// this is where audio is triggered
dispatch(setIsStartedAudio(true))
dispatch(setIsMuted(false))
}
}, [mediaStream, isStartedAudio, isMuted])
// file 4 (react hook)
useEffect(() => {
if (isStartedAudio === null) {
return
}
const isCurrentUserStartedAudio = zmClient.getCurrentUserInfo()?.audio.length > 0 && isStartedAudio
const handleSafariAudio = () => {
if (mediaShape.audio.encode && mediaShape.audio.decode) {
mediaStream
.startAudio()
.then(() => console.log("Safari audio initialized successfully!")) // gets here successfully, still no audio
.catch((e) => console.log("Safari audio failed to initialize: ", e))
} else {
console.log("Safari audio has not been initialized...")
}
}
if (isStartedAudio && mediaStream) {
if (!isCurrentUserStartedAudio) {
if (isSafari) {
handleSafariAudio()
} else {
mediaStream.startAudio()
}
}
if (isCurrentUserStartedAudio) {
if (isMuted) {
mediaStream.muteAudio()
} else {
mediaStream.unmuteAudio()
}
}
}
}, [mediaStream, isStartedAudio, isMuted, zmClient, mediaShape])
Maybe the useEffect above is being called a couple times and that is causing an issue? I’m not sure but I hope this clears things up for how we are handling the audio logic.
It is running the code. It gets to console.log("Safari audio initialized successfully!") but still silence. Even tried the button click callback with {autoStartAudioInSafari: true} and still no luck.
I tried the demo react app on localhost with two safari browsers. Oddly enough the Local Preview echoed just fine, but joining a Subsession for both browsers the audio is still void. Very odd.
.
