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

原创

已于 2024-03-10 17:45:45 修改 · 7.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #摄像头 #前端

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

本文介绍如何在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