ionic4 调用webApi 打开手机摄像头以及利用canvas截图

初始化摄像头 调用navigator.mediaDevices.getUserMedia

initMedia() {
window.URL = (window.URL || window.webkitURL || window.mozURL || window.msURL);
if (navigator.mediaDevices === undefined) {
    navigator.mediaDevices = {};
}
if (navigator.mediaDevices.getUserMedia === undefined) {
    navigator.mediaDevices.getUserMedia = function(constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
        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);
        });
    }
}
 // 配置设置
var mediaOpts = {
    audio: false,
    video: true,
    // video: { width: 1280, height: 720 }
    // video: { facingMode: "environment"}, // 或者 "user"
}
// 成功回调
var that = this;
function successFunc(stream) {
    that.mediaStreamTrack = stream.getTracks()[0];
    that.video = document.getElementById('videos')
    if ("srcObject" in that.video) {
      that.video.srcObject = stream
        // that.video.setAttribute('srcObject',stream)
    } else {
      that.video.src = window.URL && window.URL.createObjectURL(stream) || stream
        // that.video.setAttribute('src',window.URL && window.URL.createObjectURL(stream) || stream)
    }
    that.video.play();
}
function errorFunc(err) {
    console.log(err)
}
// 正式启动摄像头  navigator.mediaDevices.getUserMedia(mediaOpts).then(successFunc).catch(errorFunc);
}
//关闭摄像头
close(){
   this.mediaStreamTrack.stop()
}
//调用canvas进行截图
//canvas 截取图片
captureImg() {
// 取到 canvas
this.canvas = document.getElementById('myCanvas');
// 获取 canvas 上下文
let ctx = this.canvas.getContext('2d');
// 截图
let w = this.video.videoWidth;
let h = this.video.videoHeight;
this.canvas.width = w;
this.canvas.height = h;
ctx.drawImage(this.video, 0, 0, w, h)；
// 将截图转换成 base64
this.image = this.canvas.toDataURL('image/png')；
// 只保留 base64 部分
let base64Str = this.image.split('base64,')[1]；
return base64Str；
}

html代码

<video id="videos" src="" autoplay="true" width="500" height="400"></video>
<canvas id="myCanvas" ></canvas>

参考链接：https://foreverz133.github.io/demos/single/getUserMedia2.html