Демонстрация экрана средствами браузера

#php #javascript #html #css

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

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

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

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

Ответы

Ответ 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:

 






CSS:

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


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