html中简单调用摄像头和话筒

最新推荐文章于 2024-07-01 10:22:50 发布

jacksonary

最新推荐文章于 2024-07-01 10:22:50 发布

阅读量3k

点赞数

分类专栏：前端文章标签： java web 摄像头

本站已迁移至：https://jacksonary.github.io

本文链接：https://blog.csdn.net/jacksonary/article/details/73656501

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头调用</title>
</head>
<body>
<div id="contentHolder">
    <video id="video" width="320" height="320" autoplay></video>
    <button id="picture" style="display:block" >拍照</button>
    <canvas style="display:block" id="canvas" width="320" height="320"></canvas>
    <button id="sc" style="display:block" >上传</button>
</div>
<script>
    navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia;
    if (navigator.getUserMedia) {
        navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
                function(stream) {
                    var video = document.getElementById("video");
                    video.src = window.URL.createObjectURL(stream);
                    video.onloadedmetadata = function(e) {
                        console.log('nihao44eee4aaaaddda');
                        video.play();
                    };
                },
                function(err) {
                    console.log("The following error occurred: " + err.name);
                }
        );
    } else {
        console.log("getUserMedia not supported");
    }
    var context = document.getElementById("canvas").getContext("2d");
    document.getElementById("picture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 320, 320);
    });
    document.getElementById("sc").addEventListener("click", function () {
        var imgData=document.getElementById("canvas").toDataURL("image/png");
        var data=imgData.substr(22);
        $.post('recorder/target/sc',{'sj':data});
    });
</script>
</body>
</html>

jacksonary

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
html中简单调用摄像头和话筒

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>GetUserMedia实例</title> </head> <body> <video id="video" autoplay><ideo> </body> <script type="text/javascript"
复制链接

扫一扫

专栏目录