【備忘録】[getUserMedia] ChromeとElectron(とFirefox)でスクリーンキャプチャーおよびChromeとElectronでシステムオーディオのキャプチャー

chrome.desktopCapture.chooseDesktopMedia(['screen', 'window', 'tab'], streamId => {
 // streamIdをcontent_script等に渡す
});

// 渡されたstreamIdを使用してgetUserMedia()を実行しストリームを取得
navigator.mediaDevices.getUserMedia({
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
      // 必要に応じてサイズ(解像度)の制約も記述
      // minWidth: 1280,
      // maxWidth: 1920,
      // minHeight: 720,
      // maxHeight: 1080
    }
  }
}).then(stream => {
  video.srcObject = stream;
}).catch(err => {
  // error
});

const desktopCapturer = require('electron').desktopCapturer;
let mediaSources = null;

desktopCapturer.getSources({types: [ 'screen', 'window']}, (err, sources) => {
  mediaSources = sources;
  /* 含まれる情報
  sources.forEach(souce => {
    source.id // id
    source.name // 画面名(ウィンドウタイトル)
    source.thumbnail // サムネイル
  });
  */
});

navigator.mediaDevices.getUserMedia({
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: mediaSources[1].id,
      // 必要に応じてサイズ(解像度)の制約も記述
      // minWidth: 1280,
      // maxWidth: 1920,
      // minHeight: 720,
      // maxHeight: 1080
    }
  }
}).then(stream => {
  video.srcObject = stream;
}).catch(err => {
  // error
});

{
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    },
    width: { min: 1280, max: 1920 },
    height: { min: 720, max: 1080 }
}   

navigator.mediaDevices.getUserMedia({
  video: {
    mandatory: {
      chromeMediaSource: 'desktop'
      // 必要に応じてサイズ(解像度)の制約も記述
      // minWidth: 1280,
      // maxWidth: 1920,
      // minWidth: 720,
      // maxWidth: 1080
    }
  }
}).then(stream => {
  video.srcObject = stream;
}).catch(err => {
 // error
});

navigator.mediaDevices.getUserMedia({
  video: {
    // 'screen':全画面 'window':ウィンドウ　'application':アプリケーションのいずれかを設定
    mediaSource: 'screen', 
    // 同様にサイズ(解像度)等の制約を追加可能
    // width: {min: 1280, max: 1920},
    // height {min: 720, max: 1080}
  }
}).then(stream => {
  video.srcObject = stream;
}).catch(err => {
 // error
});

chrome.desktopCapture.chooseDesktopMedia(['screen', 'audio'], streamId => {
 // streamIdをcontent_script等に渡す
});

navigator.mediaDevices.getUserMedia({
  audio:{
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  },
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  }
}).then(stream => {
    stream.getVideoTracks().forEach(track => stream.removeTrack(track)); // videoトラック削除
    video.srcObject = stream;
}).catch(err => {
 // error
});

['audio'] // ✖
['screen', 'audio'] // 〇
['window', 'audio'] // 〇
['screen', 'window', 'tab', 'audio'] // 〇

// ✖
{
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  }
}    

// ✖
{
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop',
      // audioにchromeMediaSourceId必要ある？と思って外してみたらエラーとなった。
      // audioにもchromeMediaSourceIdは必要みたい。
      // chromeMediaSourceId: streamId 
    }
  },
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  }
}

// ✖
{
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  },
  video: true
}

// 〇  
{
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  },
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  }
}

navigator.mediaDevices.getUserMedia({
  // ...
}).then(stream => {
  // ストリームからvideoトラックを削除
  stream.getVideoTracks().forEach(track => stream.removeTrack(track));
  // ...
});

navigator.mediaDevices.getUserMedia({
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop'
    }
  },
  video: {
    mandatory: {
      chromeMediaSource: 'desktop'
    }
  }
)).then(stream => {
  stream.getVideoTracks().forEach(track => stream.removeTrack(track));
  video.srcObject = stream;
}).catch(err => {
  // error
});

// about:configでmedia.getusermedia.audiocapture.enabledをtrueに変更後
navigator.mozGetUserMedia({
    audio: {
        mediaSource: 'audioCapture'
    },
    video: false, // Just being explicit, we only want audio for now
}, function(stream) {
    // Do what you want with this MediaStream.
}, function(error) {
    // Handle error
});