js 在本地调用电脑的摄像头
分类专栏: Javascript&
简介 一个调用摄像头的demo,并用canvas显示保存。这个功能很实用,比如上传用户的头像,即时拍照及时上传。
<pre class="ql-syntax" spellcheck="false"><video width="200px" height="150px"></video>
<canvas width="200px" height="150px"></canvas>
<p>
<button id="start">打开摄像头</button>
<button id="snap">截取图像</button>
<button id="close">关闭摄像头</button>
</p>
</pre><p><br></p><p><br></p><pre class="ql-syntax" spellcheck="false">window.onload = function () {
var canvas = document.getElementsByTagName('canvas')[0],
context = canvas.getContext('2d'),
video = document.getElementsByTagName("video")[0],
snap = document.getElementById("snap"),
close = document.getElementById("close"),
start = document.getElementById("start"),
MediaStreamTrack;
start.addEventListener('click', function () {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=typeof stream.stop==='function'?stream:stream.getTracks()[1];
video.src=(window.URL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}else if(navigator.getMedia){
navigator.getMedia({
video: true
}).then(function (stream) {
console.log(stream);
MediaStreamTrack=stream.getTracks()[1];
video.src=(window.webkitURL).createObjectURL(stream);
video.play();
}).catch(function(err){
console.log(err);
});
}
});
snap.addEventListener('click', function () {
context.drawImage(video, 0, 0,200,150);
});
close.addEventListener('click', function () {
MediaStreamTrack && MediaStreamTrack.stop();
});
}
</pre><p><br></p><p><br></p><p><span class="ql-size-large" style="color:rgb(230, 0, 0);">总结:上面这个Demo主要用到浏览器的摄像头组件,然后再将图片源赋给canvas。其中遇到一个坑:代码需要托管到服务器端,即在客户端访问才能调用浏览器成功。这种禁止本地调用的做法可能是出于浏览器的安全性和用户的隐私考虑。</span></p>
分享到:
转载:
https://www.cnblogs.com/jiangcheng-langzi/p/8391497.html
喜欢 1
收藏
暂无评论信息
- 相关文章
- 文章推荐
-
乐视官方确认还有 400 多人:消息称员工“没有内卷和 996”,过着“没有老板”的神仙日子
7 月 11 日消息,近期,微博博主 @Fenng 分享了一个冷知识:乐视居然还剩下 400 多人,有不少是五年以上的老员工。这些老员工称“幸福感是很多老乐视人留下来的理由”,没有内卷和 996,没拖欠过留下来的员工的工资,也没停过社保。
-
群辉nas docker容器 配置svn仓库,并实现外网访问
2022-08-11的这一天, 群辉nas到手了, 实现svn仓库外网的访问,折腾了好久。记录一下。
-
git:如何管理本机的多个ssh密钥(多个远程仓库账号)
如果我们电脑上已经存在了一个ssh key,那么我们需要在我们电脑上生成第二个你想在本电脑上使用的id_rsa,使用命令:ssh-keygen -t rsa -C "你的github账号"。
-
淘宝 NPM 镜像站喊你切换新域名啦
淘宝 NPM 镜像站(npm.taobao.org)自 2014 年 正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站 (下称 CNPM)。
- 点击排行
- 站长推荐
- 猜你喜欢
- 网站信息
- 站内问答:12篇
- 站内文章:207篇
- 建站时间:已运行917天
- 备案号: 浙ICP备2022018799号
- 语言:
English(USA)
French(FR)
Chinese(ZH)
无数据