I’m working on a custom video call demo using Daily’s call object mode with SvelteKit. The audio from the shared video is correctly sent to other participants, but it doesn’t play locally. If I join the same room using the Daily.co website, the audio plays correctly.
Here are the relevant code excerpts:
VideStreamerTile.svelte:
let videoInput;
let localVideoStream;
let localAudioStream;
function playLocalVideoFile(evt) {
let videoEl = document.getElementById('local-vid');
let file = evt.target.files[0];
if (!videoEl.canPlayType(file.type)) {
toast('cannot play that file');
return;
}
videoEl.src = URL.createObjectURL(file);
videoEl.play().then(() => {
localVideoStream = videoEl.captureStream();
if (localVideoStream) {
localVideoStream = new MediaStream(localVideoStream.getVideoTracks());
}
const audioTracks = videoEl.captureStream().getAudioTracks();
if (audioTracks.length > 0) {
localAudioStream = new MediaStream(audioTracks);
}
});
}
async function shareVideo() {
if (localVideoStream) {
const combinedStream = new MediaStream([
...localVideoStream.getVideoTracks(),
...(localAudioStream ? localAudioStream.getAudioTracks() : [])
]);
await callObject.startScreenShare({
mediaStream: combinedStream,
videoSource: 'mediaStream',
audioSource: localAudioStream ? 'mediaStream' : false
});
} else {
toast('No video stream available to share.');
}
}
VideoTile.svelte:
let videoTrackSet = false;
let videoSrc;
$: videoTrack = participant?.tracks?.video;
$: screenTrack = screen?.tracks?.screenVideo;
$: {
if (!screen && videoTrack?.state === 'playable' && !videoTrackSet) {
videoSrc = new MediaStream([videoTrack.persistentTrack]);
videoTrackSet = true;
} else if (screen && screenTrack?.state === 'playable' && !videoTrackSet) {
videoSrc = new MediaStream([screenTrack.track]);
videoTrackSet = true;
}
}
let audioTrackSet = false;
let audioSrc;
$: audioTrack = participant?.tracks?.audio;
$: {
if (audioTrack?.state === 'playable' && !audioTrackSet) {
audioSrc = new MediaStream([audioTrack.persistentTrack]);
audioTrackSet = true;
}
}
function srcObject(node, stream) {
node.srcObject = stream;
return {
update(newStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream;
}
}
};
}
Any insights or suggestions on how to resolve this issue would be greatly appreciated!
Thanks in advance!