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

最新推荐文章于 2023-06-02 18:18:45 发布

wh8_2011

最新推荐文章于 2023-06-02 18:18:45 发布

阅读量4.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

2 篇文章 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">

</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>

关注

0
点赞
踩
3

收藏

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

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;paizhao.html&lt;/title&gt; &lt;meta name="keywords" content="keyword1,keyword2,keyword3"&gt;
复制链接

扫一扫

专栏目录

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。