Improve support for Chrome Android browser

[fajarmf]

Currently on Android browser the recording doesn't work. I tried the demo for video and the recorder doesn't start after clicking it.

Any plan on supporting them?

Thank you

[thijstriemstra]

@fajarmf what version of the android browser? Can you add a screenshot?

[fajarmf]

My mistake, it was a chrome browser. and the screenshot is attached.

[thijstriemstra]

@fajarmf is there any way you can get a console log for this? I'm hoping we can use that to figure out what's going on here. Also please check one of the official examples at https://collab-project.github.io/videojs-record and use that to debug this.

[thijstriemstra]

I've used the DevTools to debug this issue and I managed to record a audio/video clip but the playback of this clip failed with this error:

video.min.js:22 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. 

[thijstriemstra]

From https://developers.google.com/web/updates/2016/01/mediarecorder: Audio recording works in Firefox and in Chrome 49 and above; Chrome 47 and 48 only support video recording.

I tested audio+video in the previous comment so that explains the error. @fajarmf which one did you try?

[thijstriemstra]

Here's a bug tracking the MEDIA_ERR_SRC_NOT_SUPPORTED error: https://bugs.chromium.org/p/chromium/issues/detail?id=253465

There seems to be a workaround, can you give that a try @fajarmf? Does this example work correctly on your Android Chrome: https://webrtc.github.io/samples/src/content/getusermedia/record/

[ignl]

Hmm for me it also doesn't work on mobile chrome - simply nothing happens. https://webrtc.github.io/samples/src/content/getusermedia/record/ asks for permissions but videojs-record does not. https://www.webrtc-experiment.com/RecordRTC/ does not ask for permission but it starts recording. Will try to find out what's wrong later.

[ignl]

OK I tried to debug but there are no errors and actually I found out that it kinda works, but reaaaallllyyy slow. Like press button then wait 3 min for video to show up (with pressing that button repeatedly) then press record then wait again and with multiple tries it's possible to record something. So it seems that it does work it just so incredibly slow it's unusable with android chrome. Video is also very slow and choppy while recording. https://webrtc.github.io/samples/src/content/getusermedia/record/ is really fast compared and original RecordRTC is slower but usable. I have used HTC M8 and android chrome 51.

[thijstriemstra]

@ignl thanks for the report. I suspect the code that updates the current time for the video.js player is slow as it happens continuously. What if you comment out the statements on https://github.com/collab-project/videojs-record/blob/master/src/js/videojs.record.js#L1231 and https://github.com/collab-project/videojs-record/blob/master/src/js/videojs.record.js#L1257?

[ignl]

Ok I have checked on firefox and video performance seems similar. Maybe chrome is more sensitive to this. I will test it tomorrow as it requires https so i will need to deploy my app or work around that security requirement. However there is also something wrong with the click event as it hardly works on first easy touch on android. For the firefox I also had to try several times until it asked me permission for cam and mic same with chrome just takes much longer. Maybe will need to try and play with different events.

[ignl]

I have added touchstart event everywhere where there was a click event. Something like this:

DeviceButton = videojs.extend(VjsButton,
    {
        /** @constructor */
        constructor: function(player, options)
        {
            VjsButton.call(this, player, options);

            this.on('touchstart', this.onClick);
            this.on('click', this.onClick);
        }
    });
    DeviceButton.prototype.onClick = function(e)
    {
        e.preventDefault();
        // stop this event before it bubbles up
        e.stopImmediatePropagation();

        // open device dialog
        this.player().recorder.getDevice();
    };

Not sure if it is a good approach, I didn't find any problems like ghost click event triggering but maybe its only on my device. Maybe need a better solution like the ones discussed here.

Camera view is laggy and choppy on mobile chrome, and it is so even before starting recording so proposed fix didn't help. I tried on recordrtc example again and this time recording was also really choppy so I think the problem could be with record rtc.

Also tried on htc browser and it didn't work at all, but the problem is probably that it is based on an old version of chrome so no surprises.

[thijstriemstra]

Did adding touch events help?

[ignl]

Yes mobile browsers now works fine on my htc just maybe need more testing with more devices. But yeah touch events should be added to the project.

[thijstriemstra]

@ignl cool, could you add a PR?

[ignl]

Ok I will test my application a bit more, and when finish will try to do it

[thijstriemstra]

It looks like the only event video.js subscribes to is the tap event as seen here. This doesn't seem to be a native browser event but a custom video.js event indicating there is support for touch events as seen here. So it seems we need to listen for tap events as well as the current click events.

[thijstriemstra]

@ignl if you have time, please test the latest. I'll put out a new release in a few days.

[ignl]

Did you try it yourself? If I am not mistaken "tap" is jquery mobile event so it would add(?) additional dependency? Or already exists with video.js? I had some limited testing with "touchstart" event (same as you, just instead of "tap" used "touchstart" and added preventDefault in function) and so far so good. I will test "tap" today a bit later. Sorry that I didn't made PR yet (was on my todo), I was deploying my app. Anyway it's pretty trivial just need to choose and add event and test that everything works.

[ignl]

I will test "tap" a bit later today.

[ignl]

OK "tap" event works for me.

[thijstriemstra]

Did I try it myself? Uh, of course?? And if you followed the link in my previous comment explaining tap, you'd see it's a custom video.js event that combines touchstart and touchstop events.

Thanks for testing!

[ignl]

Yeah saw "tap" event before when looking for mobile event, but I thought it will require additional dependency so it's my bad research :)

[thijstriemstra]

Going to close this, if there are any other mobile issues, open a new ticket.