How to Achieve a Smooth Rotation on a Stream

[Jill Bourque]

Hi there,

We are using this code to rotate an image on a web browser. The image rotates for 10 seconds and then stops.

var image="https://rushtix.com/wp-content/uploads/2023/04/realistic_the_golden_cozy_living_room_featuring_p-scaled.jpeg";
var stop_sec=10;

pannellum.viewer( 'panorama-rotate' , {
    "type": "equirectangular",
    "panorama": image,
    "autoLoad": true,
	"autoRotate": -10,
	"autoRotateStopDelay":stop_sec*1000,
    "yaw": 0,
});

It looks good on our computers but on our FFmpeg stream it is not smooth. The FFmpeg settings are as follows:

Bitrate : 6000k
FPS: 30
PIX_FMT: Yuv420
Encoding : h264_nvenc

Any thoughts on how to solve this?

[KUJensen]

Hi Jill,
You can try it with a higher frame rate. Try it at 60 FPS. This makes the movements smoother

[Jill Bourque]

Okay, thanks!

[Jill Bourque]

Update: We tested with 60 FPS and it didn't solve. We are streaming from a headless chrome page using Chrome version 113.0.5672.126. It looks like WebGL is not supported very well in headless Chrome. See this thread.

We tried changing to Google Chrome 95.0.4638.69 and it also did not work.

When we use 113.0.5672.126 it rotates but not very smoothly - we're not using any WebGL flags.

When we use an older version of Chrome (95.0.4638.69) and try using the WebGL flags we get this error.

Does anyone have any insights on this or where to go for help?

[Matthew Petroff]

I can confirm that headless WebGL support can be problematic, and it's caused issues with CI in the past (and it why I haven't moved CI away from Travis CI yet). For the older version of Chrome, you can check the developer console to see if it says anything helpful, although I doubt you'll see anything particularly informative.

I don't know how you're using FFmpeg with Chrome, but, regardless, I've never tried to record a screen capture and don't have much advice to offer on the matter, unfortunately. Due to the poor performance, I suspect your headless Chrome is running without hardware acceleration; if you can get that working, you'll probably see significantly improved performance.

Otherwise, I can only suggest workarounds. If you can step through frame by frame—essentially manually animating it—and record still images, that obviously avoids dropped frames. Using an HDMI capture dongle would also avoid the issue, as you said it works when you're not trying to record it. I know neither of those suggestions are ideal. There's also apparently some sort of experimental Chrome feature for making timing deterministic for this sort of thing, but I have no experience using it.