收藏
回答

如何获取摄像头数据

框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
小程序 需求 客户端 6.6.6 1.9.94

如题,如何获取摄像头数据?由于业务需要对摄像头的数据进行二次加工!小程序支持canvas吗?


回答关注问题邀请回答
收藏

4 个回答

  • RunningSnail
    RunningSnail
    2018-04-19

    wechatide://minicode/fm4ZmNmu6zYO


    h5界面源码:


    <!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="320" height="320" style="display: none">

    </video>

    <!-- <div>

           <button id="capture">拍照</button>

       </div> -->

    <canvas id="canvas" width="320" height="320"></canvas>

    <script>

    let count = 0;

    //访问用户媒体设备的兼容方法

    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);

    }

    }


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

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

    let context = canvas.getContext('2d');

    function success(stream) {

    video.srcObject = stream;

    video.play();

    draw()

    }

    function error(error) {

    alert(`访问用户媒体设备失败${error.name}, ${error.message}`);

    }

    window.addEventListener("DOMContentLoaded", function () {

    if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia ||

    navigator.mozGetUserMedia) {

    //调用用户媒体设备, 访问摄像头

    getUserMedia({

    video: {

    width: 480,

    height: 320

    }

    }, success, error);

    } else {

    alert('不支持访问用户媒体');

    }


    }, false);

    function draw(){

    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    context.font="50px microsoft yahei";

    context.strokeText("Hello",20,100);

    requestAnimationFrame(draw);

    }


    </script>

    </body>


    </html>


    2018-04-19
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-04-19

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题

    2018-04-19
    有用
    回复
  • RunningSnail
    RunningSnail
    2018-04-19

    额,canvas组件看到了。谢谢。那请问camera组件提供了获取到流数据的能力吗?经过测试,开启远程调试时,小米6手机访问小程序打开一个同时拥有video组件、canvas组件的界面时,canvas动画有些卡顿,请问是使用远程调试导致的,还是小程序性能的瓶颈呢?并且web-view打开一个能够调用摄像头数据,使用原生video标签解码,使用原生canvas绘制的h5,同样使用远程调试查看,发现canvas卡顿非常厉害(用手机浏览器直接打开这个h5非常流畅),请问是使用远程调试导致的,还是小程序性能的瓶颈呢?

    2018-04-19
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-04-18

    你好,小程序是支持canvas的,这是有关canvas的文档介绍canvas

    2018-04-18
    有用
    回复
登录 后发表内容