fix(video): use wallclock timestamps and VFR with FF video recording

[flotwig]

• Closes Recorded videos from Firefox play at the wrong speed #6337

User facing changelog

• Fixed an issue where videos recorded in Firefox would play at the wrong speed or with inconsistent speed.

Additional details

• previously using inputFPS, which resulted in extremely inconsistent video speeds when recording firefox
  • related PR: fix(ff): use fixed inputFPS instead of vfr to prevent dropped frames #6368
• now using wallclock time to determine frame timestamps - still have the issue with missing intermediate frames, but at least the frame timestamps are more correct
• also updated 6_video_compression_Spec to do a cy.visit in the middle, to ensure that we are not running into the issue where frames get overwritten when TS resets to 0

How has the user experience changed?

• before, 6_video_compression spec recorded a ~3 second video of a 23 second test
• now, 6_video compression spec records a ~23 second video of a 23 second test

PR Tasks

• Have tests been added/updated?
• Has the original issue been tagged with a release in ZenHub?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?
• [na] Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

8628 • 0 • 124 • 3 • 1

---

Run details

Project	cypress
Status	Passed
Commit	24369fa
Started	Oct 21, 2020 2:56 PM
Ended	Oct 21, 2020 3:08 PM
Duration	12:20 💡
OS	Linux Debian - 10.2
Browser	Multiple

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/retries.ui.spec.js		1
1	runner/cypress retries.ui.spec > opens attempt on each attempt failure for the screenshot, and closes after test passes

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[kuceb]

unfortunately this still doesn't seem to fix the overwriting frames on visiting another domain:
before (6_visit_spec > e2e visit > passes)

after

video is the correct length but it's just one frozen frame for the first half of the video

[flotwig]

@bkucera that may just be due to the CPU on your system being limited, so Firefox is only sending 1 frame for the first 20 seconds. When I look at the video_compression_spec artifact that CircleCI generates, it has multiple frames for the first 20 seconds:

https://circle-production-customer-artifacts.s3.amazonaws.com/picard/54f7d969f7d029d328a92083/5f904bb53b205d6be76d388e-6-build/artifacts/tmp/artifacts/videos/video_compression_spec.coffee.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20201021T154058Z&X-Amz-SignedHeaders=host&X-Amz-Expires=60&X-Amz-Credential=AKIAJR3Q6CR467H7Z55A%2F20201021%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Signature=a1ee980d88d15195d4741db463b61cebc38b8bd13cc13aa7871854b38e014d23