详解利用js调用PC端摄像头-阿里云开发者社区

详解利用js调用PC端摄像头

2023-08-12 196

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 详解利用js调用PC端摄像头

<!DOCTYPE html>
<html lang="en">
<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>
<body>
<button onclick="openMedia()">开启摄像头</button>
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button onclick="takePhoto()">拍照</button>
<img id="imgTag" src="" alt="imgTag">
<button onclick="closeMedia()">关闭摄像头</button>
<script>
    let mediaStreamTrack=null; // 视频对象(全局)
    let video ;
    function openMedia() {
        let constraints = {
            video: { width: 500, height: 500 },
            audio: false
        };
        //获得video摄像头
         video = document.getElementById('video');     
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then((mediaStream) => {
           // mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
           mediaStreamTrack=mediaStream.getVideoTracks()
            video.srcObject = mediaStream;
            video.play();
        });
    }
    // 拍照
    function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById('video');
        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
        // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
        let img = document.getElementById('canvas').toDataURL();
        // 这里的img就是得到的图片
        console.log('img-----', img);
        document.getElementById('imgTag').src=img;//上传 　　　　　　$.ajax({         　　　　　　　　url:"/xxxx.do"          　　　　　　　　,type:"POST"          　　　　　　　　,data:{"imgData":img}         　　　　　　　　,success:function(data){            　　　　　　　　console.log(data);            　　　　　　　　document.gauges.forEach(function(gauge) {             　　　　　　　　gauge.value =data.data            　　　　　　});         　　　　　　}         　　　　　　,error:function(){            　　　　　　　　console.log("服务端异常！");          　　　　　　}        　　　　　　});
    }
    // 关闭摄像头
    function closeMedia() {
          let stream = document.getElementById('video').srcObject;
          let tracks = stream.getTracks();
          tracks.forEach(function(track) {
            track.stop();
          });
         document.getElementById('video').srcObject = null;
    }
</script>
</body>

详解利用js调用PC端摄像头

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

详解利用js调用PC端摄像头

热门文章

最新文章

相关课程

相关电子书

相关实验场景