aziz86
aziz86

Reputation: 51

Audio of the tab disappear while capturing tab using TabCapture API

I am testing a Tab Capture API to record audio of web page that contains a text to speech flash object. while recording a web page the playback audio disappear but sounds OK in the recorded file.

I am using the following MediaStream constraint to record video and audio.

var MediaStreamConstraint = {
            audio: true, 
            video: true, 
            videoConstraints: {
                mandatory: {
                    chromeMediaSource: 'tab',
                        minWidth: 640,
                        maxWidth: 640,
                        minHeight: 420,
                        maxHeight: 420

                }
            }
};

am i missing something in the stream constraint or there is some other solution to the problem?

Upvotes: 4

Views: 1238

Answers (4)

Eric Garcia
Eric Garcia

Reputation: 31

As others have said, playing the audio from the captured MediaStream in the callback works:

chrome.tabCapture.capture(MediaStreamConstraint, gotStream);

function gotStream(stream) {
  window.audio = document.createElement("audio");
  window.audio.src = window.URL.createObjectURL(stream);
  window.audio.play()
}

Upvotes: 3

Vikram Rajasekaran
Vikram Rajasekaran

Reputation: 11

In your background script's handleCapture function, try this to continue playback:

var audio = new Audio(window.URL.createObjectURL(stream));
audio.play();

Upvotes: 1

Eli
Eli

Reputation: 11

only add the next lines

window.audio = document.createElement("audio");
window.audio.src = window.URL.createObjectURL(stream);
window.audio.play()

Upvotes: -1

Dayton Wang
Dayton Wang

Reputation: 2352

Keep in mind to grant permissions in manifest file

"permissions": [
    "tabCapture",
    "activeTab",
    ...
  ],  

The background.js should be something like this:

var recorder = new MRecordRTC();
function handleCapture(stream) {
recorder.addStream(stream);
recorder.mediaType = { video: true, audio: true };
recorder.startRecording();
}

var MediaStreamConstraint = {
audio: true,
video: true,
videoConstraints: {
    mandatory: {
        chromeMediaSource: 'tab',
        minWidth: 640,
        maxWidth: 640,
        minHeight: 420,
        maxHeight: 420
    }
}
};

function captureCurrentTab() {
chrome.tabCapture.capture(MediaStreamConstraint, handleCapture);
}

function stopCapturing() {
// stops the recording and save audio and video     
}

If these are not the case, could you please attach more related codes since the codes you attached look good with me.

Upvotes: 1

Related Questions