php安卓浏览器调用相机拍照,好用的pc端web端 手机端浏览器调用摄像头拍照JavaScript...
亲测可用:
摄像头拍照
拍照
下载拍照图片
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
if (navigator.mediaDevices.getUserMedia) {
//最新的标准API
navigator.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) {
//旧版API
navigator.getUserMedia(constraints, success, error);
}
}
let video = document.getElementById(‘video’);
let canvas = document.getElementById(‘canvas’);
let context = canvas.getContext(‘2d’);
function success(stream) {
//兼容webkit核心浏览器
let CompatibleURL = window.URL || window.webkitURL;
//将视频流设置为video元素的源
console.log(stream);
//video.src = CompatibleURL.createObjectURL(stream);
video.srcObject = stream;
video.play();
}
function error(error) {
console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
//调用用户媒体设备, 访问摄像头
getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
alert(‘不支持访问用户媒体’);
}
document.getElementById(‘capture’).addEventListener(‘click’, function () {
context.drawImage(video, 0, 0, 480, 320);
var imgurl = canvas.toDataURL(‘image/png’);
console.log(imgurl);
})
document.getElementById(‘download’).addEventListener(‘click’, function () {
var dom = document.createElement(“a”);
var imgurl = canvas.toDataURL(‘image/png’);
console.log(imgurl);
dom.href = imgurl;
dom.download = new Date().getTime()+”.png”;
dom.click();
})
php安卓浏览器调用相机拍照,好用的pc端web端 手机端浏览器调用摄像头拍照JavaScript...相关推荐
- JS判断是PC浏览器还是手机端浏览器
JS判断是电脑浏览器还是手机端浏览器,并根据不同的终端跳转到不同的网址 <!DOCTYPE html> <html> <script> function brows ...
- h5调用android录音,html5录音支持pc和Android、ios部分浏览器,微信也是支持的,JavaScript getUserMedia...
花了两天时间在前人基础上重复造了一个网页录音的轮子,顺带把github仓库使用研究了一下,扔到了github上,地址:https://github.com/xiangyuecn/Recorder 演示 ...
- 手机端本地图片或者拍照的上传功能
原文连接 https://blog.csdn.net/m0_37852904/article/details/78550136 ------------------------------------ ...
- h5+实现手机端的录音,拍照,录像
使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放,图片上传下载,拍照,录像的功能,并提供上传下载的功能.开发工具使用hbuilder,该开发工具有模板和demo可以参考实现快速的开发a ...
- 通过UA区分微信PC端浏览器还是手机端浏览器
有时候需要限制用户访问页面在手机端, PC端不允许访问, 但是只做微信浏览器判断是不够的, 这个时候需要进一步判断. 通过tcpdump捉到两种浏览器的区分. PC端: 微信浏览器的UA标识 [Mic ...
- 移动app开发,调试过程中,手机端浏览器无法正常访问接口
问题描述:前后端分离开发过程中,在本地启动一个tomcat服务后,pc端的浏览器可以访问接口,但是移动端的却访问不到 解决方案: 1 将pc和移动端放在同一个局域网内(连接wifi) 2 将pc端的C ...
- 百度地图手机端浏览器对点击事件不灵敏
在调用百度地图API做开发的时候,有时需要在地图上添加点击事件,点击地图上某一点触发某个动作. 在web端,点击事件用map.addEventListener("click,function ...
- python脚本实例手机端-python调用adb脚本来实现群控安卓手机初探
[Python] 纯文本查看 复制代码# !/usr/bin/python # -*- coding:utf-8 -*- import os runapp_name = "com.tence ...
- bigemap手机端点线面标注及拍照记录
一.开始点线面标注 左下角[标绘],点一下之后屏幕上方选择要标注的类型,如下图: 注意:这里可以设置你标绘的点.线.面.的样式:点的图标,大小,粗细,颜色等等可以在这里提前设置风格. 一.开始标注点. ...
最新文章
- BZOJ5323 洛谷4562:[JXOI2018]游戏——题解
- Linux入门第二弹!Xshell、Xftp、tomcat的Linux版本、双X的教学资源!
- GitLab CI/CD 因git凭据踩坑
- maple 2018 窗口关闭提示乱码_如果解决SOLIDWORKS工程图转CAD字体出现乱码的问题_SolidWorks生信科技...
- 树,森林,二叉树之间的转换
- Error C1189: #error: Please use the /MD switch for _AFXDLL builds(转)
- 一起来学PCB-0.4-STM32F072C8T6最小核心板原理图设计
- linux i350网卡,intel I350 网卡驱动安装方法
- 多标签分类问题中的评价指标:准确率,交叉熵代价函数
- win10wifi开关自动弹回_win10突然搜不到wifi了,这个开关点不动,点了会自动变回去...
- Linux 磁盘清理
- 计算机内部进水会不会燃烧,发动机进水后内部变化惊人!“内脏”爆裂而亡
- python调用按键精灵插件_Textobot-用交互式TB插件在iPhone上砸壳更美滋滋
- 给我疯狂内卷!GitHub再现星标86K面试手册,37K!妥妥的
- 微信支付回调验签失败,提示 java.security.InvalidKeyException: Illegal key size
- [io_uring][自用] io_uring.pdf DeepL机翻
- 20届最难毕业的前端程序员的一年前端工作经验总结
- isis学不到looback口的路由_无线路由器怎么设置无线桥接 无线路由器设置无线桥接步骤【教程】...
- 【图文教程】MySQL
- 金猪宝宝--IT人士如何为宝宝起名字