Quiero mostrar un MediaStream de la cámara al usuario.

Estoy usando un lienzo y el método drawImage para representar la transmisión.

Necesito voltear y desenfocar la imagen.

Quiero entender si es más eficaz aplicar los efectos de blur y scale al lienzo usando CanvasRenderingContext2D.filter O usando CSS3 transform.rotate() y filter: blur() aplicado al elemento del lienzo.

Para el contexto, estoy dentro de una aplicación React, pero no creo que esto sea relevante.

Para aclarar mi pregunta no es "cuál es mejor" (aunque las sugerencias son bienvenidas) sino: ¿Cómo mediría las actuaciones para tomar la mejor decisión?

Puedo abrir la console>performance monitor de Chrome, pero solo me da una vista en vivo del uso de la CPU, no tengo una forma de obtener el promedio a través del tiempo y no es consistente.