微信调取手机摄像头

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信调取手机摄像头相关的知识,希望对你有一定的参考价值。

验证签名:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

前台页面jsp:

<script>
$(function(){
var jspUrl = location.href.split(‘#‘)[0];
var shareConfig = {
timestamp: Math.round(new Date() / 1000),
nonceStr: Math.round(new Date() / 1000) + Math.random(),
url: URL,
shop_name: "",
shop_id: "",
share_url: ""
};

$.ajax({
cache:true,
type: ‘post‘,
url: "${rootUrl }app/wx/recipeOrder/getSignature",
data:{"jspUrl":jspUrl},
async:true,
beforeSend: function(){
},
success:function(json){
var appId = json.appId;
var timestamp = json.timestamp;
var nonceStr = json.nonceStr;
var signature = json.signature;
wx.config({
debug: true,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature:signature,
jsApiList: [‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘,‘getLocation‘]
});
},
error:function(json){
mui.alert(‘网络忙,请稍后重试?‘);
}
});


});
//调取相机
wx.ready(function() {
//检测api权限是否生效
wx.checkJsApi({
jsApiList: [‘chooseImage‘, ‘previewImage‘, ‘uploadImage‘,‘getLocation‘],
success: function(res) {
}
});
var images={
localId:[],
serverId:[]
};
var zuobiao=[];
$(‘#bt‘).on(‘click‘,function(){
var that=$(this);
wx.chooseImage({
count: 1, // 默认9
sizeType: [‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有,指定压缩
sourceType: [‘camera‘], // 可以指定来源是相册还是相机,默认二者都有,指定相机
success: function(res) {
console.log(res);
//图片本地临时存储路径
// images.localId = res.localIds;
images.localId.push(res.localIds[0]);
//选中图片在img中显示
that.prop(‘src‘, res.localIds[0]);
// alert(that.prop(‘src‘))
//兼容苹果机直接显示图片的问题(只在苹果机起作用)判断机型为苹果手机
if(navigator.userAgent.indexOf(‘iPhone‘) > -1){
wx.getLocalImgData({
localId: res.localIds[0], // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据,可以用img标签显示
that.prop(‘src‘, localData);
}
});
}
wx.getLocation({
type: ‘wgs84‘, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入‘gcj02‘
success: function (res) {
var coordinate=[res.longitude,res.latitude];
zuobiao.push(coordinate);
// latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
// longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = res.speed; // 速度,以米/每秒计
var accuracy = res.accuracy; // 位置精度
}
});
wx.uploadImage({
localId: res.localIds[0],
success: function (res) {
images.serverId.push(res.serverId);
},
fail: function (res) {
alert(JSON.stringify(res)+"---");
}
});
}
});
});
var flag=true;
//点击保存上传图片
$(‘footer button‘).on(‘click‘,function(){
// alert(stu)
var name=$(‘.name‘).val(),
idcard=$(‘.IDcard‘).val(),
phoneNum=$(‘.phoneNum‘).val();

if(name==‘‘ || !regname.test(name) || idcard==‘‘ || !regid.test(idcard) || phoneNum==‘‘ || !regphone.test(phoneNum) ){
alert(‘用户信息格式不正确‘)
return;
}
//首先确认是否选定了图片
if (images.serverId.length < 4) {
alert(‘未选中图片‘);
return;
}
var datas={
xy:zuobiao,
imgurl: images.serverId,
userName:$(‘.name‘).val(),
idNo:$(‘.IDcard‘).val(),
phone:$(‘.phoneNum‘).val(),
user_id:user_id,
type:1
}
save(datas,flag);
});
});
</script>

 

 

 

 

后台:

