vue&h5获取手机前置摄像头（安卓&ios），input capture属性和navigator.mediaDevices
解决安调用前置摄像头无效，以及 navigator.mediaDevices使用注意事项
·
调用前置摄像头 capture="user" 调用后置摄像头capture="environment"或其他只适用于ios
根据官网解释
iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。
官方文档：www.w3.org/TR/2018/REC-html-media-capture-20180201/
对于安卓,亲测capture="user"效果是，第一次打开前置摄像无效，默认还是后置，需要你在第一次打开相机后手动翻转摄像头，后面再打开才会默认前置
<input
class="file"
id="uploadFile"
type="file"
name="image"
accept="image/*"//accept="audio/*"录音"video/*"视频时capture只有两种值，
//一种是user 一种是environment
capture="user"
/>对于安卓用navigator.mediaDevices的getUserMedia
注：！！！必须在https环境下navigator.mediaDevices才生效，在本地调试http环境navigator.mediaDevices为undefined
API文档：MediaDevices.getUserMedia() - Web API 接口参考 | MDN
基础使用（自行封装成方法或放在生命周期，如：vue mounted里可看效果）
// var constraints={audio: true, video{ width: 1280, height: 720 }}
var constraints={audio: true, video:true}//audio:true&false打开&关闭音频 video:true&false打开&关闭视频
// video{ width: 1280, height: 720 }设置1280x720的摄像头分辨率，不需要再设置video:true，设置分辨率时默认true
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
/* 使用这个 stream stream */
var video = document.querySelector("video");//自行创建id="video"的video标签作为相机容器
video.srcObject = mediaStream;
video.onloadedmetadata = function (e) {
// video.play();打开播放
};
})
.catch(function(err) {
/* 处理 error */
});vue前置拍照功能实现（复制可用，亲测有效）
<template>
<div class="publish">
<video ref="video"></video>
<canvas style="display: none" id="canvasCamera"></canvas>
<div v-if="imgSrc" class="img_bg_camera">
<img :src="imgSrc" class="tx_img" />
</div>
<button @click="OpenCamera">打开摄像头</button>
<button @click="CloseCamera">关闭摄像头</button>
<button @click="setImage">拍照</button>
</div>
</template>
<script>
export default {
data() {
return {
mediaStreamTrack: {},
video_stream: "", // 视频stream
imgSrc: "", // 拍照图片
canvas: null,
context: null,
};
},
mounted() {
// 进入页面 自动调用摄像头
this.getCamera();
},
methods: {
// 调用打开摄像头功能
getCamera() {
// 获取 canvas 画布
this.canvas = document.getElementById("canvasCamera");
this.context = this.canvas.getContext("2d");
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
// 正常支持版本
navigator.mediaDevices
.getUserMedia({
video: true,
audio: false,
})
.then((stream) => {
// 摄像头开启成功
this.mediaStreamTrack =
typeof stream.stop === "function" ? stream : stream.getTracks()[0];
this.video_stream = stream;
this.$refs.video.srcObject = stream;
this.$refs.video.play();
})
.catch((err) => {
console.log(err);
});
},
// 拍照 绘制图片
setImage() {
// 点击canvas画图
this.context.drawImage(this.$refs.video, 0, 0, 200, 100);
console.log("拍照", this.context.drawImage);
// 获取图片base64链接 canvas
this.canvas = document.getElementById("canvasCamera");
this.canvas.style.display = "block";
console.log(this.canvas, "拍照 image ", this.canvas.style);
const image = this.cancas.toDataURL("image/png");
this.imgSrc = image;
console.log(this.imgSrc, "拍照 image ", image);
// this.$emit("refreshDataList", this.imgSrc);
},
// 打开摄像头
OpenCamera() {
console.log("打开摄像头");
this.getCamera();
},
// 关闭摄像头
CloseCamera() {
console.log("关闭摄像头");
this.$refs.video.srcObject.getTracks()[0].stop();
},
},
};
</script>
<style scoped>
video {
width: 100%;
height: 300px;
}
canvas {
width: 100%;
height: 300px;
}
button {
width: 100px;
height: 40px;
position: relative;
bottom: 0;
left: 0;
background-color: rgb(22, 204, 195);
}
.img_bg_camera img {
width: 300px;
height: 200px;
}
</style>
h5拍照（无亲测）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>摄像头拍照</title>
</head>
<body onload='init()'>
<video id="video">
</video>
<div id='operators'>
<button id="capture">拍照</button> <button id="changeCamera">切换摄像头</button>
</div>
<canvas id="canvas" width="480" height="320"></canvas>
<script>
var cameraFront="";
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
currentCamera=constraints;
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.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) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');
//视频流变量
var localMediaStream;
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
localMediaStream=stream;
}
function error(error) {
alert(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头 video和audio： {video : {width: 480, height: 320}} 使用前置摄像头, 代码如下: {video: {facingMode: 'user'}} 后置摄像头, 代码如下: {video: {facingMode: {exact : 'environment'}}}
getUserMedia({audio: true,video: {facingMode: {exact : 'environment'}}}, success, error);
} else {
alert('不支持访问用户媒体');
}
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 480, 320);
})
//当前摄像头
var currentCamera;
document.getElementById('changeCamera').addEventListener('click', function () {
//关闭打开的摄像头
localMediaStream.getTracks().forEach(function(track) {
track.stop();
});
if(currentCamera.video.facingMode=='user')
{
getUserMedia({audio: true,video: {facingMode: {exact : 'environment'}}}, success, error);
}else{
getUserMedia({audio: true,video: {facingMode: 'user'}}, success, error);
}
})
function init(){
document.getElementById('operators').style.width=document.getElementById('video').style.width;
document.getElementById('operators').style.textAlign="center";
}
</script>
</body>
</html>
vue视频录制（无亲测）
<template>
<div class="publish">
<!-- 下载按钮 -->
<a id="downLoadLink" style="display: none;"></a>
<video ref="video"></video>
<!-- 视频录制或暂停 -->
<div @click="recordOrStop">视频录制</div>
</div>
</template>
<script>
export default {
data() {
return {
mediaStreamTrack: {}, // 退出时关闭摄像头
video_stream: '', // 视频stream
recordedBlobs: [], // 视频音频 blobs
isRecord: false, // 视频是否正在录制
};
},
mounted() {
// 进入页面 调用摄像头
this.getCamera();
},
methods: {
// 调用打开摄像头功能
getCamera() {
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
if (navigator.mediaDevices === undefined) {
navigator.mediaDevices = {};
}
navigator.mediaDevices
.getUserMedia({
video: true,
})
.then((stream) => {
// 摄像头开启成功
this.mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[0];
this.video_stream = stream;
this.$refs.video.srcObject = stream;
this.$refs.video.play();
})
.catch(err => {
console.log(err);
});
},
// 录制或暂停
recordOrStop() {
if (this.isRecord) {
this.stop();
} else {
this.record();
}
},
// 视频录制
record() {
console.log('record');
this.isRecord = !this.isRecord;
let mediaRecorder;
let options;
this.recordedBlobs = [];
if (typeof MediaRecorder.isTypeSupported === 'function') {
// 根据浏览器来设置编码参数
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
options = {
MimeType: 'video/webm;codecs=h264',
};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) {
options = {
MimeType: 'video/webm;codecs=h264',
};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
options = {
MimeType: 'video/webm;codecs=vp8',
};
}
mediaRecorder = new MediaRecorder(this.video_stream, options);
} else {
// console.log('isTypeSupported is not supported, using default codecs for browser');
console.log('当前不支持isTypeSupported，使用浏览器的默认编解码器');
mediaRecorder = new MediaRecorder(this.video_stream);
}
mediaRecorder.start();
// 视频录制监听事件
mediaRecorder.ondataavailable = e => {
console.log(e);
// 录制的视频数据有效
if (e.data && e.data.size > 0) {
this.recordedBlobs.push(e.data);
}
};
// 停止录像后增加下载视频功能，将视频流转为mp4格式
mediaRecorder.onstop = () => {
const blob = new Blob(this.recordedBlobs, { type: 'video/mp4' });
this.recordedBlobs = [];
// 将视频链接转换完可以用于在浏览器上预览的本地视频
const videoUrl = window.URL.createObjectURL(blob);
// 设置下载链接
document.getElementById('downLoadLink').href = videoUrl;
// 设置下载mp4格式视频
document.getElementById('downLoadLink').download = 'media.mp4';
document.getElementById('downLoadLink').innerHTML = 'DownLoad video file';
// 生成随机数字
const rand = Math.floor((Math.random() * 1000000));
// 生成视频名
const name = `video${rand}.mp4`;
// setAttribute() 方法添加指定的属性，并为其赋指定的值
document.getElementById('downLoadLink').setAttribute('download', name);
document.getElementById('downLoadLink').setAttribute('name', name);
// 0.5s后自动下载视频
setTimeout(() => {
document.getElementById('downLoadLink').click();
}, 500);
};
},
// 停止录制
stop() {
this.isRecord = !this.isRecord;
if (!this.$refs.video.srcObject) return;
const stream = this.$refs.video.srcObject;
const tracks = stream.getTracks();
// 关闭摄像头和音频
tracks.forEach(track => {
track.stop();
});
},
},
};
</script>
<style lang="less" scoped>
.publish {
color: #fff;
video {
width: 100%;
height: 100vh;
}
div {
position: absolute;
left: calc(50% - 80px);
bottom: 0;
height: 40px;
width: 160px;
font-size: 14px;
border-radius: 10px;
line-height: 40px;
background-color: rgb(25, 179, 179);
text-align: center;
}
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)