js 调用摄像头实现拍照

2024-01-21 17:25:16

调用摄像头

核心方法 Window.navigator.mediaDevices.getUserMedia()

Window.navigator 会返回一个 Navigator 对象的引用，可以用于请求运行当前代码的应用程序的相关信息。
navigator.mediaDevices该对象提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。
getUserMedia(constraints) 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道、一个音频轨道，也可能是其它轨道类型。
navigator 详细说明 MDN-navigator
mediaDevices 详细说明 MDN-mediaDevices
getUserMedia 详细说明MDN-getUserMedia

let constraints={
  audio: false, //音频轨道
  video: true  //视频轨道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise..then(function(stream) {
  /* 使用这个stream stream */
})
.catch(function(err) {
  /* 处理error */
});

界面展示摄像头录制的信息，界面中需要添加 video标签，将获取到的 stream 赋值到 video 中；

let constraints={
  audio: true, //音频轨道
  video: true  //视频轨道
};
let srcVideo=document.querySelector('video.src-video');
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise..then(function(stream) {
  /* 使用这个stream stream */
  srcVideo.srcObject=stream;
  srcVideo.play();
})
.catch(function(err) {
  /* 处理error */
});

拍照

拍照实现逻辑

获取 srcVideo元素，获取需要拍照的数据；

获取 canvas元素，根据srcVideo中的数据进行图片绘制 ctx.drawImage()；

将 canvas绘制的图片信息，展示在 img标签中；

// 获取 `srcVideo`元素，获取需要拍照的数据；
let srcVideo=document.querySelector('video.src-video');
let canvas = document.getElementById('canvas');
//获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 500, 500);
//将 `canvas`绘制的图片信息，展示在 `img`标签中；
let photo=document.querySelector('img.photo');
photo.src=canvas.toDataURL();

拍照完整代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拍照</title>
</head>

<body>
    <button onclick="openMedia()" >开启摄像头</button>
    <button onclick="takePhoto()" >拍照</button><br/><br/>
    <video style="display: none;" class="src-video" width="500px" height="500px" autoplay="autoplay"></video>
    <canvas id="canvas" width="500px" height="500px" style="display: none;"></canvas>
    <img src="" alt="" class="photo">
</body>
<script>
    let srcVideo = document.querySelector('video.src-video');
    let mediaStream;
    let photo=document.querySelector('img.photo');
    // 开启摄像头
    let openMedia = function () {
        photo.src='';
        srcVideo.style.display='block';
        let constraints = {
            audio: false, //音频轨道
            video: {width:500,height:500}  //视频轨道
        }
        let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
        mediaPromise.then(function (stream) {
            /* 使用这个stream stream */
            mediaStream=stream;
            srcVideo.srcObject = stream;
            srcVideo.play();
        }).catch(function (err) {
            /* 处理error */
            alert(err);
        });
    };

    // 拍照
    let takePhoto=function(){
        let canvas = document.querySelector('#canvas');
        //获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
        let ctx = canvas.getContext('2d');
        ctx.drawImage(srcVideo, 0, 0, 500, 500);
        //将 `canvas`绘制的图片信息，展示在 `img`标签中；
        photo.src=canvas.toDataURL();
        closeMedia();
    };

    // 关闭摄像头
    let closeMedia=function(){
        mediaStream.getTracks().forEach(track => {
            track.stop();
        });
        srcVideo.style.display='none';
    }

</script>
</html>

码农公寓

调用摄像头

拍照

拍照完整代码

相关文章