js调用摄像头并截图

最新推荐文章于 2025-06-10 13:59:06 发布

Lawrence666

最新推荐文章于 2025-06-10 13:59:06 发布

阅读量2.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_31261131/article/details/81170669

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
</head>
 
<body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    <h2>按钮模拟拍照</h2>
</body>
<script type="text/javascript">
     var aVideo = document.getElementById('video');
    var aCanvas = document.getElementById('canvas');
    var ctx = aCanvas.getContext('2d');
 
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia; //获取媒体对象（这里指摄像头）
    navigator.getUserMedia({
        video: true
    }, gotStream, noStream); //参数1获取用户打开权限；参数二是一个回调函数，自动传入视屏流，成功后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
 
    function gotStream(stream) {
  
       // vid