search

cables-gl / cables_docs

cables documentation docs.cables.gl
https://cables.gl/docs/docs
45 stars 16 forks source link

MediaRecorder op encodes with very inaccurate color and blocky artifacts when using CustomShader and Rectangle for drawing #886

Open LeStahL opened 2 weeks ago

LeStahL commented 2 weeks ago

I use the version on cables.gl to reproduce. I use a CustomShader + Recangle graph for rendering the scene.

Screenshot of the canvas: image

Encoded video: https://github.com/user-attachments/assets/15b48e51-f06d-4ded-b95e-1dfc957570f2

MediaRecorder op:

{"ops":[{"opId":"ff12e50f-e2bd-4554-9aec-dab9de4cba8b","id":"ivq0yphca","uiAttribs":{"subPatch":0,"translate":{"x":93.5645429495388,"y":280.1329736646772},"history":{"lastInteractionAt":1729861986065,"lastInteractionBy":{"name":"nr4"}}},"portsIn":[{"name":"Recording","value":0},{"name":"Filename","value":"cables"},{"name":"Download Video","value":1},{"name":"Mimetype index","value":1},{"name":"Mimetype","value":"video/mp4"},{"name":"MBit","value":5},{"name":"Max FPS","value":30},{"name":"Force FPS","value":0},{"name":"Media index","value":0},{"name":"Media","value":"Video"},{"name":"Video Canvas Id","value":"glcanvas"}],"portsOut":[{"name":"State","value":"inactive"},{"name":"Error","value":""},{"name":"Final Mimetype","value":"video/mp4;codecs=avc1"},{"name":"Duration","value":5389.699999988079},{"name":"Video DataUrl","value":"blob:https://sandbox.cables.gl/df9a1d2d-21b3-415b-83fb-c701240c4dda"}]}]}
pandrr commented 2 weeks ago

we just use the mediarecorder browser api. basically we just set the values for the recording and everything else is out of our control. sadly there is no way to get good results IMHO.

using something like obs gives much better results