js调用摄像头录像并传到后端

参考自https://juejin.im/entry/5b91e8e7f265da0ac55e2cd6?tdsourcetag=s_pcqq_aiomsg
项目要求前端h5页面调用摄像头录像，然后传给后端进行人脸识别，根据返回值进行路由跳转，流媒体这方面以前接触过的都是推流拉流转发之类的软件，前端进行流媒体开发，最常用的是flash，兼容性也最好，但是它的学习成本太高了，flash这方面由公司另找人做了，我主要负责移动手机页面的开发，然后把页面嵌入到app产品里面，公司领导找到了解决方案，我跟着改写了一下，效果还是可以的，特此记录

利用的是浏览器自带的apiMediaRecorder这个api

它有3个事件

onstart

录制开始

onstop

录制结束

onstart

录制结束时同时触发，事件对象中返回录制的媒体数据

 /*navigator.mediaDevices.getUserMedia是获取手机摄像头跟话筒的方法，它返回的是promise对象，因为用户要手动选择同意，只支持火狐浏览器，chrome浏览器必须在localhost，https协议下访问，如果用ip+端口的话会因为安全策略拒绝获取摄像头*//*{ audio: true, video: { facingMode: "user" } }这里是选择了前置摄像头*/
requestAudioAccess() {navigator.mediaDevices.getUserMedia({ audio: true, video: { facingMode: "user" } }).then(stream => {this.mediaStreamTrack =typeof stream.stop === "function"? stream: stream.getTracks()[1];this.recorder = new window.MediaRecorder(stream);this.stream = stream;this.bindEvents();this.onPreview();},error => {alert("出错，请确保已允许浏览器获取音视频权限");});},

绑定事件

bindEvents () {//录制结束的时候获取视频保存下来this.recorder.ondataavailable = this.getRecordingData;this.recorder.onstop = this.saveRecordingData;
},

结束录制并传到后端，这里一开始用的axios，但是使用时会把二进制文件序列化导致失效，于是用的原生ajax

saveRecordingData() {Indicator.open("上传视频中...");this.uploading = true;let blob = new Blob(this.chunks, { type: "video/webm" }),videoStream = URL.createObjectURL(blob);this.chunkList.push({ stream: videoStream });var file = new File([blob],"msr-" + new Date().toISOString().replace(/:|\./g, "-") + ".webm",{type: "video/webm"});var formData = new FormData();formData.append("fileName", file);formData.append("name", this.name);formData.append("idCard", this.idCard);var request = new XMLHttpRequest();var url = "yourURL";request.open("POST", url);request.send(formData);let self = this;request.onreadystatechange = function() {var res = request.responseText;if (request.readyState == 4 && request.status == 200) {Indicator.close();this.uploading = false;res = JSON.parse(res);if (res.data.faceAuthFlg && res.data.faceAuthFlg == "1") {self.$router.push({path: "/rlsb/success",query: {successUrl: res.data.successUrl}});} else {self.$router.push({path: "/rlsb/result",query: {failCount: res.data.failCount}});}} else {Indicator.close();this.uploading = false;self.$router.push({path: "/rlsb/result",});}};}

前端js调用摄像头进行录像并传到后端相关推荐

JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
JS调用摄像头、实时视频流上传（一次不成功的试验）
JS调用摄像头.实时视频流上传(一次不成功的试验) 思路前端调用摄像头,获取视频流,从视频流中取一帧转图片,用websocket上传图片. 研究了一下发现了WebRTC这种技术,看到有博客说一些直播 ...
前端js华为云obs断点续传上传
前端js华为云obs断点续传上传断点续传上传就是将待上传的文件分成若干份分别上传,并实时地将每段上传结果统一记录在断点续传记录对象中,仅当所有分段都上传成功时返回上传成功的结果,否则在回调函数中返回 ...
js调用摄像头并截图
js调用摄像头并截图 <!DOCTYPE html> <html><head><meta charset="utf-8"><t ...
在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
java集合转js数值_前端js调用接口转换Map数组数据
返回Map数据后端接口返回数据格式 { "code": 1, "msg": "操作成功!", "count": 0, ...
前端js以application/octet-stream方式上传文件
今天又学会了一种上传文件的文件流方法. 本人后端采用了CXF框架实现的 api层 package com.inspur.gs.tax.tbs.utils;import org.glassfish.je ...

前端js调用摄像头进行录像并传到后端

js调用摄像头录像并传到后端

利用的是浏览器自带的apiMediaRecorder这个api

它有3个事件

onstart

onstop

onstart

绑定事件

结束录制并传到后端，这里一开始用的axios，但是使用时会把二进制文件序列化导致失效，于是用的原生ajax

前端js调用摄像头进行录像并传到后端相关推荐

最新文章

热门文章