Get a black screen when trying to display a video in Chrome

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.

I’ve tried it also on another pc with a different os. And got the same error there. So there is definitely something wrong with my code.

When you say 'translating video to the same page" I hope you mean that you are getting the same stream back to you which you just produced?

If that is the case then surely there is a bug in the code, all is ok with the server.

Yes, you understand it correctly.

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.

remoteVideo.srcObject = new MediaStream([track])
<video id="remoteVideo" autoplay class="video" ></video>

Ok sometimes we manually have to call play function of video tag, you can try it as well.

Will have to go through the code and probably will have to run on my local, will check tomorrow.

1 Like

Yep, turns out there is a problem with the autoplay attribute. Calling the play method resolves this issue. Thank you very much.

Awesome, kindly mark the appropriate answer as solution.

I would like to, but I don’t see any button for it. What should I do?

You will have an option below every answer

Which of them?

You don’t have that button, may be because you have selected category ‘off topic’. No worries then.

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.