JavaScript&&stream类问题&&OverconstrainedError
OverconstrainedError
看了很多资料，大部分回答是把原因归咎于设备。最终，同事给出了一个移花接木的解决方案
根基资料：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick=start()>start test</button>
<video id="video" width="100%" height="100%" autoplay=""></video>
<script type="text/javascript">
function start(){
const constraints = {
video: {width:1920,height:1080},
// video: true,
audio: false
}
const video = document.getElementById('video');
navigator.mediaDevices.enumerateDevices()
.then(devices => {
console.log(devices);
})
// let devices = navigator.mediaDevices.getSupportedConstraints();
let localCamera = navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
// console.log(stream);
video.srcObject = stream;
video.onloadedmetadata = function() {
console.log('wanglichi width is', this.videoWidth);
console.log('wanglichi height is', this.videoHeight);
}
})
.catch(error => {
console.log(error);
})
}
</script>
</body>
</html>
上述代码资料中，在start()函数内，“ .then(stream => {”部分前，属于本地创建流的代码部分，是通用的。
如果你出现OverconstrainedError错误，可以尝试把本地创建流的代码部分移花接木到你当前的创建流的代码位置。
并非必须使用提供的固定接口创建流，上面创建的流照样可以传到你们的代码使用。
上述代码也可以测试你客户端摄像头的最大分辨率，默认设置的hd1080p，当客户端摄像头达不到1080p时，将自动下调。
移花接木的代码段：
function createLocalVideoStream(resolution) {
//新代码段
//获取分辨率
var myResolution = getParameterByName('resolution') || {
width: 1920,
height: 1080
};
if ( myResolution == "hd1080p" ) {
myResolution = {
width: 1920,
height: 1080
};
} else if ( myResolution == "hd720p" ) {
myResolution = {
width: 1280,
height: 720
};
} else if ( myResolution == "vga" ) {
myResolution = {
width: 640,
height: 480
};
} else {
//alert("目前仅支持实参hd1080p、hd720p、vga")
}
//创建容器，设置分辨率、设备编号
const constraints = {
video: {
deviceId:video_device_id ? {exact:video_device_id} : undefined,
width:myResolution.width,
height:myResolution.height
},
audio: false,
}
navigator.mediaDevices.enumerateDevices()
.then(devices => {
})
// let devices = navigator.mediaDevices.getSupportedConstraints();
//移花接木点
let localCamera = navigator.mediaDevices.getUserMedia(constraints).then(stream => {
let mediaStream;
//旧代码段
// const audioConstraintsForMic = false;
// const videoConstraintsForCamera = new Ics.Base.VideoTrackConstraints(Ics.Base.VideoSourceInfo.CAMERA);
// videoConstraintsForCamera.frameRate = 25;
// videoConstraintsForCamera.resolution = {width:1280,height:720};
// if ( resolution ) {
// videoConstraintsForCamera.resolution = {width:640,height:480};
// }
// if ( video_device_id ) {
// videoConstraintsForCamera.deviceId = video_device_id;
// }
// let mediaStream;
// Ics.Base.MediaStreamFactory.createMediaStream(new Ics.Base.StreamConstraints(
// audioConstraintsForMic, videoConstraintsForCamera)).then(stream => {
mediaStream = stream;
localStream = new Ics.Base.LocalStream(
mediaStream, new Ics.Base.StreamSourceInfo(
'screen-cast', 'camera'));
参考文献：
https://webrtc.org.cn/getusermedia-common-error/
https://blog.csdn.net/u013899738/article/details/80946683
