vueh5获取手机前置摄像头（安卓ios），input capture属性和navigator.mediaDevices

调用前置摄像头 capture="user" 调用后置摄像头capture="environment"或其他只适用于ios

根据官网解释

iOS最遵守遵守HTML5规范，其次是X5内核，安卓的webview基本忽略了capture。

官方文档：www.w3.org/TR/2018/REC-html-media-capture-20180201/

对于安卓,亲测capture="user"效果是，第一次打开前置摄像无效，默认还是后置，需要你在第一次打开相机后手动翻转摄像头，后面再打开才会默认前置

 <inputclass="file"id="uploadFile"type="file"name="image"accept="image/*"//accept="audio/*"录音"video/*"视频时capture只有两种值，
//一种是user 一种是environmentcapture="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前置拍照功能实现（复制可用，亲测有效）

参考博客：Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能_八了个戒的博客-CSDN博客_navigator.mediadevices.getusermedia

<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: "", // 视频streamimgSrc: "", // 拍照图片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链接 canvasthis.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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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) {//最新的标准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');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: '', // 视频streamrecordedBlobs: [], // 视频音频 blobsisRecord: 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>

vueh5获取手机前置摄像头（安卓ios），input capture属性和navigator.mediaDevices相关推荐

vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
android 前置摄像头预览时镜像翻转_全面屏时代，原来手机前置摄像头都隐藏着一些缺点，你发现了吗？...
随着真全面屏时代的到来,人们已经不再满足于刘海屏.水滴屏以及挖孔屏等,越来越多的手机厂商和消费者开始追求"100%全面屏".于是如何解决手机前置摄像头便成了最大的难题,毕竟只要在屏 ...
swing的jlist的值怎么获取_彻底解决安卓/IOS获取蓝牙ID不一致的问题
不知道大家对低能蓝牙的技术应用了解的怎么样,其实这是一个比较广的应用,比如可以应用于一些信标.家庭娱乐或者医疗方面都有应用. 01 前言因为小程序官方是支持接入低能蓝牙(BLE)的,所以在一个项目 ...
uniapp和vue实现打开手机前置摄像头和相机的方法
最近在项目遇到了一个问题,用uniapp的框架做一个功能,就是打开平板自带的前置摄像头拍照,uniapp上的功能只有打开默认相机的功能,但是前置摄像头需要你自己去手动转换一下,客户体验感很不好,产品经 ...
HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试
为什么80%的码农都做不了架构师?>>> 但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的A ...
html5 android6.0摄像头,HTML5调用手机前置摄像头或后置摄像头拍照，canvas显示,经过Android测试...
但是navigator.getUserMediau已经从 Web 标准中删除,虽然部分浏览器可以使用,生产环境中还是要做好兼容.新的API更替为MediaDevices.getUserMedia.Me ...
安卓手机小说阅读器_【手机软件】安卓+iOS双箭齐发，全网小说阅读神器，且iOS版已上架！无广告、免登陆、全免费！...
Hello,大家好,我是春哥!每天记得打卡哦!感谢每一位小伙伴们的关注和支持!免责声明大部分资源来源于网络,仅供学习和交流使用,如有侵权请联系我们删除. 每期文章末尾都会有关键词,在公众号发消息处回 ...
qrcode获取图片链接在安卓/ios上的问题
最近项目使用qrcode生成二维码,制作图片预览时出现了一个问题,在ios端使用 document.querySelector('img') 时没有问题,可以获取到图片及src,但是在Android端 ...
按键精灵手机版（安卓 ios）如何连接远程网络数据库比如 sql server, 进行读写操作云端自动化等
一.前情提要按键手机版直连的话现在只支持本地数据库sqllite,想连接远程数据库也不是没办法,但麻烦一点需要建立一个 "中转站" .姑且这么称呼,最形象. "中转 ...

vueh5获取手机前置摄像头（安卓ios），input capture属性和navigator.mediaDevices

vueh5获取手机前置摄像头（安卓ios），input capture属性和navigator.mediaDevices相关推荐

最新文章

热门文章