CODEWITHSUNDEEP
javascriptgoogle-chromeaudiogoogle-chrome-extension
Shawon
Shawon

Reputation: 322

How to add audio in desktop capture in chrome extension

I have added audio to chrome extension on screen cast of desktop. But audio is not in good quality. As, I record screen of the tab. I got good quality video and audio. How can I get good quality audio in desktop recording. Here is what I am using 

 chrome.desktopCapture.chooseDesktopMedia(['screen', 'window', 'audio'], function (streamId) {
        if (streamId) {
              var obj = {
               audio: {
                mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: streamId
                    }
               },
               video: {
                optional: [],
                   mandatory: {
                      chromeMediaSource: 'desktop',
                      chromeMediaSourceId: streamId,
                      maxWidth: 2560,
                      maxHeight: 1440
                   }
               }
            };

            countdownRun(function () {
                window.navigator.mediaDevices.getUserMedia(obj).then(function(stream) {
    $streamVideo = stream;
    $timeStart = Date.now();
    var audio = stream.getAudioTracks()[0];
    var video = stream.getVideoTracks()[0];
    alert(JSON.stringify(audio))
    alert(JSON.stringify(video))
    if (micSound) {
        window.navigator.webkitGetUserMedia({audio: true}, function (s) {
            $streamAudio = s;
            audio = s.getAudioTracks()[0];
            captureUseNacl(audio, video);
        }, function (e) {
            chrome.tabs.create({url: 'mic.html'});
        })
    } else {
        captureUseNacl(audio, video);

        (function () {
            var v = document.createElement('video');
            document.body.appendChild(v);
            v.setAttribute('autoplay', '');
            v.addEventListener('canplay', function () {
                console.log('play video');
            }, false);
            v.src = window.URL.createObjectURL(stream);
            $streamElement = v;
        })()
    }
}).catch(function(err) {
alert(err)
    alert(JSON.stringify(err));
});;
            })
        }
    });

Upvotes: 5

Views: 2353

Answers (1)

Kumar
Kumar

Reputation: 1217

You can do this by removing document.createElement and createObject part. It nothing but adding nose to the recording. If you check on the readystate of audio it is end. It should be live. Again, add maxFrameRate to video section to synchronize audio and video. Here is your code 

chrome.desktopCapture.chooseDesktopMedia(['screen', 'window', 'audio'], function (streamId) {
        if (streamId) {

              var obj = {
               audio: {
                mandatory: {
                        chromeMediaSource: 'desktop',
                        chromeMediaSourceId: streamId
                    }
               },
               video: {
                optional: [],
                   mandatory: {
                      chromeMediaSource: 'desktop',
                      chromeMediaSourceId: streamId,
                      maxWidth: 2560,
                      maxHeight: 1440,
                      maxFrameRate:30
                   }
               }
            };

            countdownRun(function () {
                navigator.mediaDevices.getUserMedia(obj).then(function(stream) {
    $streamVideo = stream;
    $timeStart = Date.now();
    var audio = stream.getAudioTracks()[0];
    var video = stream.getVideoTracks()[0];
    console.log(stream);
    if (micSound) {
        window.navigator.webkitGetUserMedia({audio: true}, function (s) {
            $streamAudio = s;
            audio = s.getAudioTracks()[0];
            captureUseNacl(audio, video);
        }, function (e) {
            chrome.tabs.create({url: 'mic.html'});
        })
    } else {
        captureUseNacl(audio, video);
    }
}).catch(function(err) {
 console.log(err)
});
            })
        }
    });

Upvotes: 6

Related Questions