angular 笔记 之 页面调用摄像头拍照

直接上代码:
html:

ts:

avatarUrl;
mediaStream: MediaStream;
/**打开摄像头 */getUserMedia() {// 选择最接近360x540的分辨率var constraints = { video: { width: 360, height: 540 } };navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {this.mediaStream = mediaStream;/* var video = document.querySelector('video'); */var video: any = document.getElementById('video');video.srcObject = this.mediaStream;video.onloadedmetadata = function(e) {video.play();};}).catch(function(err) {console.log(err.name + ': ' + err.message);}); // 最后一定要检查错误。}/**关闭摄像头 */closeCamera() {this.mediaStream.getTracks().forEach(track => track.stop());}/**照相 */takepicture() {var canvas = document.querySelector('canvas');var video = document.querySelector('video');var context = canvas.getContext('2d');canvas.width = 360;canvas.height = 540;/*** 在画布上定位图像，并规定图像的宽度和高度* 参数1:图像来源* 参数2: 在画布上放置图像的 x 坐标位置。* 参数3: 在画布上放置图像的 y 坐标位置。* 参数4: 图像的宽* 参数5: 图像的高*/context.drawImage(video, 0, 0, 360, 540);// data就是拍出照片的base64var data = canvas.toDataURL('image/png');this.avatarUrl = data;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！