5

Ситуация такая: есть собственная площадка для проведения вебинаров, нужно сделать так чтобы ведущий вебинара по нажатию одной кнопки мог транслировать демонстрацию своего экрана всем участниками этого вебинара.

На площадке есть такая возможность, ведущий вебинара по нажатию одной кнопки транслирует свой экран только лишь средствами браузера.

Меня интересует то, как можно достать это изображение(видео), желательно с применением средств браузера.

К примеру, на самом сайте просматривать демонстрацию. С серверной частью разберусь.

2
  • 1. Сайт должен работать по https. 2. kongaraju.blogspot.ru/2015/07/…
    – Qwertiy
    19 янв 2018 в 16:33
  • 2
    Можно интегрировать youtube или twitch
    – user245150
    7 апр 2018 в 11:00

1 ответ 1

1

JS:

const videoElem = document.getElementById("video");
const startElem = document.getElementById("start");
const stopElem = document.getElementById("stop");

// Options for getDisplayMedia()

var displayMediaOptions = {
  video: {
    cursor: "never"
  },
  audio: false
};

// Set event listeners for the start and stop buttons
startElem.addEventListener("click", function(evt) {
  startCapture();
}, false);

stopElem.addEventListener("click", function(evt) {
  stopCapture();
}, false);

async function startCapture() {

  try {
    let screen = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    videoElem.srcObject = screen
    sendInfo(screen);
  } catch(err) {
    console.error("Error: " + err);
  }
}

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}

function sendInfo(data) {
  // Тут отправляем 'data' на сервер 

  /*
  Как отобразить данные из видео
  videoElem.srcObject = (здесь данные с сервера)
  */
}

HTML:

<p><button id="start">Start Capture</button>&nbsp;<button id="stop">Stop Capture</button></p>

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

CSS:

#video {
  border: 1px solid #999;
  width: 98%;
  max-width: 860px;
}

Тут не обязателен HTTPS, не нужны внешние ресурсы.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.