MediaDevices html5,HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题

最新推荐文章于 2024-07-31 17:03:01 发布

weixin_39707941

最新推荐文章于 2024-07-31 17:03:01 发布

阅读量498

点赞数

文章标签： MediaDevices html5

本文详细介绍了如何使用HTML5的navigator.mediaDevices.getUserMedia接口调用手机摄像头，并解决不同设备中摄像头选择的问题。通过设置约束条件，可以指定使用前置摄像头，并展示如何用canvas进行图像捕获和适应屏幕大小。同时，针对摄像头镜像问题，提出了使用CSS旋转来调整。此外，还提供了完整的代码示例，包括开启和停止摄像机，以及拍照功能。

摘要由CSDN通过智能技术生成

.kind === 'videoinput') {

carema.push(deviceInfos.deviceId)

}

deviceInfoId = carema[后置位置];

}

var constraints = {

audio: false,

video: {

deviceId: deviceInfoId,

//放在app里面需要下面配置一下

"permissions": {

"audio-capture": {

"description": "Required to capture audio using getUserMedia()"

"video-capture": {

"description": "Required to capture video using getUserMedia()"

}

};

navigator.mediaDevices.getUserMedia(constraints)

.then(function (stream) {

var video = document.getElementById('video');

try {

window.stream = stream;

video.srcObject = stream;

} catch (error) {

video.src = window.URL.createObjectURL(stream);

}

this.localMediaStream = stream;

// video.play(); 这个加不加好像没有影响

})

.catch(function (err) {

console.log(err.name + ": " + err.message);

});如果只是一部手机可以这样，但是测试了多部手机发现摄像头数组毫无规律可循，这个方法慎用。

如果页面上添加选择摄像设备的按钮的话，这个方法还是不错的。查看设备能调用几个摄像头链接如下：https://webrtc.github.io/samples/src/content/devices/input-output/

由于我们的项目页面不希望出现切换按钮，面对后置出现的众多BUG，最终选择放弃，使用input调用摄像头。

成功调用后用canvas实现成像并适应屏幕大小

我这里的代码是取video的宽高然后复制给canvas，这样可以让canvas和video保持一致，只用给video设置宽度100%，高度调节成合适的值，就实现了适应手机屏幕。

var video = document.getElementById('video');

var canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d'),

CHeight = video.clientHeight, //获取屏幕大小让canvas自适应

CWidth = video.clientWidth;

canvas.width = CWidth;

canvas.height = CHeight;

//localMediaStream 在data里定义一个{}

if (localMediaStream) {

ctx.drawImage(video, 0, 0, CWidth, CHeight);

var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'

img.src = dataURL;video成像镜像问题

API唤醒的前置摄像头是相反的，很不舒服很不舒服。

之后用css处理一下给video添加 transform: rotate(180deg),可以实现反转，但是还是没有达到和手机一样的效果。

这时候可以选择通过设备ID调用前置摄像头，前置摄像头的laval一直都是“default”，也有的是空值，但是也能实现。

配置代码如下：

var constraints = window.constraints = {

audio: false,

video: {

sourceId: 'default',

facingMode: { exact: "user" }

}

};完美调用自己手机的前置摄像头！！！

完整代码如下：

页面代码：

点击自拍一张头像

拍照

// 头像相机

moveToCameraAVG() {

var self = this;

if (navigator.mediaDevices === undefined) {

navigator.mediaDevices = {};

}

if (navigator.mediaDevices.getUserMedia === undefined) {

navigator.mediaDevices.getUserMedia = function (constraints) {

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

if (!getUserMedia) {

return Promise.reject(new Error('getUserMedia is not implemented in this browser'));

}

return new Promise(function (resolve, reject) {

getUserMedia.call(navigator, constraints, resolve, reject);

});

}

if (window.stream) {

window.stream.getTracks().forEach(track => {

track.stop();

});

}