Chrome 앱 : 화면 공유를 만들고 싶습니다 (DesktopCapture 편)

크롬 앱의 화면 공유에서 자주 사용되는 DesktopCapture에 대한 참고 사항

우선 이미 있는 것을 살펴본다.

chrome extensions samples의 desktopcapture에서 파일 가져 오기


전회의 기사와 같이 chrome의 확장 기능에 읽어들여 실행하면 사용할 수 있다.

크롬 앱: 아이콘을 클릭하면 표시되는 앱

오늘의 테마: 아이콘에서 실행할 수 있도록 개선

1. 아이콘에서 실행할 수 있도록 manifest.json에
browser_action을 추가합니다. 또 background도 변경한다.

manifest.json

{
  "name": "sample app",
  "description": "sample app",
  "version": "0.1",
  "manifest_version": 2,
  "icons": {
    "16": "icon.png",
    "128": "icon.png"
  },
    "background": {
      "scripts": ["background.js"]
  },
  "permissions": [
    "desktopCapture"
  ],
  "browser_action": {
  }
}

2. 아이콘이 클릭되면 실행될 명령을 background.js에 씁니다.

background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.windows.create({
        url: "index.html",
        focused: true,
        type: "popup"
    });
});

클릭하면 index.html을 기반으로 페이지가 만들어집니다.

3.index.html 만들기
start 버튼을 누르면, 공유 화면 선택 페이지가 열리고, 선택하면 html에 공유 화면이 출력되는 것을 만든다.
즉 html에서는 start 버튼과 video가 있으면 좋기 때문에 이하와 같이 된다.

index.html

<video id="video" autoplay></video>

<button id="start">Start</button>
<script src="app.js"></script>

단, app.js는 start 버튼을 누를 때의 이벤트 코드가 기술되는 js 파일이다.

4.app.js 만들기
start 버튼을 클릭하면 발동하는 명령은

document.getElementById("start").addEventListener("click", function(e){///}

된다. 또한 공유 화면 선택 페이지를 표시하는 명령은

chrome.desktopCapture.chooseDesktopMedia(
        ["screen", "window"], function(streamId) {///選択した画面のIdをstreamIdとして取得している///},エラーのときに実行される関数)

된다. 이 streamId를 사용하여 video에 정보를 전달합니다.

navigator.webkitGetUserMedia(
{音声：なし，画像：streamIdの情報},
function(stream){id="video"のsrcにstreamで作ったURLをわたす},
エラーのときに実行される);

이 때 stream은 {음성:없음, 화상:streamId의 정보}로부터의 정보를 받고 있다.

정리하면

app.js

document.getElementById("start").addEventListener("click", function(e){
    chrome.desktopCapture.chooseDesktopMedia(
        ["screen", "window"], function(streamId) {
            navigator.webkitGetUserMedia(
                {
                    audio: false,
                    video: { mandatory: {
                        chromeMediaSource: "desktop",
                        chromeMediaSourceId: streamId
                        }
                    }
                },
                function(stream){
                    document.getElementById("video").src = URL.createObjectURL(stream);
                },
                function(){alert("error")}
            );  
        }
    );
});

된다.