MediaStreamRecorder | Cross browser audio/video/screen | SDK library

 by   streamproc JavaScript Version: 1.3.4 License: MIT

kandi X-RAY | MediaStreamRecorder Summary

kandi X-RAY | MediaStreamRecorder Summary

MediaStreamRecorder is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Utilities, SDK applications. MediaStreamRecorder has a Permissive License and it has medium support. However MediaStreamRecorder has 3 bugs and it has 43 vulnerabilities. You can install using 'npm i msr' or download it from GitHub, npm.

A cross-browser implementation to record. You can record above four options altogether (in single container). MediaStreamRecorder is useful in scenarios where you're planning to submit/upload recorded blobs in realtime to the server! You can get blobs after specific time-intervals.
Support
    Quality
      Security
        License
          Reuse

            kandi-support Support

              MediaStreamRecorder has a medium active ecosystem.
              It has 2503 star(s) with 576 fork(s). There are 112 watchers for this library.
              OutlinedDot
              It had no major release in the last 12 months.
              There are 127 open issues and 40 have been closed. On average issues are closed in 189 days. There are 2 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of MediaStreamRecorder is 1.3.4

            kandi-Quality Quality

              MediaStreamRecorder has 3 bugs (0 blocker, 0 critical, 2 major, 1 minor) and 2 code smells.

            kandi-Security Security

              MediaStreamRecorder has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              OutlinedDot
              MediaStreamRecorder code analysis shows 43 unresolved vulnerabilities (43 blocker, 0 critical, 0 major, 0 minor).
              There are 0 security hotspots that need review.

            kandi-License License

              MediaStreamRecorder is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              MediaStreamRecorder releases are available to install and integrate.
              Deployable package is available in npm.
              Installation instructions are not available. Examples and code snippets are available.
              MediaStreamRecorder saves you 480 person hours of effort in developing the same functionality from scratch.
              It has 1131 lines of code, 0 functions and 35 files.
              It has low code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of MediaStreamRecorder
            Get all kandi verified functions for this library.

            MediaStreamRecorder Key Features

            No Key Features are available at this moment for MediaStreamRecorder.

            MediaStreamRecorder Examples and Code Snippets

            Create subfolders based on cell value and copy images to same folder
            JavaScriptdot img1Lines of Code : 83dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            Sub imagemove()
            
                Const MAIN_FOLDER = "c:\temp\msr\"
            
                Dim FileName As String, wb As Workbook, ws As Worksheet
                Dim count As Long, iLastRow As Long, iRow As Long
                Dim sPictureFolder As String, sCopyFolder As String
                Dim sCop
            Detect number of physical cores programmatically
            JavaScriptdot img2Lines of Code : 32dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            $ lscpu -J
            {
               "lscpu": [
                  {"field": "Architecture:", "data": "x86_64"},
                  {"field": "CPU op-mode(s):", "data": "32-bit, 64-bit"},
                  {"field": "Byte Order:", "data": "Little Endian"},
                  {"field": "CPU(s):", "data": "4"},
            

            Community Discussions

            QUESTION

            I developed the recording using the JavaScript web audio API, but the sound quality is poor
            Asked 2021-May-25 at 19:58

            I have created an application that sings along in the app with the web audio API of JavaScript. This worked perfectly on iOS safari and Chrome, but the sound quality was poor on Android Chrome. To solve this, I tried changing the audio deviceId, but it still didn't work. Does someone have information that might help?

            Doubt: After recording, I pass the file to the server and play it on another page. I am wondering if this is causing the problem.

            This is my code

            ...

            ANSWER

            Answered 2021-May-25 at 19:58

            When trying to build high-quality audio with getDisplayMedia, in the past I've passed in MediaStreamConstraints that remove some of the default processing on the input track:

            stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: { channels: 2, autoGainControl: false, echoCancellation: false, noiseSuppression: false }});

            I'm still learning WebRTC myself, so I'm not sure if these same properties can be passed when using getUserMedia and MediaConstraints, but I thought I'd share in case helpful. It sounds like this might also be about available devices. Good luck!

            Source https://stackoverflow.com/questions/67682297

            QUESTION

            recording canvas animation playback issue with chromium browsers
            Asked 2021-Feb-13 at 07:46

            If i use the following code to record a canvas animation:

            ...

            ANSWER

            Answered 2021-Feb-13 at 07:46

            Having tried all the plugins like ts-ebml and web-writer, I found the only reliable solution was to upload the video to my server and use ffmpeg with the following command

            Source https://stackoverflow.com/questions/65954387

            QUESTION

            How do you determine bitsPerSecond for media recording?
            Asked 2021-Feb-12 at 20:25

            Is there some formula like frames per second X resolution to determine the bitsPerSecond? I can't understand what values I'm supposed to be using. I want to specify the bitsPerSecond for 720p, 1080p and 4k video. I'm not sure if file type matters but this will most likely befor webm or mp4. I'm afraid some of my files are unnecessarily large while others I'm not using enough bits causing video glitches.

            I did find values listed here.... https://restream.io/blog/what-is-a-good-upload-speed-for-streaming/ But even that im not sure how to convert over.

            I am using RecordRTC https://github.com/muaz-khan/RecordRTC which is a wrapper for the MediaRecorder.

            ...

            ANSWER

            Answered 2021-Feb-09 at 23:05

            You can read this article about video bitrate to understand how it works. https://restream.io/blog/what-is-video-bitrate/

            According to YouTube Recommended video bitrates ( https://support.google.com/youtube/answer/1722171?hl=en#zippy=%2Cbitrate), you can use

            Source https://stackoverflow.com/questions/65800159

            QUESTION

            Take desktop screenshot with Electron
            Asked 2021-Jan-17 at 08:08

            I am using Electron to create a Windows application that creates a fullscreen transparent overlay window. The purpose of this overlay is to:

            1. take a screenshot of the entire screen (not the overlay itself which is transparent, but the screen 'underneath'),
            2. process this image by sending the image as a byte stream to my python server, and
            3. draw some things on the overlay

            I am getting stuck on the first step, which is the screenshot capturing process.

            I tried option 1, which is to use capturePage():

            ...

            ANSWER

            Answered 2021-Jan-16 at 15:09

            desktopCapturer only takes videos. So you need to get a single frame from it. You can use html5 canvas for that. Here is an example: https://ourcodeworld.com/articles/read/280/creating-screenshots-of-your-app-or-the-screen-in-electron-framework

            Or, use some third party screenshot library available on npm. The one I found needs to have ImageMagick installed on linux, but maybe there are more, or you don't need to support linux. You'll need to do that in the main electron process in which you can do anything that you can do in node.

            Source https://stackoverflow.com/questions/65750773

            QUESTION

            firebase.firestore().onSnapshot occurs two times
            Asked 2020-May-27 at 13:03

            I use Firebase Hosting and would like to realize this web app. (I use Windows 10, Windows Subsystems for Linux, Debian 10.3 and Google Chrome browser. )

            1. push buttons and record audio (index.html + main.js)
            2. upload the audio file to Cloud Storage (main.js)
            3. transcribe the audio file using Cloud Speech to text API (index.js: cloud function)
            4. write the transcription on Cloud Firestore (index.js: cloud function)
            5. get transcription data from Firestore using .onSnapshot. put that data in a textarea (main.js)

            I passed step 1~4, but have a difficult in step 5. When I access the web app, it shows transcription data before I record audio.

            This data was made the last time I accessed the web app.

            When I go through step1 to step5, I get another textarea which is what I want. Could you tell me how can I avoid the first textarea? Thank you in advance.

            This is browser's console.

            This is main.js(client side)

            ...

            ANSWER

            Answered 2020-May-27 at 13:03

            This is because, as explained in the doc, when you set a listener, there is always an initial call.

            In your case, this initial call returns the last document that was created in your collection (because your query is defined with orderBy("timestamp", "desc").limit(1)).

            You could maintain a counter that indicates if it is the initial call or a subsequent one. Something along the following lines:

            Source https://stackoverflow.com/questions/62036294

            QUESTION

            Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File
            Asked 2020-May-21 at 11:58

            I make a simple audio recording web app using Firebase Hosting. I would like to record audio on browser and upload it to Cloud Storage. When I deploy and access my app, I can record audio. However the app failed to upload the audio to Cloud Storage.

            (I use Windows 10, Windows Subsystems for Linux, Debian 10.3 and Google Chrome browser. )

            This is an error message in browser's console.

            ...

            ANSWER

            Answered 2020-May-21 at 11:58

            I don't know much about the .wav file but you seem to be trying to store an object instead of a blob or a file that Firebase Storage is expecting. Try creating a var blob = recordAudio.getBlob() and replace file in your put() function with blob instead.

            Source https://stackoverflow.com/questions/61925815

            QUESTION

            Firebase Cloud Storage: resource: the server responded with a status of 403 ()
            Asked 2020-May-21 at 05:59

            I make a simple audio recording web app using Firebase Hosting. I would like to record audio on browser and upload it to Cloud Storage. When I deploy and access my app, I can record audio. However the app failed to upload the audio to Cloud Storage.

            (I use Windows 10, Windows Subsystems for Linux, Debian 10.3 and Google Chrome browser. )

            This is an error message in browser's console.

            ...

            ANSWER

            Answered 2020-May-21 at 05:59

            For you to get the permissions correctly, you need to check your Firebase Storage Security Rules. Configuring them correctly, will provide the access and permissions needed for the audios to be upload to the storage. By default, the rules will ask you to be authenticated, so you need to check to confirm. This way, you can either change your application to have authentication (best option) or the rules.

            You can change the rules by accessing the Firebase Console and accessing the tab Rules. If you check the rules and they are similar or equal to the one below, it's confirming that you will need to be authenticated to write in the database, which is causing the error you are seeing.

            Source https://stackoverflow.com/questions/61927039

            QUESTION

            MediaStreamRecorder is not a constructor
            Asked 2020-Apr-15 at 05:17

            I'm new to Angular6 and I'm trying to use MediaStreamRecorder. I'm definitely doing something wrong when defining MediaStreamRecorder because I keep getting the error TypeError: msr__WEBPACK_IMPORTED_MODULE_4__.MediaStreamRecorder is not a constructor. Not sure how or where should I declare and define MediaStreamRecorder. Can you help me with this, please?

            I have installed msr module, and my code looks like this:

            ...

            ANSWER

            Answered 2018-Aug-03 at 16:41

            As the answer to this post suggested, the solution to me was that in typings.d.ts file to add the following declarations:

            Source https://stackoverflow.com/questions/51671148

            QUESTION

            Why does MediaRecorder fail to start? (error: there's no audio or video tracks available) RecordRTC
            Asked 2019-Dec-09 at 09:43

            UPDATE: Current best hypothesis is that this is somehow caused by the large school/university networks— other users aren't having the problem.

            I'm using RecordRTC to record audio. That relies on MediaRecorder.

            Upon first starting the recording, this (caught) error is logged:

            ...

            ANSWER

            Answered 2019-Dec-09 at 09:42

            This code will fail when there is a getUserMedia error. Change

            Source https://stackoverflow.com/questions/46701859

            QUESTION

            MediaStreamRecorder doesn't fire the ondataavailable event
            Asked 2019-May-15 at 13:00

            I am using an open source JavaScript library MediaStreamRecorder to record audio and video webRTC calls in Mozilla Firefox and Google Chrome.

            The calls are recording successfully but I am facing the following issue.

            If I use the time interval of 1 second (1000ms) in multiStreamRecorder.start() then multiStreamRecorder.ondataavailable event doesn't fire. And that's why No error or No log in console.

            But, if I use the time interval of 1.5 seconds (1500ms) or greater, it fires the multiStreamRecorder.ondataavailable event and everything works perfectly fine. (Only in Video Case)

            I want to keep the interval to 1 second (1000ms) only.

            ...

            ANSWER

            Answered 2017-Apr-17 at 16:46

            I suspect one second is not enough time for the camera stream to warm up. While you can attach a recorder to a stream instantly, it doesn't appear to be ready for play/recording in zero time.

            Video elements have .onloadedmetadata to let you wait for data to be ready; recorders do not.

            You can make one though (use https fiddle for Chrome):

            Source https://stackoverflow.com/questions/43452683

            Community Discussions, Code Snippets contain sources that include Stack Exchange Network

            Vulnerabilities

            No vulnerabilities reported

            Install MediaStreamRecorder

            You can install using 'npm i msr' or download it from GitHub, npm.

            Support

            Stable / Aurora / Nightly. Stable / Canary / Beta / Dev. Chrome / Firefox / Opera. Only Audio - No Video - No Canvas - No Screen. Only Audio - No Video - No Canvas - No Screen. There is a similar project: RecordRTC! Demo - Documentation.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries

            Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link

            Reuse Pre-built Kits with MediaStreamRecorder

            Consider Popular SDK Libraries

            WeiXinMPSDK

            by JeffreySu

            operator-sdk

            by operator-framework

            mobile

            by golang

            Try Top Libraries by streamproc

            Record-Entire-Meeting

            by streamprocJavaScript