I am building a one-to-many video chat feature in my current project. I get the local stream and even the producer’s stream when a user joins the live stream, but it’s not getting played anymore. I get an error like “GET https://zen-gamma.vercel.app/[object%20MediaStreamTrack] 404 (Not Found)”. The project is also hosted on Vercel. Any suggestions or ideas are welcome.
GitHub: shashankvish0010/zen (github.com)
You are using src property of video element to render the stream this is not going to work, instead use srcObject prop of video element and assign MediaStream element to it.
Thanks for the MDN reference. I changed it as per the documents, but still the stream is not working. I don’t know what’s going wrong as I’m getting the tracks, so basically I cannot use it directly.
1- When you will get the MediaStreamTrack, you will make MediaStream object by doing this:
var stream = MediaStream([MediaStreamTrack]);
2- Then you will attach this stream to srcObject of video element.
document.getElementById(‘video’).srcObject = stream;
document.getElementById(‘video’).play();
3- Make sure to enable the controls on video player, that way you will be able to manually play it to debug, incase there is an autoplay related issue.
4- If still stream is not playing then you will have to check whether the tracks which you are producing, consuming are correctly done. Make sure to resume consumer if you started it in paused state.
I tried your app, but I encountered a different error. The error indicates that your codecs are either null or undefined, and I also received CORS errors. For CORS errors, perhaps you could allow your servers to be accessed from anywhere, especially for trial/prototype apps.
Regarding the other error, it seems that you tried to access a non-existent URL: https://zen-gamma.vercel.app/[object%20MediaStreamTrack]. Maybe you misspelled the URL. Please ensure that your API is correct.