pc端调起电脑的摄像头进行拍照功能

一人一花

已于 2024-03-10 17:45:45 修改

阅读量7.1k

点赞数

CC 4.0 BY-SA版权

文章标签： html javascript 摄像头前端

于 2019-03-12 16:38:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35500233/article/details/88423655

本文介绍如何在PC端利用HTML5和JavaScript调用电脑摄像头进行拍照。当存在多个摄像头时，用户可以选择使用哪一个。代码示例包括HTML和JavaScript部分，需要引入相关文件。想要深入学习的读者可以参考相关详细教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的需求是在电脑端调起电脑上面的摄像头，有可能是电脑自带的摄像头也可能是插入的USB摄像头
下面这个是如果用户有两个摄像头的话，会将这两个摄像头都列出来，用户可以自己选择使用哪个摄像头。
下面是html代码

<div id="container">
<div class="select">
<label for="audioSource">Audio source: </label><select id="audioSource"></select>
</div>

<div class="select">
<label for="videoSource">Video source: </label><select id="videoSource"></select>
</div>

</div>
<div id="promoNode"></div>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

下面是javascript代码

//调用摄像头
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var mediaConfig = { video: true };
        var errBack = functio