• доменное имя
• хостинг с HTTPS
• 5 долларов на карте

Публикация расширения

1. Переходим в Chrome Developer Dashboard и оплачиваем заготовленные 5 баксов.
   
   
   
   
   
2. Готовим ZIP-архив с файлами расширения.
   
   Для этого скачиваем 2 файла здесь.
   Меняем файл manifest.json и проставляем свои:
   
   
   • name
   • author
   • description
   • homepage_url
   
   Например
   
   

   "Name" : "My cool screen sharing extension",
   "Author" : "I am",
   "Description" : "The extensions shares screens from my website",
   "Homepage_url" : "https://mysupercat.com",

   
   

   {
     "name" : "Flashphoner Screen Sharing",
     "author": "Flashphoner",
     "version" : "1.4",
     "manifest_version" : 2,
     "minimum_chrome_version": "34",
     "description" : "This Chrome extension is developed for http://flashphoner.com WCS Api to enable screen capture.",
     "homepage_url": "http://flashphoner.com",
     "background": {
       "scripts": ["background-script.js"],
       "persistent": false
     },
     "externally_connectable": {
       "matches": [
         "https://flashphoner.com/*",
         "https://*.flashphoner.com/*",
         "*://localhost/*",
         "*://127.0.0.1/*"
       ]
     },
     "icons": {
       "16": "logo16.png",
       "48": "logo48.png",
       "128": "logo128.png"
     },
     "permissions": [
       "desktopCapture"
     ],
     "web_accessible_resources": [
       "logo48.png"
     ]
   }

   
   Кроме этого меняем иконки и подставляем свой домен в коде externally_connectable
   
   

   "externally_connectable": {
       "matches": [
         "https://mysupercat.com/*",
         "https://*.mysupercat.com/*",
         "*://localhost/*",
         "*://127.0.0.1/*"
       ]
     }

   
   В итоге получается такой manifest.json:
   
   

   {
     "name" : "My cool screen sharing extension",
     "author": "I am",
     "version" : "1.0",
     "manifest_version" : 2,
     "minimum_chrome_version": "34",
     "description" : "The extensions shares screens from my website",
     "homepage_url": "https://mysupercat.com",
     "background": {
       "scripts": ["background-script.js"],
       "persistent": false
     },
     "externally_connectable": {
       "matches": [
         "https://mysupercat.com/*",
         "https://*.mysupercat.com/*",
         "*://localhost/*",
         "*://127.0.0.1/*"
       ]
     },
     "icons": {
       "16": "logo16.png",
       "48": "logo48.png",
       "128": "logo128.png"
     },
     "permissions": [
       "desktopCapture"
     ],
     "web_accessible_resources": [
       "logo48.png"
     ]
   }
   

   
   Упаковываем эти файлы в ZIP-архив со всеми иконками и другими картинками. Про иконки можно прочесть здесь. А про дополнительные картинки здесь.
   
   Далее жмем Add new item.
   
   
   
   
   Далее, после ознакомления с соглашением, заливаем наш ZIP-архив
   
   
   
   
   После загрузки архива, нужно еще раз все внимательно проверить и сохранить
   
   
   
   
   Осталось опубликовать расширение из Dashboard, нажав кнопку Publish.
   
   
   
   
   Опубликованное расширение в Dashboard выглядит так:
   
   
   
   
   Готово. Расширение упаковано, опубликовано и доступно для установки в браузер.
   
   

   Инлайн инсталляция

   
   Без инлайн инсталляции вашим пользователям пришлось бы переходить на сайт Chrome Store и устанавливать расширения там. Это конечно не смертельно, но:
   
   
   • Для пользователя это не очень удобно.
   • Пользователь может запутаться на странице установки расширения и не вернуться.
   
   Инлайн инсталляцией расширения называется как раз вот это аккуратное окошко, которое не заставляет пользователя переходить на Chrome Store:
   
   
   
   
   Чтобы настроить инлайн инсталляцию, вам нужно иметь контроль над доменом и хостингом, который вы описали в манифесте (файл manifest.json).
   
   Например, если ваш домен mysupercat.com, то нужно будет пройти стандартную процедуру верификации и подтвердить владение этим доменом.
   
   Чтобы включить инлайн инсталляцию, установите флаг This item uses inline install на странице редактирования расширения.
   
   
   
   
   Далее добавляете свой веб-сайт.
   
   
   
   
   В новом окне открывается Search Console, где можно пройти процедуру верификации.
   
   
   
   
   Следующим шагом нужно залить файл-идентификатор на ваш хостинг чтобы подтвердить владение доменом / сайтом
   
   
   
   
   Процедура верификации пройдена успешно.
   
   
   
   
   Верифицированный сайт становится доступен в списке для данного расширения и на нем теперь можно использовать инлайн инсталляцию
   
   
   
   
   

Интеграция скринкастинга в веб-страницу

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Screen Sharing</title>
   <script type="text/javascript" src="../../../../flashphoner.js"></script>
   <script type="text/javascript" src="screen-sharing.js"></script>
   <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg">
</head>
<body onload="init_page()">
<h1>Screen Sharing</h1>
<button type="button" id="installExtensionButton" onclick="installExtension()">Install Now
</button>
<h2>Capture</h2>
<div id="localVideo" style="width:320px;height:240px; border: 1px solid"></div>
<h2>Preview</h2>
<div id="remoteVideo" style="width:320px;height:240px; border: 1px solid"></div>
<button id="publishBtn" type="button" onclick="connectAndShareScreen()">Connect and share screen</button>
<p id="status"></p>
</body>
</html>

<script type="text/javascript" src="../../../../flashphoner.js"></script>

