applyConstraints()、getCapabilities() 不适用于 Windows 的 Electron答案

【问题标题】：applyConstraints(), getCapabilities() not working on Electron for WindowsapplyConstraints()、getCapabilities() 不适用于 Windows 的 Electron
【发布时间】：2018-07-10 21:41:41
【问题描述】：

无法在基于Electron (v2.0.4) 的相机应用上使用 getCapabilities()、applyConstraints() 获取或应用任何约束 对于 Windows。 getCapabilities() 返回一个空对象。

但是，我可以在 Ubuntu 16.04 和 Raspbian 上使用相同的相机和相同版本的 Electron 获取和应用约束。当我直接在 Windows 上的 chrome 上运行 index.html 时，它也可以正常工作。

Electron for Windows 还不支持它还是我错过了什么？

要运行应用程序，请将以下文件放在一个目录中，在该目录中运行 npm install 和 npm start。

package.json

    {
      "name": "webrtc",
      "version": "1.0.1",
      "description": "WebRTC",
      "main": "main.js",
      "scripts": {
        "start": "electron ."
      },
      "devDependencies": {
        "electron": "latest"
      }
    }

main.js

    "use strict";

    const electron = require("electron");
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;

    const path = require("path");
    const url = require("url");

    let mainWindow;

    function createWindow()
    {
      mainWindow = new BrowserWindow({width: 1920, height: 1080});
      mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, "index.html"),
        protocol: "file:",
        slashes: true
      }));

      mainWindow.webContents.openDevTools();

      mainWindow.on("closed", function(){
        mainWindow = null
      });
    }

    app.on("ready", createWindow);

    app.on("window-all-closed", function(){
      app.quit();
    });

    app.on("activate", function(){
      if(mainWindow == null)
      {
        createWindow()
      }
    });

getCamera.js：

    "use strict";

    const video = document.getElementById("video");
    var constraints = window.constraints = {
      audio: false,
      video: {
        width: {ideal: 1280},
        height: {ideal: 720},
      },
    };

    navigator.mediaDevices.getUserMedia(constraints).then(videoSetup).catch(errorHandling);

    function videoSetup(stream)
    {
      const track = stream.getVideoTracks()[0];
      console.log("Device: " + track.label);
      window.stream = stream;
      video.srcObject = stream;
      setTimeout(function(){
        // track.applyConstraints({video: {width: 1920, height: 1080}});
        var capabilities = track.getCapabilities();
        console.log("Capabilities: " + JSON.stringify(capabilities));
      }, 2000);
    }

    function errorHandling(error)
    {
      console.log("Error: " + error);
    }

index.html

    <!DOCTYPE html>
    <html>

    <head>
      <meta charset="UTF-8">
      <title>Camera Test</title>
    </head>

    <body>
      <div>
        <video id="video" playsinline autoplay width=100%></video>
      </div>
    </body>

    <script src="getCamera.js"></script>
    </html>

getCapabilities() 在 Electron Windows 上的输出：功能：{}

在 Chrome Windows/Ubuntu/Raspbian 上 getCapabilities() 的输出：

功能：{"aspectRatio":{"max":2304,"min":0.0006510416666666666},"brightness":{},"colorTemperature":{},"contrast":{},"deviceId":" b054cbcea100ef88ffbe463a2caee133a5fd10b11915d0e2c5a230fdbf4776b9","exposureCompensation":{},"exposureMode":["continuous","manual"],"faceMode":[],"frameRate":{"max":60.000240325927734,"min":1 height":{"max":1536,"min":1},"saturation":{},"sharpness":{},"whiteBalanceMode":["continuous","manual"],"width":{ "max":2304,"min":1},"zoom":{}}

【问题讨论】：

标签： electron webrtc

【解决方案1】：

electron 2.0.4 基于 Chrome 61（检查 navigator.userAgent），它在 Chrome 66 中附带的 getCapabilities 上没有有意义的实现。据我所知，Chrome 63 中附带了 applyConstraints，即使发布笔记没有提及。

【讨论】：

这也是我的第一个想法，但是当我在 Ubuntu 16.04 上尝试时我很困惑。它在那里工作正常，我能够在那里获得并应用所有约束。 navigator.userAgent 在 Windows 和 Ubuntu 上为 webrtc、Chrome、electron 返回相同的版本。