一、默认进入页面后直接加载并调用摄像头
//调用摄像头的方法
function takePhoto() {
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({
video: {
width: 100,
height: 100,
facingMode: environment //设置使用后置摄像头,user为前置摄像头
}
}, success, error);
$("#showImg").hide();//隐藏拍照结果显示框
$("#video").show();//开启拍照框
} else {
alert('不支持访问用户媒体');
}
}
//直接调用方法,实现页面加载完就自动打开摄像头
takePhoto();
二、切换摄像头(前置、后置)
//设置一个按钮,并编写事件方法,触发切换摄像头操作
<label title="切换摄像头" class="btn btn-danger" id='takeAgain'>切换摄像头</label>
//切换摄像头的方法(重点:首先声明一个变量,存储摄像头前置、后置参数,再用一个三目运算方法来交换前置、后置参数,最后通过绑定事件来执行这个交换的操作,这样摄像头切换就基本完成了。)
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
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 mediaStreamTrack;
//默认后置摄像头
var mode = 'environment';
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
mediaStreamTrack = stream.getTracks()[0];
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
alert('访问用户媒体设备失败,请尝试更换浏览器')
}
document.getElementById('capture').addEventListener('click', function () {
context.drawImage(video, 0, 0, 300, 300);
mediaStreamTrack && mediaStreamTrack.stop();
$('#tailoringImg').cropper('replace', canvas.toDataURL("image/png"), false);//默认false,适应高度,不失真
$("#video").hide();//隐藏拍照框
$("#showImg").show()//将拍照结果显示
})
//请求切换前后置摄像头
$("#takeAgain").bind("click", function () {
changeMode();
});
// 切换摄像头
function changeMode() {
mode = mode === 'user' ? 'environment' : 'user';
mediaStreamTrack.stop();
takePhoto();
}
//请求摄像头
function takePhoto() {
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({
video: {
width: 100,
height: 100,
facingMode: mode //设置使用后置摄像头,user为前置摄像头
}
}, success, error);
$("#showImg").hide();//隐藏拍照结果显示框
$("#video").show();//开启拍照框
} else {
alert('不支持访问用户媒体');
}
}
//直接调用方法,实现页面加载完就自动打开摄像头
takePhoto();