HTML5之JS简单调用多媒体设备(摄像头、麦克风等)，实现拍照

在js中调用多媒体设备很简单，在这里碎碎念一下，前面是乱七八糟看API学习的内容，后面有代码。在博客上找的不少都已过时，没有更新，如果这篇的内容不能用了还请朋友们提醒一下。。

经测试Chrome和Firefox都支持调用。

在MDN（MDN web docs）中，记载了相关技术的API，既然要使用摄像头、麦克风之类的东西，那很容易想到多媒体的东西啦，也就是Media。在MDN中经过一番的搜索发现一个让我眼睛发光的东西:

这名字不用说了，多媒体设备，八成就是想要的，点进去看方法，发现:

点开之后全是英文，真是让我这英语渣渣头疼。不过既然是简单调用，那现在就不用深入研究了，在页面里找到了两个官方实例，如下:

上面异步函数实现的，有兴趣的朋友可以试试，这里用下面简单的调用；

代码中getUserMedia()函数参数constraints指定请求的媒体类型，在函数页面的Syntax部分是这么介绍的:

constraints是一个MediaStreamConstraints对象，用于指定要请求的媒体类型，以及请求的参数。

constraints 包含了video和audio两个成员，用于说明请求的媒体类型。必须指定一个或两个同时指定。如果浏览器无法找到指定的媒体类型，那么返回的Promise对象将作为NotFoundError异常回调函数的参数。

constraints 说白了就是要调用的设备类型，是麦克风Audio还是摄像头Video，并且没有找到抛出异常时进入catch函数。

为了现实效果，我们的页面需要一个video标签，一个按钮(调用拍照事件)，一个canvas标签显示拍到的图片，简单实现的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用摄像头</title>
</head>
<body>
<video id="video" autoplay="" style='width:640px;height:480px' controls></video>
<div>
    <button id='picture' style="width: 100%;">抓拍</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
    let video = document.getElementById("video");
    let context = canvas.getContext("2d");
    navigator.mediaDevices.getUserMedia(
        {
            video: true,
            audio: true
        }).then(stream => {
            video.srcObject = stream;
            video.play();
        }).catch(reason => {
            console.log(reason)
    });
    document.getElementById("picture").addEventListener("click", function () {
        context.drawImage(video, 0, 0, 640, 480);
    });
</script>
</body>
</html>

关于canvas的使用就不多描述了，在MDN中也有相关技术的记载。

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_40877427/article/details/90107563
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 00:29:39
阅读 ( 1362 )
分类：前端

HTML5之JS简单调用多媒体设备(摄像头、麦克风等)，实现拍照

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看