使用html打开电脑前置摄像头并拍照

时间：2023-05-04 06:37:00 703f振动变送器

 
     
      
     
    使用html打开电脑前置摄像头，拍照
     
    代码如下：
     DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>testtitle> head> <body>     <video id="video" width="300" height="300" poster="https://gimg2.baidu.com/image_search/src=http://pic.51yuansu.com/pic3/cover/01/14/62/59043cebb703f_610.jpg&refer=http://pic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637115934&t=cd4ebc01b4b11fb45ce65a3b2dc7e933">video>  <canvas id="canvas" width="300" height="300">canvas><br>     <button id="camera">摄像头button><button id="snap">拍照button> body> <script> //用来匹配不同的浏览器 function getUserMedia(constraints,success,error){ 
            if(navigator.mediaDevices.getUserMedia){ 
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error); }else if (navigator.webkitGetUserMedia) { 
            navigator.webkitGetUserMedia(constraints,success,error); }else if (navigator.mozGetUserMedia) { 
            navigator.mozGetUserMedia(constraints,success,error); }else if (navigator.getUserMedia) { 
            navigator.getUserMedia(constraints,success,error) } } //成功回调 function success(stream){ 
            video.srcObject = stream; video.play(); } //失败回调 function error(error) { 
            console.log("访问用户媒体失败"); } document.getElementById('camera').addEventListener('click',function(){ 
            //视频窗口尺寸 let size = 300; let video = document.getElementById('video'); let canvas = document.getElementById('canvas'); let context = canvas.getContext('2d'); //开启摄像头 if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) { 
            getUserMedia({ 
           video:{ 
           width:size,height:size}},success,error) }else { 
            alert("不支持"); } //实现拍照的功能 document.getElementById('snap').addEventListener('click',function(){ 
            context.drawImage(video,0,0,size,size); }); }); script> html>  
   

锐单商城拥有海量元器件数据手册、IC替代型号，打造电子元器件IC百科大全！

使用html打开电脑前置摄像头并拍照

相关文章