samuelweckstrom / react-record-webcam Goto Github PK

Tried this in useEffect cleanup:

useEffect( () => () => recordWebcam.close(), [recordWebcam] );

but it fires every time recordWebcam changes, so will close when it opens.

The recorder not working on firefox and safari latest versions

When i using with SSR, I got this error.

[1] ReferenceError: MediaRecorder is not defined
[1]     at /Users/xxx/video_recorder/codec.ts:63:5
[1]     at Array.forEach (<anonymous>)
[1]     at containers.reduce.mimeType (/Users/xx/video_recorder/codec.ts:61:11)

So, in the codec.ts should add check typeof MediaRecorder !== 'undefined'
Thanks

I was using this the other week, and it was fine. Now working on a new project I tried downloading it, and it states that there is a dependency error.

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! peer react@"^18.0.0" from @testing-library/[email protected] npm ERR! node_modules/@testing-library/react npm ERR! @testing-library/react@"^13.4.0" from the root project npm ERR! 4 more (react-dom, react-router, react-router-dom, react-scripts) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.3" from [email protected] npm ERR! node_modules/react-record-webcam npm ERR! react-record-webcam@"^0.0.18" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/react npm ERR! peer react@"^16.3" from [email protected] npm ERR! node_modules/react-record-webcam npm ERR! react-record-webcam@"^0.0.18" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /Users/example/.npm/eresolve-report.txt for a full report.

Feels like it should be fine since all the dependency is asking for is any version of react newer than 16.3, but I might be missing something here. Any help would be greatly appreciated

I can not record sound system on iPhone

I try pass mimeType to options props is "video/mp4" but the output is always "video/x-matroska;codecs=avc1,opus".
Seems mimeType option is not working.

Which license is your library under?

Thank you in advance.

Attempting to record videos which are too big (I've found this to be about 4 minutes at 480x720) results in a failure and no video data saved on iOS. Users of my app have reported this problem on various (new) iPhone models, and I have reproduced the failure on an iPhone X. The dataavailable event has data.size of 0, and as a result the recording is left with status = "RECORDING" and no objectURL. This seems to be a result of calling recording.recorder.start() with no parameters instead of specifying a timeslice. Other platforms I have tested (Chrome on Android and Chrome on macOS) are able to record longer videos without a problem, but it seems that on iPhone, trying to get the entire video in a single Blob can be problematic.

I have tested on different mobile devices having problem.
is there any suggestion or recommendation why this is happening?

Hi, thanks for this great package.
I want to access to the recorded video in order to upload to my webserver. But I couldn't figure out how to get recorded video object. Can you give me an example?

Thanks.

I am attempting to develop a mobile camera mode switcher that allows the user to toggle between the front and back cameras. Here’s an example from React Webcam: https://codepen.io/mozmorris/pen/mddvKBE.

I tried to set the mediaTrackConstraints to environment to see if it uses the back camera but it still uses the default camera which is the front camera

There seems to be some mismatch in the type for the hook compared what is actually implemented. I could put together PR, if you'd be open to that.

Hi there,

I have a an issue/question, not sure if its on my end im doing something wrong

I have a start func

  const start = async () => {
    if(activeRecordings.length){
      await clearAllRecordings()
    }
    const recording = await createRecording();
    if (recording && recording.id) {
        const rec = await openCamera(recording.id);
        if(rec){
          setIsCameraOn(true)
        }
        setRecordingId(recording.id);
      }
  };

which is being by a useEffect when the user enters the page, that way the camera opens automatically.
However when doing that the recording id is always "undefined-undefined"

i've seen a similar error patched recently but i'm still having a problem. i've run quite a few different tests but this time, just by copying the demo code, it doesn't work and this error appears. I can't find a solution. As long as = useRecordWebcam() is in the code, it won't start with this error...
ReferenceError: MediaRecorder is not defined

When we unmount the component and then mount it again, devices will be empty.
What is the problem?

all npm run options failing with the error of

Cannot find module 'react-record-webcam' or its corresponding type declarations.

I used the example:

  async function record() {
    const recording = await createRecording();
    await openCamera(recording.id);
    await startRecording(recording.id);
    await new Promise((resolve) => setTimeout(resolve, 3000)); // Record for 3 seconds
    const recorded = await stopRecording(recording.id);
    console.log(recorded)

    // Upload the blob to a back-end
    const formData = new FormData();
    formData.append('file', recorded.blob, 'recorded.webm');
  };

however there is no such thing as recorded.blob, I have only see a blobChunks array

according to the doc I should receive chucks and complete blob

Hello,

I am currently working on a project that requires video recording and this library works pretty well and straight forward to use.

However, I've noticed that the WebM files it produces lack duration metadata, which we need to display the video duration. For video display, we're using Vidstack.

I've discovered a library called fix-webm-duration that seems capable of adding duration metadata to the WebM Blob. I was wondering if there are other solutions available for this issue.

Any assistance would be greatly appreciated!

Hi,
I was wondering is there any possible way to edit the size of the webcam itself and have audio on for the playback clips
Thank you

Hi dear developers, I am not so professional at react and js, I just integrated your project into my own and it works well so far.

Just wondering if there is any way to send the recording directly to a given api? and how would you implement it.

Thank you.

Need Selecting Camera Option

I need to record video with no audio. can you add parameter for mute recording?

Opening a Project with default hook on ios doesn't work.

If you open the Camera you get a permission Request for mic and Camera but only a blackscreen.
No Video is Captured.

Using: IPhone 13 Pro Max
Browser: Chrome / Safari

Im on OSX latest trying it firefox webdev latest.

Is there a way to bette debug understand why this happens?

In the browser i seem to get a

Uncaught (in promise) DOMException: MediaRecorder constructor: video/webm;codecs=vp9 indicates an unsupported codec
    startRecording index.js:365
    __async index.js:36
    __async index.js:20
    startRecording index.js:360
    quickDemo App.tsx:42
3 [index.js:365:6](http://localhost:5173/node_modules/.pnpm/[email protected][email protected]/node_modules/react-record-webcam/dist/index.js)

Im using your demo from the repro. after initial camera select and click record it fails.
Camera is shown though.

It seems to always use the v9 code no matter what i set the property to in the demo

const options = {  mimeType: 'video/webm;codecs=avc1' }

  const {
    activeRecordings,
    cancelRecording,
    clearPreview,
    closeCamera,
    createRecording,
    devicesByType,
    devicesById,
    download,
    muteRecording,
    openCamera,
    pauseRecording,
    resumeRecording,
    startRecording,
    stopRecording,
  } = useRecordWebcam(options);

I probably need an older codes to be cross browser compatible but the options object seems to be not picked up.
​