浏览器调取摄像头拍照并且关闭摄像头

最新推荐文章于 2024-02-06 14:39:13 发布

準提童子

最新推荐文章于 2024-02-06 14:39:13 发布

阅读量1.9w

点赞数 4

分类专栏： Web前端文章标签： html5 摄像头浏览器开启关闭

本文链接：https://blog.csdn.net/WuyZhen_CSDN/article/details/78672811

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

页面：

<!DOCTYPE html>
<html>
  <head>
    <title>paizhao.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
 <body>
<div id="contentHolder">
    <video id="video" width="320" height="320" autoplay></video>
    <button id="start" style="display:block" >start</button>
    <button id="picture" style="display:block" >paizhao</button>
    <canvas style="display:block" id="canvas" width="320" height="320"></canvas>
    <button id="sc" style="display:block" >shangchuan</button>
    <button id="stop" style="display:block" >stop</button>
</div>
</body>
</html>

js:摄像头的开启和关闭

<script>
	 var mediaStreamTrack;
    document.getElementById("start").addEventListener("click", function () {
        navigator.getUserMedia = navigator.getUserMedia ||
	    navigator.webkitGetUserMedia ||
	    navigator.mozGetUserMedia;
	    if (navigator.getUserMedia) {
	        navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
	                function(stream) {
	                 mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
			            video.src = (window.URL || window.webkitURL).createObjectURL(stream);
			            video.play();
	                   /*  var video = document.getElementById("video");
	                    video.src = window.URL.createObjectURL(stream);
	                    video.onloadedmetadata = function(e) {
	                        console.log('nihao44eee4aaaaddda');
	                        video.play();
	                    }; */
	                },
	                function(err) {
	                    console.log("The following error occurred: " + err.name);
	                }
	        );
	    } else {
	        console.log("getUserMedia not supported");
	    }
    });
   document.getElementById("stop").addEventListener("click", function () {
   		mediaStreamTrack && mediaStreamTrack.stop();
    });
    document.getElementById("picture").addEventListener("click", function () {
    	var context = document.getElementById("canvas").getContext("2d");
        context.drawImage(video, 0, 0, 320, 320);
    });
    document.getElementById("sc").addEventListener("click", function () {
        var imgData=document.getElementById("canvas").toDataURL("image/png");
        var mmmd=getBase64Image(document.getElementById("mmm"));
        var data=imgData.substr(22);
        console.log(mmmd)
        debugger
        $.post('recorder/target/sc',{'sj':data});
    });
     function getBase64Image(img) {
          var canvastemp = document.createElement("canvas");
          canvastemp.width = img.width;
         canvastemp.height = img.height;
         var ctx = canvas.getContext("2d");
         ctx.drawImage(img, 0, 0, img.width, img.height);
         var dataURL = canvas.toDataURL("image/png");
         return dataURL
         // return dataURL.replace("data:image/png;base64,", "");
     }
</script>

準提童子

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
8
评论
浏览器调取摄像头拍照并且关闭摄像头

页面： paizhao.html --> start paizhao shangchuan stopjs:摄像头的开启和关闭 var mediaStreamTrack; document.getElementById("start")
复制链接

扫一扫