H5调用摄像头拍照（PC端）

634658443

BeX5_3.6版本

1.在页面放两个div，xid为div1和div2，切换到源码在div1中放video标签，在div2中放canvas标签。 <div xid="div1">
        <video id="video" width="600px" height="380px" autoplay="autoplay"/>
</div>  
<div xid="div2" style="margin-top:15px;">
        <canvas id="canvas" width="500px" height="400px"/>
</div>



2.在onLoad事件获取video设置监听。
Model.prototype.modelLoad = function(event) {
                //获取video
                var video = document.getElementById("video"), videoObj = {
                        "video" : true
                }, errBack = function(error) {
                        console.log("Video capture error: ", error.code);
                };
                // 设置video监听器
                navigator.webkitGetUserMedia(videoObj, function(stream) {
                        video.src = window.webkitURL.createObjectURL(stream);
                        video.play();
                }, errBack);
        };


3.在页面放置一个按钮，在按钮事件中调用拍照在canvas中显示。
Model.prototype.button1Click = function(event) {
                //获取元素并绘画摄像截图到画布
                var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"),video = document.getElementById("video");
                context.drawImage(video, 0, 0, 640, 480);
                var data = canvas.toDataURL('image/png');//画布中显示，获取的图片是base64
                //image组件显示
                //this.getElementByXid("image1").src = data;
        };

allenjiao

H5的APP怎么实现这个功能呢？

绯叶

你的video标签怎么托上去的  我的工具箱里没有这个标签

634658443

切换到源码写就好了。

youmi

634658443 发表于 2017-4-17 09:29
切换到源码写就好了。

pc端可以用，用手机浏览器访问就不行，