记录H5中使用手机端摄像头拍照存储Base64格式图片

标签：function Base64 H5 getElementById let video document 摄像头 mediaStream

前面把openssl配置好了，现在在手机端就可以输入https://ip:port访问我的应用客户端了，今天在测试的过程中发现一些问题。

问题一：手机端点开后发现是前置摄像头。

需要加个video的配置项，facingMode:{exact:"environment"}  这个加了之后，在pc端打开摄像头就会报错，暂时只能在手机上调测了。

 

问题二：Android手机页面展现跟PC端一样，但是IOS的镜头一打开铺满屏幕

在html的video标签中添加属性playsinline="true"，这样镜头就在它该待的小框里了，

 

问题三：兼容问题

参考了网上的H5通过navigator.mediaDevices.getUserMedia调用手机摄像头_苹果无法调用摄像头 navigator.mediadevices-CSDN博客

想了一下，我的应用不商用，纯友情开发，并且只给固定的几个人用，还是不搞兼容了，等他们发现不兼容再来找我吧！！！

记录四 canvas画出图片的存储

canvas.draw后转为了Base64格式，赋值给<img>标签的src属性，在ajax 做post提交时再转为jsonArray传递出去。

 在服务器中，接收图片的jsonarray数据，将base64转为图片文件存在本地文件夹。 将路径地址存储到数据库表字段里。

 Base64与图片的格式互转，可以在网上搜一下，很多现成的例子，我这边用的是

<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.15</version>
</dependency> apache的包， import org.apache.commons.codec.binary.Base64;  

代码参考：

html

 <div class="popup">
                            <p class="popup_title">
                                <em id="curPage" style="display: none"></em>
                                <em id="curCleanId" style="display: none"></em>
                                请上传卫生检查不通过图片
                            </p>
                            <div class="popup_content">
                                <div>
                                    <video id="video" class="canvas" playsinline="true" autoplay="autoplay"></video>
                                    <canvas id="canvas" class="canvas"></canvas>
                                </div>
                            </div>
                            <div>
                                <img onclick="takePhoto()" style="height: 30px;width: 30px;float: left" src="takepic.png" >
                                 <div id="picDisplayDiv">
                                 </div>
                                <button style="float: right;" onclick="hidePhotoPopup(1)">上传</button>
                                <button style="float: right;" onclick="hidePhotoPopup(0)">取消</button>
                            </div>
                        </div>

　　js

function openMedia(){
    let constraints = {
        video: { width: 120, height: 150, facingMode: { exact: "environment" } },
        audio: false
    };
    //获得video摄像头
    let video = document.getElementById('video');
    let promise = navigator.mediaDevices.getUserMedia(constraints);
    promise.then((mediaStream) => {
        // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
        mediaStreamTrack=mediaStream.getVideoTracks()
        video.srcObject = mediaStream;
        video.play();
    });
}
function takePhoto(){
    let picArray=document.getElementById("picDisplayDiv").getElementsByTagName("img");
    if(picArray.length>=3){
        alert("当前仅支持上传3张图片");
        return;
    }
    let video = document.getElementById('video');
    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    ctx.drawImage(video, 0, 0, 80, 50);

    
    let img = document.getElementById('canvas').toDataURL();

    $("#picDisplayDiv").append("<img style=\"height: 80px;width: 100px;float: left\"  src='"+img+"'>");
    ctx.clearRect(0, 0, 80, 50);
}
function hidePhotoPopup(operation){
    if(operation==1)//上传
    {
        queryUsageList($("#curPage").val(),"addFailCheckInfo",$("#curCleanId").val());
    }
    closeMedia();
    let picDisplayDiv=document.getElementById("picDisplayDiv");
    picDisplayDiv.innerHTML="";
    document.getElementById('video').srcObject = null;
    $("#takePic").hide();
}
function closeMedia() {
    let stream = document.getElementById('video').srcObject;
    if (stream != null) {
        let tracks = stream.getTracks();
        tracks.forEach(function (track) {
            track.stop();
        });
    }
}

 

标签：function,Base64,H5,getElementById,let,video,document,摄像头,mediaStream
From： https://www.cnblogs.com/wolf-python-lily/p/17945122