MediaDevices.getUserMedia () поддержка ios

Question

Я пытался получить подробную информацию о настройках браузера (разрешение камеры, микрофона) в проекте ReactJS. Исходя из этого, я покажу сообщение об ошибке в пользовательском интерфейсе, если оно заблокировано. Я использую следующий код.

useEffect(()=>{
collectUserLogData();
},[]);

const collectUserLogData = () => {
    navigator.getMedia =
      navigator.getUserMedia ||
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.msGetUserMedia;

    navigator.getMedia(
      { video: true },
      () => {
        setCamera(true);
        console.log("Permission_", "camera ON");
      },
      () => {
        console.log("Permission_", "Camera OFF");
      }
    );

    navigator.getMedia(
      { audio: true },
      () => {
        setMic(true);
        console.log("Permission_", "Mic ON");
      },
      () => {
        console.log("Permission_", "Mic OFF");
      }
    );

    navigator.geolocation.getCurrentPosition(
      () => {
        setLocation(true);
        console.log("Permission_", "Geo ON");
      },
      () => {
        console.log("Permission_", "Geo OFF");
      }
    );
  };

Это работает в браузерах windows и android, но не в браузерах ios. В ма c ios не тестировал. Всплывающее окно не отображается в браузерах ios. Как это исправить.

Answer 1

getUserMedia () работает правильно в последней версии iOS. Обычно 11.1 и более поздние версии подходят.

Чтобы устранить эту проблему, вам необходимо подключить устройство iOS к Ma c и использовать настройку удаленной отладки Safari. Таким образом вы можете получить консоль и отладчик javascript.

enumerateDevices () работает, если вы уже использовали getUserMedia (), чтобы запросить у пользователя разрешение на использование камеры и / или mi c. Без этого разрешения результаты emumerateDevices () расплывчаты или отсутствуют. Это сделано для предотвращения снятия отпечатков пальцев в браузере. Потому что cybercreeps.

В версиях iOS, где действительно работает getUserMedia, вам не нужно искать его в различных пространствах имен. navigator.mediaDevices.getUserMedia() достаточно.

Вот код, подобный тому, который я использовал для перечисления медиа-источников на всех типах различных браузерных платформ, включая. iOS, Android и различные рабочие столы. Я использовал async / await, потому что это простой способ обработать обещание, возвращаемое getUserMedia (). Но вы можете использовать Promise напрямую, если вы используете sh. (Обратите внимание, что я отредактировал этот код, чтобы удалить материалы, специфичные для приложения c, но я его не отлаживал.)

async function enumerateSources() {
    if(      navigator 
          && navigator.mediaDevices 
          && typeof navigator.mediaDevices.enumerateDevices === 'function' ) {
      try {
        /* open a generic stream to get permission to see devices; 
         * Mobile Safari insists */
        const stream = await navigator.mediaDevices.getUserMedia(
                { video: true, audio: true} )
        let devices = await navigator.mediaDevices.enumerateDevices()
        const cameras = devices.filter( device => {
          return device.kind === 'videoinput'
        })
        if (cameras.length >= 1) console.log ('cameras avail')
        const mics = devices.filter( device => {
          return device.kind === 'audioinput'
        })
        if (mics.length >= 1) console.log ('mics avail')

       /* release stream */
        const tracks = stream.getTracks()
        if( tracks ) {
          for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
        }
        return ({cameras, mics})
      } catch(error) {
        /* user refused permission, or media busy, or some other problem */
        console.error(error.name, error.message)
        return {cameras:[], mics:[]})
      }
    }
    else throw ('media device stuff not available in this browser')
}

Answer 2

Новый API работает как

navigator.mediaDevices.getUserMedia()

Я предлагаю вам добавить в свой лог поддержки c оператор, чтобы заменить все остальные, которые являются старым API.

Вы тогда нужно использовать поток, с которым разрешается обещание. Вы можете иметь элемент video в нашей DOM и установить его свойство srcObj с потоком.

navigator.getMedia(
      { video: true },
      (stream) => {
        video.srcObj = stream;
        setCamera(true);
        console.log("Permission_", "camera ON");
      },
      () => {
        console.log("Permission_", "Camera OFF");
      }
    );