Javascript 在PageShow上获取设备标签_Javascript_Webrtc_Getusermedia

Javascript 在PageShow上获取设备标签

javascript webrtc

Javascript 在PageShow上获取设备标签,javascript,webrtc,getusermedia,Javascript,Webrtc,Getusermedia,我正在编写一个web应用程序，用户可以在其中使用他的相机（并选择要使用的相机）。问题是，我希望用户在启用照相机之前可以选择它。在当前代码中，当用户打开一个页面时，他会看到一个空的摄影机列表，当他启用摄影机流时，下拉列表会填充摄影机名称。我想在他打开网页时填充下拉列表另外，当我停止照相机时，它会禁用照相机，只显示一个黑屏。为什么它是黑色而不是背景色 CameraStreamView.cshtml @using Api.Models @{ ViewBag.Title = "Smart Vi

我正在编写一个web应用程序，用户可以在其中使用他的相机（并选择要使用的相机）。问题是，我希望用户在启用照相机之前可以选择它。在当前代码中，当用户打开一个页面时，他会看到一个空的摄影机列表，当他启用摄影机流时，下拉列表会填充摄影机名称。我想在他打开网页时填充下拉列表

另外，当我停止照相机时，它会禁用照相机，只显示一个黑屏。为什么它是黑色而不是背景色

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>

你想要的是，由于担心。关于用户设置的详细信息可以让网站在web上唯一地识别用户，这是一个隐私问题

一旦用户信任您的站点及其摄像头和麦克风，此信息将被视为与共享相关

工作组认为这是一种合理的权衡，原因如下：

大多数桌面用户只有一个摄像头或没有摄像头

大多数手机用户都有两个，但您可以使用约束来选择

考虑到1和2，对于大多数人来说，预先选择可能是一种低劣的用户体验

<>我会考虑改变你的代码，第一次请求默认相机，然后给用户一个选择，在他们需要的时候改变它。这是大多数WebRTC网站所做的

请注意，这只会在用户第一次访问您的站点时出现问题。如果他们在过去只授予相机或麦克风一次，你应该能够看到标签，至少在Chrome上

与Chrome不同，Firefox不会隐式保留权限，因此您需要做更多的工作才能在重复访问时获得页面加载标签：

enumerateDevices

为每个设备返回一个

deviceId

，如果用户已授予（或将在此会话中授予）摄像头或麦克风至少一次，该ID将在您的站点中保留。您可以使用cookie或本地存储将设备ID与设备标签关联起来。在Chrome中手动撤销权限的用户也可以保留此权限。

谢谢！在更新脚本时一定要记住这一点！

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");
}