前端实践之调用手机摄像头

您所在的位置:网站首页 网站可以使用摄像头吗 前端实践之调用手机摄像头

前端实践之调用手机摄像头

2024-06-26 21:02| 来源: 网络整理| 查看: 265

// 头像相机

       moveToCameraAVG() {

           var self = this;

           if (navigator.mediaDevices === undefined) {

               navigator.mediaDevices = {};

           }

           if (navigator.mediaDevices.getUserMedia === undefined) {

               navigator.mediaDevices.getUserMedia = function (constraints) {

                   var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

                   if (!getUserMedia) {

                       return Promise.reject(new Error('getUserMedia is not implemented in this browser'));

                   }

                   return new Promise(function (resolve, reject) {

                       getUserMedia.call(navigator, constraints, resolve, reject);

                   });

               }

           }

           if (window.stream) {

               window.stream.getTracks().forEach(track => {

                   track.stop();

               });

           }

           var constraints = window.constraints = {

               audio: false,

               video: {

                   sourceId: 'default',

                   facingMode:  { exact: "user" }

               }

             };

           navigator.mediaDevices.getUserMedia(constraints)

               .then(function (stream) {

                   var video = document.getElementById('video');

                   try {

                       window.stream = stream;

                       video.srcObject = stream;

                   } catch (error) {

                       video.src = window.URL.createObjectURL(stream);

                   }

                   self.localMediaStream = stream;

                   video.play();

               })

               .catch(function (err) {

                   alert(err.name + ": " + err.message);

               });

       },

       //停止摄像机

       stopCapture: function () {

           var video = document.getElementById('video');

           if (!video.srcObject) return

           let stream = video.srcObject

           let tracks = stream.getTracks();

           tracks.forEach(track => {

               track.stop()

           })

       },

       // 头像照片

       captureAvg() {

           var vm = this;

           var video = document.getElementById('video');

           var canvas = document.getElementById('canvas'),

               ctx = canvas.getContext('2d'),

               CHeight = video.clientHeight, //获取屏幕大小让canvas自适应

               CWidth = video.clientWidth;

           canvas.width = CWidth;

           canvas.height = CHeight;

           if (vm.localMediaStream) {

               ctx.drawImage(video, 0, 0, CWidth, CHeight);

               var dataURL = canvas.toDataURL('image/jpeg'); //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA'

               vm.imginfo = dataURL;

               // 停止摄像机

               video.pause();

               this.stopCapture();

           }

       },



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3