search

fbsamples / Canvas-Streaming-Example

This project contains example code showing how to go live on Facebook using a <canvas> element as a source.
Other
340 stars 73 forks source link

Video image scrambled #2

Closed namgk closed 5 years ago

namgk commented 5 years ago

Hi there,

We are following the example here but after a couple of minute, we started to see this on Facebook. We can still hear the audio though.

Is there anyone knows what's this problem?

prob

Thanks

bradisbell commented 5 years ago

What browser are you using?

Try outputting your stream to a file in-browser rather than writing it out to the Web Socket, and then test playing that video in VLC. If that is working, try passing that same file to FFmpeg with -re to replay it in realtime to Facebook. These steps will help you narrow down where the issue is occurring.

I had a similar issue once where the encoding computer wasn't able to keep up a reasonable framerate. Since Facebook optimizes for low latency, if the video stalled out for too long, sometimes the stream would become corrupted.

namgk commented 5 years ago

Thanks so much for the hints. Yes I tried to save it to a file and it didn’t have any problem.

I’m using Chrome, too bad it doesn’t allow you to tune the encoding profile.

Since ffmpec use vcopy I guess it doesn’t do any encoding thing rather than proxying the video to Facebook. So it has to do with the web browser right?

Your issue was with the computer with the web browser or the ffmpeg part?

On Saturday, 16 March 2019, Brad Isbell notifications@github.com wrote:

What browser are you using?

Try outputting your stream to a file in-browser rather than writing it out to the Web Socket, and then test playing that video in VLC. If that is working, try passing that same file to FFmpeg with -re to replay it in realtime to Facebook. These steps will help you narrow down where the issue is occurring.

I had a similar issue once where the encoding computer wasn't able to keep up a reasonable framerate. Since Facebook optimizes for low latency, if the video stalled out for too long, sometimes the stream would become corrupted.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fbsamples/Canvas-Streaming-Example/issues/2#issuecomment-473621653, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9PoH9X5ZvXUoTPdYR9oFzb49MDcLUyks5vXeSCgaJpZM4b4MpS .

bradisbell commented 5 years ago

If you feed that same file into Facebook via FFmpeg, is the problem reproducible? If so, can you upload that file somewhere? Perhaps a Facebook engineer can use it to reproduce the problem on their end.

The problem I had previously was on the browser end. Excessive CPU load caused frames to drop out for more than the length of a typical keyframe, which caused similar visual issues. Additionally, if the output video ends up automatically scaling (due to load), and if it does so rapidly, this can also cause issues in the Facebook video.

namgk commented 5 years ago

Thanks,

It seems Facebook requires a key frame interval of 2 secs, which I’m not sure how to achieve with the web browser encoder.

I’ll try to stream the prerecorded video.

On Sunday, 17 March 2019, Brad Isbell notifications@github.com wrote:

If you feed that same file into Facebook via FFmpeg, is the problem reproducible? If so, can you upload that file somewhere? Perhaps a Facebook engineer can use it to reproduce the problem on their end.

The problem I had previously was on the browser end. Excessive CPU load caused frames to drop out for more than the length of a typical keyframe, which caused similar visual issues. Additionally, if the output video ends up automatically scaling (due to load), and if it does so rapidly, this can also cause issues in the Facebook video.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/fbsamples/Canvas-Streaming-Example/issues/2#issuecomment-473684704, or mute the thread https://github.com/notifications/unsubscribe-auth/AA9PoANdStZ4PNB6AMqL9E11L9GnX1ilks5vXnUbgaJpZM4b4MpS .

bradisbell commented 5 years ago

Unfortunately, there's no way to set the keyframe interval with MediaRecorder. In the past, Facebook's Live API would accept video with different keyframe intervals. If that's no longer the case, you will have to transcode server-side by modifying that FFmpeg command line.

namgk commented 5 years ago

Again, thank you very much!