导航器界面，使用javascript访问用户代理

I’ve been working on a video-streaming application that requires some information about the user agent (read: browser). I was pleasantly surprised to find that each thread of research led me back to the same place: the Navigator Interface.

我一直在开发一个视频流应用程序，该应用程序需要一些有关用户代理的信息(阅读：浏览器)。 我惊奇地发现每一个研究线索都将我带回到同一个地方： Navigator Interface 。

The Navigator Interface gives developers access to a wide range of functionality — including causing the device to vibrate (navigator.vibrate()). I wanted to share some of the interesting things the Navigator Interface can tell us about our users (with their permission, of course).

导航器界面使开发人员可以使用各种功能-包括使设备振动( navigator.vibrate() )。 我想分享一些导航器界面可以告诉我们有关用户的有趣信息(当然，要获得他们的许可)。

地理位置 (Geolocation)

Do you need to know the (approximate) geographic location of your users? You can use the Navigator Interface to request their location:

您是否需要知道用户的(大约)地理位置？ 您可以使用导航器界面来请求其位置：

navigator.geolocation.getCurrentPosition(loc => console.log(loc))

If you copy and paste this code into your browser’s console, the browser will notify you that the website is trying to access your location. Should you allow it, a Geolocation object will appear in your console.

如果您将此代码复制并粘贴到浏览器的控制台中，则浏览器将通知您该网站正在尝试访问您的位置。 如果您允许，则Geolocation对象将出现在控制台中。

Inside that object, you’ll see a latitude, longitude and accuracy value. The accuracy value is like a margin of error; it is a radius in meters that draws a circle around the given coordinates. Your user could be anywhere within that circle.

在该对象内部，您会看到一个纬度，经度和精度值。 精度值就像误差容限； 它是一个以米为单位的半径，它围绕给定的坐标绘制一个圆。 您的用户可能在该圈子内的任何地方。

The location services available to your user depend on the machine they’re using to access your application. Typically, laptops and desktops do not have GPS capabilities, so the browser will use one of two methods to locate the user: location based on available Wifi networks or IP-based location.

用户可用的位置服务取决于他们用来访问应用程序的计算机。 通常，笔记本电脑和台式机不具备GPS功能，因此浏览器将使用以下两种方法之一来定位用户：基于可用Wifi网络的位置或基于IP的位置。

If you want to be sure the browser is using the best possible method for geolocation, you can pass an options argument to the .getCurrentPosition() method:

如果要确保浏览器使用的是最佳的地理定位方法，则可以将选项参数传递给.getCurrentPosition()方法：

const options = { enableHighAccuracy: true }
navigator.geolocation.getCurrentPosition(success, error, options)

(The first two arguments are callback functions handling successful attempts to access geolocation and unsuccessful attempts, respectively.)

(前两个参数是回调函数，分别处理访问地理位置的成功尝试和失败的尝试。)

媒体设备 (Media Devices)

Media devices are any hardware devices that provide media input. Generally, these will be cameras and microphones. Requesting access to these devices works in a similar way to accessing geolocation; although, this method is asynchronous:

媒体设备是提供媒体输入的任何硬件设备。 通常，这些将是相机和麦克风。 请求访问这些设备的方式与访问地理位置的方式类似； 虽然，此方法是异步的：

const constraints = { video: true, audio: true }
let mediaStream
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => mediaStream = stream)

Here, we’re requesting access to all video and audio devices connected to the browser. Again, if you copy and paste this code into your browser, you’ll be asked to grant permission for the site to use your camera and microphone. Once granted, type mediaStream into the console and you should see a MediaStream object with some properties and a lot of different methods.

在这里，我们要求访问连接到浏览器的所有视频和音频设备。 同样，如果您将此代码复制并粘贴到浏览器中，则会要求您授予该网站使用相机和麦克风的权限。 授予权限后，在控制台中键入mediaStream ，您将看到带有一些属性和许多不同方法的MediaStream对象。

If you want to know more about your user’s camera(s), you can ask the MediaStream object for an array of video devices:

如果您想进一步了解用户的摄像机，可以向MediaStream对象询问一系列视频设备：

const videoArray = mediaStream.getVideoTracks()
const video = videoArray[0]

I only have one camera connected to my laptop, so I’m just taking the first item of this array. This item is a MediaStreamTrack object with a label property that provides the name of the camera. This object has methods of its own that allow us to dig deeper into the device’s attributes:

我只有一台相机连接到我的笔记本电脑，所以我只是拍摄此阵列的第一项。 此项是具有label属性的MediaStreamTrack对象，该属性提供摄像机的名称。 该对象具有自己的方法，使我们可以更深入地研究设备的属性：

video.getSettings()
video.getCapabilities()

The .getSettings() method returns an object containing the camera’s set aspectRatio, frameRate and its height and width in pixels — which together comprise the resolution. The .getCapabilities() method provides an object with the same properties, but each property points to an object with a max and min value.

.getSettings()方法返回一个对象，该对象包含相机的set aspectRatio ， frameRate及其height和width以像素为单位)，它们共同构成了分辨率。 .getCapabilities()方法为对象提供了相同的属性，但是每个属性都指向具有max和min的对象。

With this information, you can prohibit users from streaming with subpar video quality. Or, you could iterate through a user’s devices and suggest the best device to use for streaming based on its capabilities.

有了这些信息，您就可以禁止用户以低于标准的视频质量进行流媒体播放。 或者，您可以遍历用户的设备并根据其功能建议最佳的流媒体设备。

These are just some of the interesting things you can do with the Navigator Interface. You can also view what plugins the browser is using, the user’s preferred language and even what type of connection the client is using to connect to the network and an onchange event to respond to changes in that connection.

这些只是您可以使用“导航器界面”执行的一些有趣的操作。 您还可以查看浏览器正在使用哪些插件，用户首选的语言，甚至客户端用于连接网络的连接类型以及onchange事件以响应该连接中的更改。

If you’re curious to learn more about the Navigator Interface, I encourage you to check out the MDN documentation. Note: a good amount of the features listed in the documentation are either experimental or not supported across all browsers. Be sure to check browser support for any Navigator-related task you want to use in your application.

如果您想了解有关Navigator Interface的更多信息，建议您查阅MDN文档 。 注意：文档中列出的大量功能是实验性的，或者并非所有浏览器都支持。 请确保检查浏览器对您要在应用程序中使用的与导航器相关的任务的支持。

And, because your application’s access to this information depends on the user granting permission, always include error handling at every step.

并且，由于您的应用程序对此信息的访问取决于用户授予的权限，因此始终在每个步骤中都包括错误处理。

翻译自: https://medium.com/swlh/navigator-interface-accessing-the-user-agent-with-javascript-a9445f8592ab