GetUserMedia - facingmode [英] GetUserMedia - facingmode

问题描述

我目前正在使用Android平板电脑和GetUserMedia在我的程序中拍照。

I am currently using an Android tablet and GetUserMedia to take pictures in my program.

显然，GetUserMedia使用的默认相机是前置摄像头。如何使用后置摄像头作为默认设置？

Apparently, the default camera used by GetUserMedia is the front camera. How do I use the rear camera as a default?

这是我的GetUserMedia代码：

Here's my code for GetUserMedia:

        navigator.getUserMedia({
            "audio": false,
            "video": {
                mandatory: {
                    minWidth: this.params.dest_width,
                    minHeight: this.params.dest_height,
                    //facingMode: "environment",
                },
            }
        }, 
        function(stream) {
            // got access, attach stream to video
            video.src = window.URL.createObjectURL( stream ) || stream;
            Webcam.stream = stream;
            Webcam.loaded = true;
            Webcam.live = true;
            Webcam.dispatch('load');
            Webcam.dispatch('live');
            Webcam.flip();
        },
        function(err) {
            return self.dispatch('error', "Could not access webcam.");
        });

我在强制部分插入了facesMode，但没有效果。

I inserted facingMode in the "mandatory" part but didn't work.

请帮忙。

推荐答案

更新 facingMode 现已通过 adapter.js polyfill在Chrome for Android中提供！

Update: facingMode is now available in Chrome for Android through the adapter.js polyfill!

facingMode 是尚未在Chrome for Android 中实施，但在Firefox for Android中原生使用。

facingMode is not yet implemented in Chrome for Android, but works natively in Firefox for Android.

你但是必须使用标准约束:(使用 https小提琴：

You must use standard constraints however: (use https fiddle for Chrome):

var gum = mode => 
  navigator.mediaDevices.getUserMedia({video: {facingMode: {exact: mode}}})
  .then(stream => (video.srcObject = stream))
  .catch(e => log(e));

var stop = () => video.srcObject && video.srcObject.getTracks().forEach(t => t.stop());

var log = msg => div.innerHTML += msg + "<br>";

<button onclick="stop();gum('user')">Front</button>
<button onclick="stop();gum('environment')">Back</button>
<div id="div"></div><br>
<video id="video" height="320" autoplay></video>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

{exact：} 语法表示需要约束，如果用户没有合适的摄像头，则会失败。如果你把它留下来，那么约束是可选的，在Firefox for Android中意味着它只会在权限提示中更改相机选择器中的默认值。

The { exact: } syntax means the constraint is required, and things fail if the user doesn't have the right camera. If you leave it out then the constraint is optional, which in Firefox for Android means it only changes the default in the camera chooser in the permission prompt.

这篇关于GetUserMedia - facingmode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！