在qq浏览器中不能使用navigator.mediaDevices.getUserMedia调用摄像头

Question

问题描述

使用js调用手机摄像头，研究了navigator.mediaDevices.getUserMedia 的api但是在其他的手机浏览器上都成功调出摄像头，但是qq浏览器不能调用，而且qq浏览器内核版本也支持该api，没有任何报错提示！

另外附加一个问题：

在使用constraints 参数修改前摄为后摄，
facingMode: "environment"
在实际使用时仍然是前摄。
好忧伤！！

---

问题出现的环境背景及自己尝试过哪些方法

自己尝试过使用兼容处理办法：

但是仍然不可行。

相关代码

//访问用户媒体设备的兼容方法

function getUserMedia(constrains,success,error){
    if(navigator.mediaDevices.getUserMedia){
        //最新标准API
        navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia){
        //webkit内核浏览器
        navigator.webkitGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.mozGetUserMedia){
        //Firefox浏览器
        navagator.mozGetUserMedia(constrains).then(success).catch(error);
    } else if (navigator.getUserMedia){
        //旧版API
        navigator.getUserMedia(constrains).then(success).catch(error);
    }
}

var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//成功的回调函数
function success(stream){
    //兼容webkit内核浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    video.src = CompatibleURL.createObjectURL(stream);
    //播放视频
    video.play();
}

//异常的回调函数
function error(error){
    console.log("访问用户媒体设备失败：",error.name,error.message);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia){
    //调用用户媒体设备，访问摄像头
    const constraints = {
        audio: true, 
        video: {
            width: { ideal: 1280 },
            height: { ideal: 720 },
            frameRate: { 
                ideal: 10,
                max: 15
            },
            facingMode: "environment"
        }
    };
    getUserMedia(constraints,success,error);
} else {
    alert("你的浏览器不支持访问用户媒体设备");
}

//注册拍照按钮的单击事件
document.getElementById("capture").addEventListener("click",function(){
    //绘制画面
    console.log('点击事件');
    context.drawImage(video,0,0,480,320);
});

Answer 1

暂时没看出什么问题，不过你确定旧版 API 不是下面这个签名?

navigator.getUserMedia ( constraints, successCallback, errorCallback );

navigator.getUserMedia - Web API 接口 | MDN

Answer 2

你最后解决了嘛？哥们

Answer 3

能看看解决的代码吗

Answer 4

1234567