search

binarykitchen / videomail-client

A wicked npm package to record videos directly in the browser, wohooo!
https://videomail.io
Creative Commons Zero v1.0 Universal
55 stars 19 forks source link

Record Video again throwing error - waiting for permission even though it's already granted #182

Closed IanPhilips closed 3 years ago

IanPhilips commented 3 years ago

Hi again! I've almost got this react app working but recently I ran into this problem on Chrome (v87), Safari, and Firefox(v82). I record a video and then hit "record again" to re record and I get this error: 

#videomail [11:57:00 AM] > VideomailError: create() Unable to access webcam Please grant Firefox access to your webcam. videomail-client.min.js:24921:15
#videomail [11:57:00 AM] > Recorder emits: ERROR [ [Videomail Error: Unable to access webcam] ] videomail-client.min.js:24921:15
    at Function.c.create (https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.2/prototype/js/videomail-client.min.js:58:60279)
    at u.getNoAccessIssue (https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.2/prototype/js/videomail-client.min.js:58:50309)
    at https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.2/prototype/js/videomail-client.min.js:58:109682
  | __stack_frame_overlay_proxy_console__ | @ | index.js:2177
-- | -- | -- | --
  | error | @ | videomail-client.min.js:24693
  | (anonymous) | @ | videomail-client.min.js:26200
  | (anonymous) | @ | videomail-client.min.js:26265
  | s.emit | @ | videomail-client.min.js:10940
  | emit | @ | videomail-client.min.js:24757
  | (anonymous) | @ | videomail-client.min.js:29068
  | setTimeout (async) |   |  
  | je | @ | videomail-client.min.js:29066
  | E.build | @ | videomail-client.min.js:29579
  | show | @ | videomail-client.min.js:27592
  | show | @ | videomail-client.min.js:26540
  | show | @ | videomail-client.min.js:23523

The video frame is black for a bit and then shows the "☹ UNABLE TO ACCESS WEBCAM" message even though I'd already given it permission earlier. I'll try out an earlier version of the vm-client as I haven't changed any of the internal logic and I believe re-recording used to work.

IanPhilips commented 3 years ago

Similar error with 2.14.3: 

