H5调用摄像头拍照

Posted huangtonghui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了H5调用摄像头拍照相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>摄像头拍照</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <video id=‘video‘></video>
    <canvas id="canvas"></canvas>
    <img id="image">
</head>
<body>
       
<script>
    var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    if (getUserMedia) {
        navigator.getUserMedia({ audio: true, video: { width: 90, height: 120 } },
            function(stream) {
                var video = document.querySelector(‘video‘);
                video.src = window.URL.createObjectURL(stream);
                video.onloadedmetadata = function(e) {
                video.play();
                };
            },
            function(err) {
                console.log(err);
            }
        );
    }
    document.getElementById(‘video‘).onclick = function(){
        var canvas = document.getElementById("canvas");              
        var context = canvas.getContext("2d");              
        var video = document.getElementById("video");
        context.drawImage(video, 0, 0, 90, 120);
        document.getElementById(‘image‘).src = canvas.toDataURL("image/png"); 
    }
</script>
</body>
</html>

　　

以上是关于H5调用摄像头拍照的主要内容，如果未能解决你的问题，请参考以下文章

H5调用摄像头拍照

h5调用手机前后摄像头，拍照

H5实现调用本地摄像头实现实时视频以及拍照功能

怎么用html5或js调用手机的摄像头拍照上传以及调用手机相册选取照片

怎么用html5或js调用手机的摄像头拍照上传以及调用

如何调用h5的相机