Hi, I’m trying to build a simple demo application that would translate a web camera video stream from one client to another demo-project.
There are two client js files. producer.js takes a video stream, creates a connection with a server (worker, router, transports …), and displays this video stream on the same page. Everything works ok here.
consumer.js should connect to the server (create a device, transport …) and receive the video stream that the producer created. Here I get a problem. Instead of the video, I’m getting a black screen. As I can see at chrome://webrtc-internals, consumer.js receives the traffic. In Safari, confumer.js works as expected.
There is probably some error with my code bc the mediasoup-demo works properly. I would be glad for any help with it.
Is it happening on your local server or live server?
If it is working fine on local but causing issues on live server then you need to check the listen_ips if you are providing the correct one and need to verify the tcp/udp ports which you are using are opened on your server.
Another thing to verify is that whether you are resuming the consumers after creation.
The other thing you mentioned that it works fine on safari but not on chrome, if it is true the the above mentioned sever related issues are not there in your case otherwise it wouldn’t have worked on safari as well.
So something wrong ok client side in that case might be a programmatical mistake as well.
For verification kindly check the track is being received in consumer.js, if it is not being received then you can check that if it is being received then you need to check if track is enabled and not muted. If it is all ok then something can be wrong with your video player.
You can verify the track being received in chrome://webrtc-internals
Thanks for your response. It happens at my local. Yes, I’m resuming the consumer.
The media stream is enabled and not muted.
It is working properly not only at Safary but also if I’m translating video through the server back to the same page (same process) at Chrome. It’s not working when I’m trying to receive video stream from another page in chrome.
My front-end code is super easy. I’m getting track property from the mediasoup Consumer, creating MediaStream, and setting it as a srcObject attribute to the video tag.
Auto-play is restricted if you do not interact with the page first before loading these videos.
window.AudioContext = window.AudioContext || window.webkitAudioContext;
let audioCtx = new window.AudioContext();
if (audioCtx.state === 'suspended') {
// If suspended user hasn't interacted with page
} else {
// User had interacted with page.
}
Regardless of above I still check for interaction by button click, a modal popup before joining the chat or viewing any videos.
@ivan-tymoshenko this is the main reason why we have to manually call play() after setting srcObject.
The other thing to note is that even if user didn’t interact with the page you can still manage to play videos after setting srcObject but this is not true for ‘audio player’ on mac systems especially on safari browser.
You will have to take acknowledgement from user, what you can do is to show some popup and user clicks the button then you set srcObject of audio player and then it all works.
Zoom does the same. Remember seeing dialog box saying ‘Join with computer audio’ on zoom, it serves the same purpose.
Black screen issue can be because of many reasons like transport not connected properly or producer not consumed correctly or producer not produced correctly or video autoplay issue on IOS etc. The scenario which you mentioned is possible especially when you have played with normal browser options, but this scenario is out of equation for normal black screen issues.