<script type="text/javascript" src="screen-sharing.js"></script>

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/nlbaajplpmleofphigmgaifhoikjmbkg">

<button type="button" id="installExtensionButton" onclick="installExtension()">Install Now
</button>

<div id="localVideo" style="width:320px;height:240px; border: 1px solid"></div>

<div id="remoteVideo" style="width:320px;height:240px; border: 1px solid"></div>

<button id="publishBtn" type="button" onclick="connectAndShareScreen()">Connect and share screen</button>
<p id="status"></p>

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var localVideo;
var remoteVideo;
var extensionId = "nlbaajplpmleofphigmgaifhoikjmbkg";

function init_page() {
   //init api
   try {
       Flashphoner.init({screenSharingExtensionId: extensionId});
   } catch (e) {
       //can't init
       return;
   }

   var interval = setInterval(function () {
       chrome.runtime.sendMessage(extensionId, {type: "isInstalled"}, function (response) {
           if (response) {
               document.getElementById("installExtensionButton").disabled = true;
               clearInterval(interval);
               localVideo = document.getElementById("localVideo");
               remoteVideo = document.getElementById("remoteVideo");
           } else {
               document.getElementById("installExtensionButton").disabled = false;
           }
       });
   }, 500);

}

function connectAndShareScreen() {
   var url = "wss://wcs5-eu.flashphoner.com:8443";
   console.log("Create new session with url " + url);
   Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
       //session connected, start streaming
       startStreaming(session);
   }).on(SESSION_STATUS.DISCONNECTED, function () {
       setStatus(SESSION_STATUS.DISCONNECTED);
   }).on(SESSION_STATUS.FAILED, function () {
       setStatus(SESSION_STATUS.FAILED);
   });

}

function startStreaming(session) {
   var streamName = "test123";
   var constraints = {
       video: {
           width: 320,
           height: 240,
           frameRate: 10,
           type: "screen"
       }
   };
   session.createStream({
       name: streamName,
       display: localVideo,
       constraints: constraints
   }).on(STREAM_STATUS.PUBLISHING, function (publishStream) {
       setStatus(STREAM_STATUS.PUBLISHING);
       //play preview
       session.createStream({
           name: streamName,
           display: remoteVideo
       }).on(STREAM_STATUS.PLAYING, function (previewStream) {
           //enable stop button
       }).on(STREAM_STATUS.STOPPED, function () {
           publishStream.stop();
       }).on(STREAM_STATUS.FAILED, function () {
           //preview failed, stop publishStream
           if (publishStream.status() == STREAM_STATUS.PUBLISHING) {
               setStatus(STREAM_STATUS.FAILED);
               publishStream.stop();
           }
       }).play();
   }).on(STREAM_STATUS.UNPUBLISHED, function () {
       setStatus(STREAM_STATUS.UNPUBLISHED);
       //enable start button
   }).on(STREAM_STATUS.FAILED, function () {
       setStatus(STREAM_STATUS.FAILED);
   }).publish();
}

//show connection or local stream status
function setStatus(status) {
   var statusField = document.getElementById("status");
   statusField.innerHTML = status;
}

//install extension
function installExtension() {
   chrome.webstore.install();
}

var SESSION_STATUS = Flashphoner.constants.SESSION_STATUS;
var STREAM_STATUS = Flashphoner.constants.STREAM_STATUS;
var localVideo;
var remoteVideo;
var extensionId = "nlbaajplpmleofphigmgaifhoikjmbkg";

Flashphoner.init({screenSharingExtensionId: extensionId});

chrome.runtime.sendMessage(extensionId, {type: "isInstalled"}, function (response) {...}

function connectAndShareScreen() {
   var url = "wss://wcs5-eu.flashphoner.com:8443";
   console.log("Create new session with url " + url);
   Flashphoner.createSession({urlServer: url}).on(SESSION_STATUS.ESTABLISHED, function (session) {
       //session connected, start streaming
       startStreaming(session);
   }).on(SESSION_STATUS.DISCONNECTED, function () {
       setStatus(SESSION_STATUS.DISCONNECTED);
   }).on(SESSION_STATUS.FAILED, function () {
       setStatus(SESSION_STATUS.FAILED);
   });
}

var constraints = {
       video: {
           width: 320,
           height: 240,
           frameRate: 10,
           type: "screen"
       }
   };

session.createStream({
       name: streamName,
       display: localVideo,
       constraints: constraints
   }).publish();

on(STREAM_STATUS.PUBLISHING, function (publishStream) {...}

session.createStream({
           name: streamName,
           display: remoteVideo
       }).play();

Подготовка к тестированию

• screen-sharing.html
• screen-sharing.js
• flashphoner.js

• Установить на свой хост
• Запустить на Amazon EC2
• Воспользоваться демо-сервером по адресу wss://wcs5-eu.flashphoner.com:8443

Тестируем скринкастинг в Chrome

1. Открываем страницу screen-sharing.html по HTTPS в браузере Google Chrome
   
   
   
   
   
2. Нажимаем кнопку Install Now чтобы добавить расширение методом инлайн инсталляции
   
   
   
   
   
3. Нажимаем Add extension и можно сразу стартовать скринкастинг по кнопке Connect and share screen. Chrome попросит выбрать что именно мы будем захватывать. Это может быть вкладка либо окно Chrome или другое приложение.
   
   
   
   
   
4. Нажимаем кнопку Share и приходим к окончательному результату. Экран захватывается, отправляется на сервер по WebRTC и проходит обратно, отображаясь в блоке Preview.
   
   
   
   
   

Подведем итоги

Ссылки