Получить метки устройства на странице шоу - PullRequest
Новая
       12

Получить метки устройства на странице шоу

0 голосов
/ 12 ноября 2018

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

P.S. когда я останавливаю () камеру, она отключает камеру и дает только черный экран. Почему черный, а не цвет фона?

CameraStreamView.cshtml 

@using Api.Models
@{
    ViewBag.Title = "Smart Vision";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="~/Content/Contact-Form-Clean.css">
</head>

<body onpageshow="Init()">
<div id="container">
    <video id="video" style="display: block; margin: 0 auto; margin-top: 30px;" width="300" height="400" autoplay></video>
    <button id="enableStream" style="display: block; margin: 0 auto; margin-top: 20px; height: 70px; width: 200px" onclick="start()">Enable camera</button>
    <button id="disableStream" style="display: block; margin: 0 auto; margin-top: 20px; height: 70px; width: 200px" onclick="stop()">Disable camera</button>
    <label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>

<script src="~/Scripts/GetCameraFeed.js"></script>
</body>
</html>

GetCameraFeed.js 

const videoSelect = document.querySelector('select#videoSource');
const selectors = [videoSelect];

function gotDevices(deviceInfos) {
    // Handles being called several times to update labels. Preserve values.
    const values = selectors.map(select => select.value);
    selectors.forEach(select => {
        while (select.firstChild) {
            select.removeChild(select.firstChild);
        }
    });
    for (let i = 0; i !== deviceInfos.length; ++i) {
        const deviceInfo = deviceInfos[i];
        const option = document.createElement('option');
        option.value = deviceInfo.deviceId;
        if (deviceInfo.kind === 'videoinput') {
            option.text = deviceInfo.label;
            videoSelect.appendChild(option);
        }
    }
    selectors.forEach((select, selectorIndex) => {
        if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
            select.value = values[selectorIndex];
        }
    });
}

function Init() {
    navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
}


function gotStream(stream) {
    window.stream = stream; // make stream available to console
    video.srcObject = stream;
    // Refresh button list in case labels have become available
    return navigator.mediaDevices.enumerateDevices();
}

function handleError(error) {
    console.log('navigator.getUserMedia error: ', error);
}

function start() {
    const videoSource = videoSelect.value;
    const constraints = {
        video: { deviceId: videoSource ? { exact: videoSource } : undefined }
    };
    navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
}

function stop() {
    video.pause();
    video.src = "";
    stream.getTracks().forEach(track => track.stop());
    console.log("Stopping stream");
}

1 Ответ

0 голосов
/ 13 ноября 2018

То, что вы хотите, это явным образом не разрешено из-за проблем снятия отпечатков пальцев . Сведения о настройке пользователя позволяют веб-сайтам однозначно идентифицировать их в Интернете, что является проблемой конфиденциальности.

Когда пользователи доверяют вашему сайту камеру и микрофон, эта информация считается релевантной для обмена.

Рабочая группа определила, что это разумный компромисс по нескольким причинам:

  1. У большинства пользователей настольных компьютеров есть только одна камера или нет.
  2. У большинства пользователей телефонов есть два, но вы можете использовать ограничение FaceMode для выбора.
  3. Учитывая 1 и 2, предварительный выбор, возможно, является худшим для большинства пользователей.

Я бы рассмотрел вопрос об изменении вашего кода, чтобы запросить камеру по умолчанию в первый раз, и дать пользователям возможность изменить его по факту, если потребуется. Это то, что делают большинство сайтов WebRTC.

Обратите внимание, что это должно быть проблемой только при первом посещении пользователем вашего сайта. При условии, что они предоставили камеру или микрофон только один раз в прошлом, вы сможете увидеть ярлыки, по крайней мере, в Chrome.

В отличие от Chrome, Firefox не сохраняет разрешения неявным образом, поэтому вам потребуется немного больше работы, чтобы получить ярлыки при загрузке страницы при повторных посещениях:

enumerateDevices возвращает deviceId для каждого устройства, которое сохраняется для вашего сайта, если пользователь предоставил (или предоставит в течение этого сеанса) камеру или микрофон хотя бы один раз. Вы можете использовать куки или локальное хранилище, чтобы соотнести deviceId s с метками устройства. Это также позволяет выживать людям, аннулирующим разрешение в Chrome.

...