• H5调用PC端摄像头上传图片


    前言:

      最近做了一个新功能,pc端调用摄像头上传图片。调用电脑摄像头,利用canvas画布将视频当前帧转换成图片,和大家分享一下。

      注意:该方法只适用于本地和 https 请求,http 会提示没有权限,否则会报错。

    直接上代码,可以直接拷贝使用。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>摄像头拍照</title>
    </head>
    
    <body>
        <video id="video" width="300" height="400" controls>
        </video>
        <canvas id="canvas" width="300" height="400"></canvas>
        <div>
            <button id="capture">拍照</button>
            <button id="close">关闭摄像头</button>
        </div>
        
        <script>
            let video = document.getElementById('video');
            let canvas = document.getElementById('canvas');
            let context = canvas.getContext('2d');
            var mediaStreamTrack;
    
            //访问用户媒体设备的兼容方法
            function getUserMedia(constraints, success, error) {
                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);
                }
            }
    
            function success(stream) {
                //兼容webkit核心浏览器
               let CompatibleURL = window.URL || window.webkitURL;
                //将视频流设置为video元素的源
                //video.src = CompatibleURL.createObjectURL(stream);
    
                // 播放
                video.srcObject = stream;
                video.play();
                mediaStreamTrack = stream
            }
    
            function error(error) {
                alert('调用摄像头失败')
            }
    
            if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
                getUserMedia({ video: {  300, height: 400 } }, success, error);
            } else {
                alert('不支持访问用户媒体');
            }
    
            // 拍照
            document.getElementById('capture').addEventListener('click', function () {
                context.drawImage(video, 0, 0, 300, 400);
                // photoSrc 就是拍照得到的base64的图片数据,将数据传递给后端就可以了
                var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
            
            // 以下就是调用接口将数据传递给后端,省略...
    })
    // 关闭摄像头 document.getElementById('close').addEventListener('click', function() { if (mediaStreamTrack) { mediaStreamTrack.getTracks()[0].stop(); } }); </script> </body> </html>

      

    <!doctype html>
    <html lang="en">
    
    <head>
        <title>拍照</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
        <video id="video" width="300px" height="400px" autoplay="autoplay"></video>
        <canvas id="canvas" width="300px" height="400px"></canvas>
        <button id="snap" onclick="takePhoto()">拍照</button>
        <script>
            //获得video摄像头区域
            let video = document.getElementById("video");
            function getMedia() {
                let constraints = {
                    video: {  500, height: 500 },
                    audio: true
                };
                /*
                这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
                这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
                返回的是一个Promise对象。
                如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
                如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
                */
                let promise = navigator.mediaDevices.getUserMedia(constraints);
                promise.then(function (MediaStream) {
                    video.srcObject = MediaStream;
                    video.play();
                }).catch(function (PermissionDeniedError) {
                    console.log(PermissionDeniedError);
                })
            }
            function takePhoto() {
                //获得Canvas对象
                let canvas = document.getElementById("canvas");
                let ctx = canvas.getContext('2d');
                ctx.drawImage(video, 0, 0, 500, 500);
                var photoSrc = document.getElementById("canvas").toDataURL("image/jpeg", 0.8);
                console.log(photoSrc, 12121)
            }
        </script>
    </body>
    
    </html>

      本地测试是没有问题的,由于我的项目是vue写的,其实写法都差不多,将写法装换一下。但是http下是没有用的,测试了很多方法,最终我妥协了,项目也改用了https的了。

    记录一下学习的新知识.......

  • 相关阅读:
    FreeCodeCamp:Chunky Monkey
    FreeCodeCamp:Slasher Flick
    FreeCodeCamp:Truncate a string
    FreeCodecamp:Repeat a string repeat a string
    FreeCodeCamp:Confirm the Ending
    FreeCodeCamp:Return Largest Numbers in Arrays
    FreeCodeCamp:Title Case a Sentence
    git和GItHub的区别
    dedecms简介
    html 7大知识点
  • 原文地址:https://www.cnblogs.com/0314dxj/p/13164026.html
走看看 - 开发者的网上家园