vue&h5获取手机前置摄像头（安卓&ios），input capture属性和navigator.mediaDevices |
您所在的位置：网站首页 › yogac740怎么打开前置摄像头 › vue&h5获取手机前置摄像头（安卓&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"效果是，第一次打开前置摄像无效，默认还是后置，需要你在第一次打开相机后手动翻转摄像头，后面再打开才会默认前置 对于安卓用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 打开摄像头 关闭摄像头 拍照 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(); }, }, }; 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; }h5拍照（无亲测） 摄像头拍照 拍照;;;;;切换摄像头 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"; }vue视频录制（无亲测） 视频录制 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(); }); }, }, }; .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; } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |