WebRTC не работает getUserMedia

Question

Смотрел этот видос и переписывал код
C самого начала я написал npm init, везде проставил Enter
потом установил:
npm install budo --save
npm install simple-peer --save

В package.json написано:

{
  "name": "p2p-videochat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo index.js:bundle.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "budo": "^11.6.3",
    "simple-peer": "^9.7.2"
  }
}

Запускаю проект, написав npm start

C самого начала я пробовал просто navigator.getUserMedia и у меня не заработало, поэтому я попробовал использовать полифилл с сайта MDN

navigator.mediaDevices.getUserMedia не работает и navigator.getUserMedia
Пишет такую ошибку:
Error: getUserMedia is not implemented in this browser

Прочитал в гугле, что это может быть из-за небезопасного соединения
в chrome://flags/ для #unsafely-treat-insecure-origin-as-secure включил, но так тоже не работает

//if (navigator.mediaDevices === undefined) {
//  navigator.mediaDevices = {};
//}

// Некоторые браузеры частично реализуют свойство mediaDevices, поэтому 
//мы не можем присвоить ссылку на объект свойству getUserMedia, поскольку 
//это переопределит существующие свойства. Здесь, просто добавим свойство 
//getUserMedia , если оно отсутствует.

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {

    // Сначала, если доступно, получим устаревшее getUserMedia

    var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    //Некоторые браузеры не реализуют его, тогда вернем отмененный промис
    // с ошибкой для поддержания последовательности интерфейса 

    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Иначе, обернем промисом устаревший navigator.getUserMedia 

    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true
  })
  .then((stream) => {
    init(stream);
  })
  .catch((err) => {
    console.error(err);
  })


function init(stream) {
  console.log(1);
  const Peer = require('simple-peer');
  const peer = new Peer({
    initiator: location.hash === '#init',
    trickle: false,
    stream: stream
  });

  const yourId = document.querySelector('#yourId');
  const otherId = document.querySelector('#otherId');
  const connect = document.querySelector('#connect');
  const send = document.querySelector('#send');
  const yourMessage = document.querySelector('#yourMessage');
  const messages = document.querySelector('#messages');

  peer.on('signal', (data) => {
    yourId.value = JSON.stringify(data);
  });

  connect.addEventListener('click', () => {
    const valueOtherId = JSON.parse(otherId.value);
    peer.signal(valueOtherId);
  });

  send.addEventListener('click', () => {
    const valueYourMessage = yourMessage.value;
    peer.send(valueYourMessage);
  });

  peer.on('data', (data) => {
    messages.textContent += data + '\n';
  });
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#video__conf {
    display: flex;
    flex-direction: column;
    max-width: 250px;
    padding: 10px;
}

#video__conf > *:not(:last-child) {
    margin-bottom: 20px;
}

textarea {
    min-height: 100px;
}

<div id="video__conf">

  <label>Your ID:</label>
  <textarea id="yourId"></textarea>
  <label>Other ID:</label>
  <textarea id="otherId"></textarea>
  <button id="connect">connect</button>

  <label>Enter Message:</label>
  <textarea id="yourMessage"></textarea>
  <button id="send">send</button>
  <pre id="messages"></pre>

</div>

БЛОГ НА HUSL

WebRTC не работает getUserMedia

Ответы (0 шт):