js调用摄像头拍照

最新推荐文章于 2024-06-07 11:32:43 发布

香煎三文鱼

最新推荐文章于 2024-06-07 11:32:43 发布

阅读量2k

点赞数 3

分类专栏： jQuery、js、css 文章标签： js调用摄像头拍照

本文链接：https://blog.csdn.net/qq_39569480/article/details/123232378

版权

jQuery、js、css 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

<!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="300px" height="300px" autoplay="autoplay"></video>
    <canvas id="canvas" width="300px" height="300px" 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:300,height:300}  //视频轨道
        }
        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, 300, 300);
        //将 `canvas`绘制的图片信息，展示在 `img`标签中；
        photo.src=canvas.toDataURL();
		console.log(photo.src); 
    // 方式1
    // base64转blob
    const blob = base64ToBlob(base64Data);
    // blob转file
    const file1 = blobToFile(blob, '文件名');

    // 方式2
    // base64转file
    const file2 = base64ToFile(base64Data, '文件名');
        closeMedia();
    };

    // 关闭摄像头
    let closeMedia=function(){
        mediaStream.getTracks().forEach(track => {
            track.stop();
        });
        srcVideo.style.display='none';
    };
	
	function base64ToFile(base64Data, fileName) {
    let arr = base64Data.split(','),
      fileType = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      l = bstr.length,
      u8Arr = new Uint8Array(l);

    while (l--) {
      u8Arr[l] = bstr.charCodeAt(l);
    }
    return new File([u8Arr], fileName, {type: fileType});
  }
	

</script>
</html>

香煎三文鱼

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
js调用摄像头拍照

<!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>拍照
复制链接

扫一扫