WEB前端打开摄像头

之前用WPF调用摄像头，发现占用CPU资源比较大。

今天测试用WEB端打开摄像头

代码如下：


<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title></title></head>
<body><video id="video"></video><script>const width = 480;const height = 320;const video = document.getElementById('video');//访问摄像头if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头getUserMedia({video: {width: width, height: height}}, success, error);} else {alert('不支持访问用户媒体');}//访问用户媒体设备的兼容方法function getUserMedia(constraints, success, error) {if (navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints, success, error)} else if (navigator.mozGetUserMedia) {//firfox浏览器navigator.mozGetUserMedia(constraints, success, error);} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}//成功回调function success(stream) {console.log('成功');//兼容webkit核心浏览器// const CompatibleURL = window.URL || window.webkitURL;//将视频流设置为video元素的源// video.src = CompatibleURL.createObjectURL(stream);video.srcObject = stream;video.play();}//失败回调function error(error) {console.log('失败');console.log("访问用户媒体设备失败", error);} </script>
</body>
</html>

WEB前端打开摄像头相关推荐

android html 打开摄像头,在android上，用WEB页面打开手机摄像头
今天看到一个人提问,怎么在android上用web页面打开手机摄像头.刚好我们之前也做过类似的工程,刚好把想法写一下: 1.基本原理: 页面上做一个按钮,如打开摄像头,它做的事情就是将页面链接到一个特 ...
HTML5纯Web前端也能开发直播，不用开发服务器（使用face2face）
前段时间转载了某位大神的一篇文章,开发Web版一对一远程直播教室只需30分钟 - 使用face2face网络教室.非常有意思.看起来非常简单,但作为一名前端开发人员来说,还是有难度.因为要开发服务器端 ...
java web+前端实现人脸登录功能（专注细节）
本次的博客是自己软件工程课设的作业,写博客是为了记录自己的学习过程,然后总结,同时可以给需要的人作参考. 1.在做这个项目的时候,也是个大三学生,所以懂得并不多,因此在网上看见了一些相关的资源,但是都 ...
2012年度最佳Web前端开发工具和框架总结
2012年度最佳Web前端开发工具和框架总结 2013/01/18 | 分类: 工具与资源 | 1 条评论 | 标签: 前端, 开发工具, 开发框架分享到:0 来源:梦想天空技术的快速发展让很多人 ...
web前端入门知识解析
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
2021腾讯web前端暑期实习生一面/腾讯面经
啊啊啊啊啊啊,心里一万只草泥马奔腾而过,到现在还久久不能平静.北京时间2021年3月27号,刚刚结束腾讯web前端暑期一面. 人生第一次面试,献给了合作多年的腾讯(会员充值,游戏充值等合作),面试是线 ...
Web前端+Java实现人脸识别登录
使用前端页面+java后台实现人脸登录,人脸的图像对比是调用的百度接口(百度AI开放平台). 一.实现思路 a.前端页面调用设备摄像头获取实时图片数据. b.通过Ajax将图片数据提交后台处理,并返回 ...
WEB前端入门知识及要点大全
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
2012年度最佳Web前端开发工具和框架
摘要:技术的快速发展让很多人学习起来无所适从,幸运的是,很多优秀的 Web 开发人员和设计人员在努力寻找各种有特色的解决方案. 因此,我们有了很多优秀的小工具和库,每一个都是用来解决特定的问题或维护一 ...

WEB前端打开摄像头

WEB前端打开摄像头相关推荐

最新文章

热门文章