HTML5使用 getUserMedia方法调用本地摄像头拍照

最新推荐文章于 2024-05-09 20:51:28 发布

_我就是愛自由

最新推荐文章于 2024-05-09 20:51:28 发布

阅读量9.5k

点赞数

分类专栏： javascript 文章标签： html5 摄像头 javascript

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 调用本地摄像头</title>
</head>
<body>
<video id="video" autoplay="autoplay" style='width:640px;height:480px'></video>
<button id='picture'>PICTURE</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
    var video = document.getElementById("video");
    var context = canvas.getContext("2d");
    var errocb = function (code) {
        console.log(code);
    };
    if (navigator.getUserMedia) { // 标准的API
        navigator.getUserMedia({ "video": true }, function (stream) {
            video.src = stream;
            video.play();
        }, errocb);
    } else if (navigator.webkitGetUserMedia) { // WebKit 核心的API

        console.log(navigator.webkitGetUserMedia);
        navigator.webkitGetUserMedia({ "video": true }, function (stream) {

            video.src = window.webkitURL.createObjectURL(stream);
            video.play();
        }, errocb);

    }
//    将拍好的照片显示在画布上
    document.getElementById("picture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 640, 480);
    });
</script>
</body>
</html>

_我就是愛自由

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
HTML5使用 getUserMedia方法调用本地摄像头拍照

html>html lang="en">head> meta charset="UTF-8"> title>html5 调用本地摄像头title>head>body>video id="video" autoplay="autoplay" style='width:640px;height:480px'>video>button id='picture'>PICTURE
复制链接

扫一扫