javascript – GetUserMedia – facingmode

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

显然,GetUserMedia使用的认摄像头是前置摄像头.如何使用后置摄像头作为认设置?

这是我的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.");
        });

我在“强制”部分插入了facingMode,但没有工作.

请帮忙.

解决方法

更新:facingMode现在可通过 adapter.js polyfill在Chrome for Android中使用!

facingMode是not yet implemented in Chrome for Android,但在Firefox for Android中本地工作.

但是,您必须使用standard约束:(对于Chrome使用https fiddle):

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中意味着它只会在权限提示中更改摄像机选择器中的认值.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...