#videomail [11:52:30 AM] > [300]</c.create@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:60281
u/this.getNoAccessIssue@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:50311
je/S<@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:109680
setTimeout handler*je@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:109619
E/this.build@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:115487
p/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:90026
v/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:75879
v/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:35270
conditionallyRenderVideoMail@https://localhost:8443/commons.js:82240:34
wrappedMethod@https://localhost:8443/commons.js:65893:25
render@https://localhost:8443/commons.js:82477:13
finishClassComponent@https://localhost:8443/commons.js:54895:31
updateClassComponent@https://localhost:8443/commons.js:54845:44
beginWork@https://localhost:8443/commons.js:56355:16
beginWork$1@https://localhost:8443/commons.js:60914:14
performUnitOfWork@https://localhost:8443/commons.js:59892:12
workLoopSync@https://localhost:8443/commons.js:59865:22
performSyncWorkOnRoot@https://localhost:8443/commons.js:59491:9
flushSyncCallbackQueueImpl/<@https://localhost:8443/commons.js:48824:24
unstable_runWithPriority@https://localhost:8443/commons.js:63881:12
runWithPriority$1@https://localhost:8443/commons.js:48774:10
flushSyncCallbackQueueImpl@https://localhost:8443/commons.js:48819:24
flushSyncCallbackQueue@https://localhost:8443/commons.js:48807:3
scheduleUpdateOnFiber@https://localhost:8443/commons.js:58934:9
enqueueSetState@https://localhost:8443/commons.js:50374:17
./node_modules/react/cjs/react.development.js/Component.prototype.setState@https://localhost:8443/commons.js:73792:16
onFinishedRecording@https://localhost:8443/commons.js:81262:60
wrappedMethod@https://localhost:8443/commons.js:65893:25
[209]</s.prototype.emit@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:21:130219
[295]</n.default/this.emit@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:53912
me@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:105194
_e@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:110092
be/<@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:106556
[209]</s.prototype.emit@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:21:130162
E@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:22692
w@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:22507
[253]</</</v.prototype.push@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:23318
[202]</</</f.prototype._forward@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:21:115969
a@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:21:115350
[209]</s.prototype.emit@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:21:130162
S@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:24140
A@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:24099
E@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:22808
w@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:22507
[253]</</</v.prototype.push@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:23318
[254]</a.prototype.push@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:32:32473
j@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:29225
EventHandlerNonNull*[282]</</</t.exports@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:28944
be@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:105615
E/this.build@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:115505
p/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:90026
v/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:75879
v/this.show@https://cdn.rawgit.com/binarykitchen/videomail-client/2.14.3/prototype/js/videomail-client.min.js:58:35270
conditionallyRenderVideoMail@https://localhost:8443/commons.js:82240:34
wrappedMethod@https://localhost:8443/commons.js:65893:25
render@https://localhost:8443/commons.js:82477:13
finishClassComponent@https://localhost:8443/commons.js:54895:31
updateClassComponent@https://localhost:8443/commons.js:54845:44
beginWork@https://localhost:8443/commons.js:56355:16
beginWork$1@https://localhost:8443/commons.js:60914:14
performUnitOfWork@https://localhost:8443/commons.js:59892:12
workLoopSync@https://localhost:8443/commons.js:59865:22
performSyncWorkOnRoot@https://localhost:8443/commons.js:59491:9
flushSyncCallbackQueueImpl/<@https://localhost:8443/commons.js:48824:24
unstable_runWithPriority@https://localhost:8443/commons.js:63881:12
runWithPriority$1@https://localhost:8443/commons.js:48774:10
flushSyncCallbackQueueImpl@https://localhost:8443/commons.js:48819:24
flushSyncCallbackQueue@https://localhost:8443/commons.js:48807:3
discreteUpdates$1@https://localhost:8443/commons.js:59628:7
discreteUpdates@https://localhost:8443/commons.js:38541:12
dispatchDiscreteEvent@https://localhost:8443/commons.js:41903:18
EventListener.handleEvent*addEventBubbleListener@https://localhost:8443/commons.js:41762:11
trapEventForPluginEventSystem@https://localhost:8443/commons.js:41897:27
trapBubbledEvent@https://localhost:8443/commons.js:41868:32
legacyListenToTopLevelEvent@https://localhost:8443/commons.js:41377:27
legacyListenToEvent@https://localhost:8443/commons.js:41336:32
ensureListeningTo@https://localhost:8443/commons.js:43496:22
setInitialDOMProperties@https://localhost:8443/commons.js:43563:26
setInitialProperties@https://localhost:8443/commons.js:43761:26
finalizeInitialChildren@https://localhost:8443/commons.js:45234:23
completeWork@https://localhost:8443/commons.js:56713:40
completeUnitOfWork@https://localhost:8443/commons.js:59924:16
performUnitOfWork@https://localhost:8443/commons.js:59900:12
workLoopSync@https://localhost:8443/commons.js:59865:22
performSyncWorkOnRoot@https://localhost:8443/commons.js:59491:9
scheduleUpdateOnFiber@https://localhost:8443/commons.js:58923:28
updateContainer@https://localhost:8443/commons.js:62108:15
legacyRenderSubtreeIntoContainer/<@https://localhost:8443/commons.js:62493:22
unbatchedUpdates@https://localhost:8443/commons.js:59638:12
legacyRenderSubtreeIntoContainer@https://localhost:8443/commons.js:62492:21
render@https://localhost:8443/commons.js:62575:10
./.cache/app.js/</</</<@https://localhost:8443/commons.js:1185:15
setTimeout handler*./node_modules/@mikaelkristiansson/domready/ready.js/</<@https://localhost:8443/commons.js:7574:14
./.cache/app.js/</</<@https://localhost:8443/commons.js:1184:72
promise callback*./.cache/app.js/</<@https://localhost:8443/commons.js:1178:125
promise callback*./.cache/app.js/<@https://localhost:8443/commons.js:1124:93
./.cache/app.js@https://localhost:8443/commons.js:1216:30
__webpack_require__@https://localhost:8443/commons.js:790:30
fn@https://localhost:8443/commons.js:101:20
0@https://localhost:8443/commons.js:85050:18
__webpack_require__@https://localhost:8443/commons.js:790:30
@https://localhost:8443/commons.js:857:37
@https://localhost:8443/commons.js:860:10
IanPhilips commented 3 years ago

It seems like when I hit re-record it wants to ask for permission to use my camera again (Recorder: skipping loadUserMedia() because it is already asking for permission), but Firefox doesn't prompt me to allow it as it's already allowed, so videomail times out.

binarykitchen commented 3 years ago

That's interesting. Thanks for the report @IanPhilips

Do you have a prototype somewhere running where I can see this myself in action? And do you experience the same problem when you visit the main site www.videomail.io ??

IanPhilips commented 3 years ago

Yes, the repo is here and the site is at www.virtualbycfb.com (hit get my assessment button, choose agree & begin, choose one of the prompts, and you're at the videomail integration). It doesn't happen at videomail.io, hmmmm!

IanPhilips commented 3 years ago

It looks like I was hiding the videomail client too often. I was hiding it unintentionally on every state update and then it would throw an error after like 10 or so hides. Now I hide it specifically as a toggle, keeping track of whether it's shown or not in state, and it works fine now!

binarykitchen commented 3 years ago

Awesome!

I also recommend using the npm package instead of getting it over CDN.