Je voudrais créer un enregistreur de canevas de base à l'aide de l'API Mediarecorder pour enregistrer une toile Webgl (ou autre).
Je veux que la vidéo finale soit de taille 1920x1080 (même si la résolution réelle est plus basse, elle va bien, elle est bien accroître).
Le problème est que lorsque j'essaie de charger une toile de 1920x1080 et un enregistrement de l'écran avec WebGL, les résultats sont très gigantesques et hachés, comme, extrêmement (même s'il l'enregistre, de hausserie et tout).
Tout ce que je veux, c'est la taille finie existe-t-il un moyen de créer une toile WebGL une plus grande taille, tout en conservant la même performance qu'il aurait avec une taille plus petite?
existe une façon pour l'API Mediarecorder d'enregistrer une vidéo qui a une résolution plus élevée que le flux (dans ce cas, un flux de toile) qu'il capture actuellement?
3 Réponses :
Avez-vous essayé de réduire la taille de la toile, mais gardez la taille du style CSS?
<canvas width="192" height="108" style="width:1920px; height:1080px" />
Cela conserve-t-il la résolution à 1920x1080 avec le Mediarecorder API?
Cela suggère oui. développeur.mozilla.org/en-us/docs/ Web / API / WEBRTC_API / ...
en webgl Way Vous pouvez utiliser webglcontext.viewport (0, 0, largeur, hauteur); Cette taille de fragments, moins de largeur / valeur de hauteur, moins de qualité, plus de vitesse)
"est-il un moyen de créer une toile WebGL une plus grande taille, tout en conservant la même performance qu'il aurait avec une taille plus petite?"
Si par "plus grand" vous voulez dire prendre plus de la page La réponse est oui. Il suffit de définir les propriétés de la largeur et de la hauteur CSS à la taille souhaitée, tout en conservant la largeur de toile et les propriétés de hauteur tels quels. Avec des limites, cela n'aura aucun effet sur la performance.
si par "plus grand" vous voulez dire que vous voulez dire augmenter la résolution de la toile, la réponse est non. Quelle que soit la GPU que vous utilisez, ils ont tous un taux auquel les pixels peuvent être rendus, toute augmentation du nombre de pixels entraînera plus de temps nécessaire pour rendre une scène donnée. La seule option est de mettre à niveau le matériel.
"est un moyen pour l'API Mediarecorder d'enregistrer une vidéo qui a une résolution plus élevée que le flux (dans ce cas, un flux de toile) qu'il capturait actuellement?"
Non! Et il n'y aura jamais eu comme il n'y a pas besoin. Ceci est une fonction automatique de presque toutes les API de lecture multimédia. Lorsque le contenu des médias est présenté à l'écran, il est mis à l'échelle à la taille que l'utilisateur / application souhaite.
Il y a des technologies qui vont haut de gamme (interpolates entre pixels) de contenu multimédia, mais elles sont toutes des technologies de lecture.
Il existe des recherches actives sur le GPU selon lequel le contenu ascendant à rayons haut de gamme (réseaux de neurones convertiques profonds de GPU). Cependant, il n'est pas disponible (via une API normalisée) extérieure GPU expérimentaux et peut être des années avant que le matériel soit disponible sur le marché (si jamais).
Réduire l'enregistrement Jank.
Tout ce que vous pouvez faire est de réduire la charge de travail sur le matériel.
Rendez la scène à la résolution inférieure à un tampon de cadre. Ensuite, rendez ce tampon sur la toile à la résolution souhaitée. Selon la scène, vous pouvez également essayer un simple algorithme haut de gamme lorsque vous rendez le tampon de cadre à la Toile.
Réduisez les paramètres de qualité du GPU.
Réduisez la complexité de la scène.
rendre la scène via un webworker.
Utilisez WebGL2 plutôt que Webgl.
Assurez-vous que le navigateur est la meilleure configuration pour capturer. Par exemple, chromé, allez à drapeaux Rechercher les options de tout ce qui concerne la capture de média. Encore une fois sur chrome, allez à GPU pour vérifier s'il y a des problèmes liés au GPU. Pour les autres navigateurs, vérifiez leur aide pour localiser des pages similaires.
expérimenter avec différents codexs pour trouver celui qui capture le mieux la scène.
Réduisez la fréquence de cadre d'enregistrement.
Assurez-vous que le matériel est en marche maigre. (Arrêtez tous les processus inutiles)
Utilisez un meilleur matériel.
Je veux dire que l'ordinateur lui-même a 16 Go de RAM, c'est juste sur le navigateur son plus lent
@bluejayke à part un besoin minimum, RAM ne fera peu aucune différence. Le problème est la performance du GPU ou du GP intégré, ainsi que de la CPU et du matériel associé. Avez-vous essayé une application de capture native de 3e partie pour capturer le contenu de la page (si c'est une option?)
Oui VES IVE Essayé Capture 3ème partie (ou même getdisplaymedia wwch est beaucoup plus rapide), mais le problème est que ce n'est pas capable de capturer 1920x1080, snace ma taille d'écran réelle s est plus petit que ça ... alors que dois-je faire?
"Non! Et il n'y aura jamais de car il n'y a pas besoin." Il y aura être, il y aura ...
Enregistrement d'images (même l'écran) est une opération très intensive. La plupart des ordinateurs portables vous donneront des résultats agoques même si vous essayez d'enregistrer une partie de l'écran. Cela dépend vraiment de votre matériel, mais je vous conseillerais de réduire la taille de la toile, puis de l'accroître avec une interpolation (cela pourrait arriver après l'enregistrement).
Idéalement, vous souhaitez mettre l'accumulation du flux vidéo de sortie, sans échelle des données d'entrée
@LJ ᛃ Que voulez-vous dire? Comment puis-je mettre à l'échelle un flux de toile sans mettre à l'échelle de la toile?
Pour être clair, même l'animation en direct est agitée ou que l'enregistrement est-il seulement? Si le premier, cela fonctionne-t-il doucement lorsqu'il n'est pas en streaming? Dessin est-il quelque chose de moins intensif reproduit le même problème? Cela se produit-il avec tous les navigateurs + codecs? Pourriez-vous configurer un exemple de reproductible minimal ?
@KAiido Il fait littéralement une toile avec 1920x1080, en tirant sur quoi que ce soit, principalement wegl cependant. Il gère la sorte de châte avant que l'enregistrement commence, bien que gérable, mais lorsque le
Canvas.capTutream () est appelé, alors tout est très agité / ingérable. Jusqu'à présent, j'ai seulement testé cela dans Chrome et Firefox et j'ai reçu les mêmes résultatsVous frappez donc déjà les limites de la machine avant même de commencer le droit d'enregistrement? Si vous enregistrez simplement un carré simple en mouvement sur un contexte 2D, même l'enregistrement est lisse? Par exemple jsfiddle.net/gdmpzfus
@Kaiido welll genre de, il fonctionne à peu près bien avant
.Capteurtream , mais une fois que je l'ai appelé, même sur une toile presque vierge, elle commence à paniquer et à être extrêmement agitée, mais 720/480 fonctionne bienVous ne répondez pas à mes questions ... difficiles à vous aider dans cette situation. Dans le violon, je suis lié à l'animation lisse à la fois en direct et dans l'enregistrement? Si votre animation est à peine lisse pour commencer, nous aurions besoin de le voir pour vous aider à l'optimiser, car l'ajout de tout aérien le rendra agité, et pendant que cela puisse fonctionner @ 720/480 pour certains Temps, il peut très bien de devenir agité plus tard. Alors s'il vous plaît fournir un exemple de reproductible minimal .