H5移动端前置摄像头成像方向错误，横屏方向错误

前言

最近在做一个小h5页面，通过手机摄像头获取视频图像通过video播放出来，发现两个问题。
1.前置摄像头成像时，左右颠倒（举右手，视频显示左手）

2.手机旋转成横屏时，人物头像倒立

会发现竖屏可能是视频图像的方向发生错误，横屏也是如此。所以我们解决就需要改变视频图像方向为主（水平翻转）。

方案：

1.直接转摄像头的方向（不可行）

2.修改视频流，从而修改图像方向（不可行）

3.直接修改video视图的方向（可行）

具体操作

前置摄像头的video视图水平翻转180度。

transform:rotateY(180deg);

因为后置摄像头的成像没有问题，所以当切换成后置摄像头时，要将video恢复成水平0度。

transform:rotateY(0deg);

正确成像如下：

全部测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><title>摄像头成像</title>
</head>
<body style="text-align: center"><video id="video" width="320" height="480"  controls></video><div><button id="camera">打开/切换摄像头</button><button id="stop">关闭摄像头</button></div><script>//访问用户媒体设备的兼容方法function getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints, success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}let video = document.getElementById('video');function success(stream) {//兼容webkit核心浏览器let CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源console.log(stream);//video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}function error(error) {console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);}function close() { //关闭摄像头数据流if (video.srcObject) {try {var tracks = video.srcObject.getTracks();for (var track of tracks) {track.stop();}} catch (e) {alert(e);}}}document.getElementById('stop').addEventListener('click', close);//设备摄像头数据获取var device_videos = [];var device_videos_index = 0;navigator.mediaDevices.enumerateDevices().then(function (devices) {devices.forEach(function (dv) {var kind = dv.kind;if (kind.match(/^video.*/)) {device_videos.push(dv.deviceId);}});});var isQian=false;//是前置摄像头document.getElementById('camera').addEventListener('click', function () {if (isQian) {
isQian = false;document.getElementById("video").style.cssText = "width:320px; height:480px;transform:rotateY(0deg);"}else{isQian = true;document.getElementById("video").style.cssText = "width:320px; height:480px;transform:rotateY(180deg);"}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头close();getUserMedia({ video: { width: 320, height: 480, deviceId: device_videos[device_videos_index++%device_videos.length] } }, success, error);} else {alert('不支持访问用户媒体');}})</script>
</body>
</html>

延伸

当通过h5的方式来实现视频对讲时：
1.自身终端为前置摄像头时自身视频视图需要水平翻转180度，当为后置摄像头时自身视频视图不需要翻转。
2.对方视频视图为前置摄像头采集时，需要将对方视频视图水平翻转180度，当对方视频视图采集为后置摄像头时不需要翻转。

H5移动端前置摄像头成像方向错误，横屏方向错误相关推荐

在H5移动端开发强制竖屏，横屏时提示
1.不同的浏览器有不同的做法,参考如下:  <meta name="screen-orientation" content=&quo ...
Camera摄像头成像方向和LCD刷屏方向
(1)正常安装摄像头的规则 (A)显示屏LCD有两种刷新方向,沿短边扫描(竖屏)和沿长边扫描(横屏) (B)摄像头安装角度需要满足长边对长边,短边对短边(这里的长边对长边表示:摄像头长边对齐LCD屏的 ...
实际项目-移动端调用摄像头获取照片加水印
H5移动端打开摄像头和打开相册参考文档:http://www.html5plus.org/doc/zh_cn/camera.html !!!plus在PC端运行时会报错,只有打包后在手机端运行时才能 ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
为什么镜面成像是左右反而不是上下反（从前置摄像头说起）
通常,镜面的"左右反"被描述为:你在镜子前用右手写字,而镜子中的你正在用左手写字.为什么镜面成像给人感觉左右反而不是上下反呢?回顾高中物理,镜中像的形成是由于反射的光被人眼接收,而 ...
IOS前置摄像头左右成像问题
使用AVFoundation自定义相机,调用后置摄像头没问题,但是调用前置摄像头却左右成像问题: UIImageOrientation imgOrientation; //拍摄后获取的的图像方向 if ...
H5调用移动端手机摄像头
H5调用移动端手机摄像头 capture表示,可以捕获到系统默认的设备,比如:camera照相机:camcorder摄像机:microphone录音.accept表示,直接打开系统文件目录. < ...
H5 获取前置摄像头
您可以使用HTML5的 MediaDevices.getUserMedia() API 来访问设备的摄像头(包括前置摄像头). 以下是使用 MediaDevices.getUserMedia() 来获 ...
【Android RTMP】NV21 图像旋转处理 ( 图像旋转算法 | 后置摄像头顺时针旋转 90 度 | 前置摄像头顺时针旋转 90 度 )
文章目录安卓直播推流专栏博客总结一. 后置摄像头顺时针旋转 90 度二. 前置摄像头顺时针旋转 90 度三. NV21 格式图像旋转代码安卓直播推流专栏博客总结 Android RTMP 直 ...

H5移动端前置摄像头成像方向错误，横屏方向错误

前言

方案：

具体操作

延伸

H5移动端前置摄像头成像方向错误，横屏方向错误相关推荐

最新文章

热门文章