search

wearerequired / user-feedback

Collect user feedback directly from your WordPress site
GNU General Public License v2.0
52 stars 8 forks source link

Video Recording #17

Closed swissspidy closed 8 years ago

swissspidy commented 9 years ago

Just an issue so we don't forget about this idea.

A single screenshot can't cover dynamic things like the user interacting on the site, hover effects on a page, etc. What if a user could record the screen/tab and then annotate this video to show their problem?

According to @neverything HotJar uses such technology. I'm only aware of Chrome extensions doing this. How can we do this in other browsers, too?

Other tools:

neverything commented 9 years ago

Will have to investigate further, I'm not sure it's fully possible yet. Seems like they are using a mix of tracking clicks, mouse movement and key logging and add it on top of a screenshot captured with canvas or such.

swissspidy commented 9 years ago

Crazy idea: Let's just recursively call html2canvas a couple of times (it takes about ~100ms for a snapshot). Using a tool like Gifshot we could surely produce a workable animation. Probably needs the new html2canvas version (see #13).

Gifshot is only about 24kb in size, so the overhead wouldn't be that high.

It would probably go like this:

  1. The user click Record to record a short video (let's say 6s max, which could maybe result in 6x15=90 frames).
  2. On each image capture we store the mouse and scroll position. Probably need to add the cursor to the image (maybe as a colored bubble).
  3. We run these through Gifshot (or another tool that creates videos instead) and save it to the media library

It might not work because:

swissspidy commented 9 years ago

Basically, this: https://github.com/muaz-khan/WebRTC-Experiment

neverything commented 9 years ago

Without audio :) On Mon 23 Mar 2015 at 15:20 Pascal Birchler notifications@github.com wrote:

Basically, this: https://github.com/muaz-khan/WebRTC-Experiment

— Reply to this email directly or view it on GitHub https://github.com/wearerequired/user-feedback/issues/17#issuecomment-85047123 .

swissspidy commented 9 years ago

Oh yeah, of course without audio :) Demo of that can be found here: https://www.webrtc-experiment.com/RecordRTC/Canvas-Recording/

@neverything Can we put together some exact use cases for this feature? Just write down your ideas and I'll extend the list.

neverything commented 9 years ago

@swissspidy sure.

Why video: Out of discussions during WordCamp London and with @swissspidy and @KarinChristen we figured that it's often the case that clients get to an error in a certain way or use a certain path to approach a feature that we might not end up testing, because we became feature blind a long time ago. That's not something bad, that's just human nature, after a while you'll be used to do something in a certain way and usually have a hard time unlearning it. A screenshot is therefore not always a sufficient way to describe an error or some behaviour on a website or the admin, that's were video comes into play.

What are the benefits of video that I see?

swissspidy commented 9 years ago

Thank you! I'll try to think of some ways on how to really implement this the best way possible...

swissspidy commented 9 years ago

Video recording would require a completely different UI (see https://github.com/wearerequired/user-feedback/issues/17#issuecomment-84588329) and we need to make sure he doesn't accidentally leave the page. It also means that the user can't annotate the screen anymore (except we build an awesome solution to annotate video frames...).

Need to clear my head about this feature. Maybe it's better off as a standalone plugin? Perhaps it's better if I look at this again in a couple of weeks.