IOS Chrome Compatibility

[thedavl]

I've implemented vue-record in my own app, and it appears to be not working on chrome, on IOS.

It appears the demo website for vue-record has the same issue, the record icon never shows up, there is just a blank space where it should be.

Additionally, when using the demo site on android, the record button requires a long press, stopping and starting recording happens inconsistently, sometimes ending a recording and immediately starting a new one.

Edit: I was able to replicate this issue on the demo site with Chrome's inspect element device tool, using most of the mobile devices (IphoneX and galaxy included)

[b4dnewz]

hi, thanks for the report
actually i'm not able to test it on IOS since I don't own any IOS based device, can you post any warning/error on (console) logs you have, if any

[thedavl]

I didn't get any warning/error logs. I'm pretty sure the bug has to do with how presses are handled on mobile devices, and not really with the mobile browsers themselves. Going to "https://codekraft-studio.github.io/vue-record/" on desktop and inspecting element, and pressing "Ctrl + Shift + M", i can reproduce the bug with this mobile view.

I ended up fixing it for my app by not using

@mousedown="startRecording"
@mouseleave="stopRecording"
@mouseup="stopRecording"
@touchstart="startRecording"
@touchend="stopRecording"
@touchcancel="stopRecording"

in VueRecordAudio.vue, and instead removing the hold functionality, and starting/stopping recording with @mousedown="toggleRecording", and a toggleRecording method.

Although strangely, the element appears on IOS Safari and works properly, but "isSupported" evaluates to false on IOS Chrome, and the element does not appear because of this.

[thedavl]

Have you made any progress on using webm-media-recorder to expand compatibility? Wierd that the issues occur on IOS Mobile Chrome rather than Safari.

[b4dnewz]

not yet, unfortunately i'm in a ruff time and i don't have many time to dedicate to projects
i will take a look as soon as possible, since there is obviously something wrong but it's strange because it should be supported

[Giruvagen]

As far as I'm there is an issue with WebKit that prevents Chrome on iOS working correctly with MediaRecorder: https://bugs.chromium.org/p/chromium/issues/detail?id=752458

[faheem-larasoft]

I'm also facing compatibility issue in IOS chrome. I tested it in android chrome and both audio, video is working fine there, but in IOS, just showing blank space. Please make it compatible with IOS too.