Handle for device permission before start record

[freedytag]

Description

When starting the record, better add a handle for device permission is author not.

Steps to reproduce

For audio-only case, when I click start record middle button.
And press the record, and then stop record.
Now it was finished record audio success.
Now If I cancel the permission from browser address bar(Firefox)
(That is also same as video case if the user warry the personal privacy issue)
And then press the start record button.
And stop the record button.
Now try to play the record result (It was empty audio)

Results

Expected

If permission was cancel, when press record, better ask permission again.

Actual

It did not ask permission again. and record an empty audio

Error output

Not error output.

Additional Information

That was better stop the device after the user click "stop record", special for video record, as user will warry it about the personal privacy.

versions

videojs

VideoJS 7.7.5
VideoJS record 3.11.0

browsers

Firefox 76.0

OSes

Mac/Windows

[thijstriemstra]

Your question looks similar to this: https://stackoverflow.com/questions/15993581/reprompt-for-permissions-with-getusermedia-after-initial-denial

Apparently Chrome provides a Permissions API that allows you to query device permissions:

navigator.permissions.query({name: 'microphone'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

 navigator.permissions.query({name: 'camera'})
 .then((permissionObj) => {
  console.log(permissionObj.state);
 })
 .catch((error) => {
  console.log('Got error :', error);
 })

There is also a polyfill for the navigator.permissions.request() API (because the camera and microphone permissions are not supported in Firefox yet for example): https://github.com/chromium/permissions.request

And this should be called before getUserMedia is called. Can you try this permissions API and see how it works @freedytag so we can discuss how to implement it in videojs-record?

[freedytag]

The current flow I used is
When the "finishRecord" event.
player.recard().stopDevice();

For prevent, the end-user think their microphone was still getting recorded

And user click play to playback the recorded audio to check is ok to submit

If the recorded audio was not good, the end-user may use the "⬤" to record again.

In this case, I try to use
navigator.mediaDevices.getUserMedia in the "startRecord" event.
But seem the callback "stream" needed config to pass to videojs.record? it seemed can get permission and suddenly stop device.

ref code:

		navigator.mediaDevices.getUserMedia({ audio: true })
			.then(function(stream) {
				console.log('You let me use your mic!')
			})
			.catch(function(err) {
				console.log('No mic for you!')
			});

[thijstriemstra]

I misunderstood. I re-read your original report and was able to reproduce the "empty audio" situation. Will call this a bug instead of an enhancement.

[thijstriemstra]

In Firefox (76 on Ubuntu 18) I see this error message:

 VIDEOJS: ERROR: DOMException: "MediaRecorder.start: The MediaStream is inactive" video.min.js:12:750
    e http://localhost:8080/node_modules/video.js/dist/video.min.js:12
    error http://localhost:8080/node_modules/video.js/dist/video.min.js:12
    dispatcher http://localhost:8080/node_modules/video.js/dist/video.min.js:12

In Chrome 81 it's not possible to revoke the permissions after allowing them (unless the page is reloaded).

[thijstriemstra]

And flat out denying permissions at startup results in this error for Firefox 76:

And this error for Chrome 81:

So that could use some improvement as well.