【Web前端问题】在qq浏览器中不能使用navigator.mediaDevices.getUserMedia调用摄像头

问题描述

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

另外附加一个问题：

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

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

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

clipboard.png
但是仍然不可行。

相关代码

//访问用户媒体设备的兼容方法
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);
});

回答：

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

navigator.getUserMedia ( constraints, successCallback, errorCallback );

navigator.getUserMedia - Web API 接口 | MDN

回答：

你最后解决了嘛？哥们

回答：

能看看解决的代码吗

回答：

1234567

以上是 【Web前端问题】在qq浏览器中不能使用navigator.mediaDevices.getUserMedia调用摄像头 的全部内容， 来源链接： utcz.com/a/137278.html

回到顶部