/**
* 获取微信调取相机时的权限信息
* @param totalMoney
* @param model
* @param request
* @param response
* @throws ManagerException
* @throws IOException
*/
@RequestMapping(value = "/getSignature", method = RequestMethod.POST)
public void getWxDate( Model model,
HttpServletRequest request, HttpServletResponse response) throws ManagerException, IOException {
// MemberBaseInfo loginUser = (MemberBaseInfo) WebUtils.getSessionAttribute(request, SessionNames.LOGIN_USER);
String jspUrl = request.getParameter("jspUrl");
System.out.println("jspUrl---"+jspUrl);
WxPaySendData data = new WxPaySendData();
data.setAppId(Configure.appID);
String timeStr = Calendar.getInstance().getTimeInMillis()+"";
if(timeStr.length() > 9){
timeStr = timeStr.substring(0, 9);
}else{
while(timeStr.length() < 10){
timeStr += "1";
}
}

data.setTimeStamp(timeStr);
data.setNonceStr(RandomStringGenerator.getRandomStringByLength(16));
data.setJspUrl(jspUrl);
System.out.println("jspUrl---"+jspUrl);
//获取access_token
String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
accessTokenUrl = accessTokenUrl.replace("APPID", Configure.appID);
accessTokenUrl = accessTokenUrl.replace("APPSECRET", Configure.appsecret);
JSONObject jsonObject = NetTools.httpsRequest(accessTokenUrl, "GET", null);
System.out.println("jsonObject---"+jsonObject);
String accessToken = (String) jsonObject.get("access_token");
System.out.println("accessToken---"+accessToken);
//获取jsapi_ticket
String jsapiTicketUrl ="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
jsapiTicketUrl = jsapiTicketUrl.replace("ACCESS_TOKEN", accessToken);
JSONObject jsapiObject = NetTools.httpsRequest(jsapiTicketUrl, "GET", null);
Integer errCode = (Integer) jsapiObject.get("errcode");
System.out.println("errCode---"+errCode);
if(errCode != null && errCode.equals(0)){
String jsapiTicket = (String) jsapiObject.get("ticket");

data.setJsapiTicket(jsapiTicket);

HashMap<String,Object> map=new HashMap<String,Object>();
map.put("jsapi_ticket", data.getJsapiTicket());
map.put("noncestr", data.getNonceStr());
map.put("timestamp", data.getTimeStamp());
map.put("url", data.getJspUrl());
Collection<String> keyset= map.keySet();
List<String> list=new ArrayList<String>(keyset);
Collections.sort(list);

String detail = "";
for(int i=0;i<list.size();i++){
if(i == 0 ){
detail = list.get(i)+"="+map.get(list.get(i));
}else{
detail += "&"+list.get(i)+"="+map.get(list.get(i));
}
}
//获取签名
String signature = UnifiedorderService.getSha1(detail);
System.out.println("jspUrl---"+jspUrl);
System.out.println("jsapiTicket---"+jsapiTicket);
System.out.println("nonceStr----"+data.getNonceStr());
System.out.println("timestamp----"+data.getTimeStamp());
System.out.println("signature---"+signature);
Map<String, String> mapToJsp = new HashMap<String, String>();
mapToJsp.put("appId", data.getAppId());
mapToJsp.put("timestamp", data.getTimeStamp());
mapToJsp.put("nonceStr", data.getNonceStr());
mapToJsp.put("signature", signature);
String jsonString = JsonUtil.getJSONString(mapToJsp);
System.out.println("json---"+jsonString);
// writeSuccessToBrowers(jsonString, response);
writeToJson(response, jsonString);
}else{
writeFailToBrowers(errCode.toString(), response);
}
}

 























































































































































































































以上是关于微信调取手机摄像头的主要内容,如果未能解决你的问题,请参考以下文章

微信浏览器调取摄像头拍摄视频

调取手机摄像头拍照并获取拍得的照片

RTSP安防摄像头/海康大华硬盘录像机/NVR网页低延时播放流媒体服务器EasyNVR调取接口报Unauthorized如何解决?

uniapp调取摄像头扫码和生成二维码

移动端调用手机的摄像头和相册

前端vue实现调取摄像功能实现视频上传(H5)