<!-- html文件内容 -->
<!-- 这里可以加入别的图层 -->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>




/* js文件 */
var video = document.getElementById('video');

// 获取camera
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true
}).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
    });
}

// 截图拍照
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// 拍照
document.getElementById("snap").addEventListener("click", function()
{
    context.drawImage(video, 0, 0, 640, 480);
});
【 在 winyb (winyb) 的大作中提到: 】
: 类似这种效果,中间还有一个平衡杆..我需要用h5网页形式实现
--
修改:radarxc1 FROM 24.243.25.*
FROM 24.243.25.*