【bootstraptable】JS访问用户媒体设备摄像头，进行拍照保存

1.html页面创建一个div画布

<div class="row"><div class="col-md-6"><video id="video" width="1680" height="1080" controls></video><button id="capture">拍照并上传</button></div><canvas id="canvas" width="1680" height="1080"></canvas></div>

2.JS 调用摄像头拍照并传给后台

<script>//访问用户媒体设备的兼容方法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);}}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) {toastr.error(`访问用户媒体设备失败${error.name}, ${error.message}`);}if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {//调用用户媒体设备, 访问摄像头；可设置宽度、高度getUserMedia({video: {width: {ideal: 1280},height: {ideal: 720}}},success, error);} else {toastr.error("不支持访问用户媒体!");}document.getElementById('capture').addEventListener('click', function () {context.drawImage(video, 0, 0, 1920, 1080);// 获取图片传给后台保存let dataURL = canvas.toDataURL();$.ajax({url: "/camera/import/img",type: 'post',data: {"img": dataURL,},success: function (data) {if (data.ret === "success") {toastr.success("图片上传成功!");} else {toastr.error("图片上传失败，请重试!");}}})})</script>

3.后台接收图片并保存

func (this *CameraController) ImportCameraImg() {// 获取前端上传的图片camera := this.GetString("img")b, _ := regexp.MatchString(`^data:\s*image\/(\w+);base64,`, camera)if !b {this.SendJsonResult(st.Failed, "img_format_error")return}re, _ := regexp.Compile(`^data:\s*image\/(\w+);base64,`)allData := re.FindAllSubmatch([]byte(camera), 2)fileType := string(allData[0][1])base64Str := re.ReplaceAllString(camera, "")// 文件路径path := "data/static/files/camera/1001"// 创建文件夹if err := os.MkdirAll(path, os.ModePerm); err != nil {this.SendJsonResult(st.Failed, err.Error())return}curFileStr := strconv.FormatInt(time.Now().UnixNano(), 10)r := rand.New(rand.NewSource(time.Now().UnixNano()))n := r.Intn(99999)// 写入文件var file = path + "/" + curFileStr + strconv.Itoa(n) + "." + fileTypebytes, _ := base64.StdEncoding.DecodeString(base64Str)err := ioutil.WriteFile(file, bytes, 0666)if err != nil {this.SendJsonResult(st.Failed, err.Error())return}this.SendJsonResult(st.Success, st.Success)
}

【bootstraptable】JS访问用户媒体设备摄像头，进行拍照保存相关推荐

纯JavaScript实现的调用设备摄像头并拍照的功能
这篇文章本来不在Jerry计划内的,咱们SAP中国研究院今天已经正式上班了,Jerry也回到工作岗位开始搬砖了. 今天一位同事问我关于本文标题描述的功能如何实现,Jerry在网上随便搜了一下,类似的例 ...
java 把拍到的图片保存_java 如何调用摄像头并拍照保存照片
首先到sun下载最新的jmf,然后安装.http://java.sun.com/products/java-media/jmf/index.jsp 然后,说一下需求 1．用摄像头拍照 2．在文本框 ...
QT5：获取本机摄像头/usb摄像头实现拍照保存功能
1. 新建一个mainwindow项目,目录如下: 2. 进入qt designer,添加控件,如下图:注意修改对应的控件名称 3. 在.pro文件中添加: QT +=multimedia QT+= ...
H5：获取手机媒体设备权限，如麦克风、视频等
简介 H5开发中,有的项目需要获取手机设备权限,如麦克风.视频. 具体实现 created() {if (navigator.mediaDevices.getUserMedia || navigato ...
Html-网页调用摄像头并拍照效果
给大家分享一个web端,网页调取摄像头并拍照保存照片的代码,感觉挺有意思的,代码是我面向百度编程找到的.... 以下是效果图,主要就是用到了强大的JS 代码 <!DOCTYPE html> ...
JavaScript实现调用摄像头完成拍照取图重命名并下载或上传
环境条件具有内置摄像头或外设摄像头 Vue + Element + axios(环境不同可自行修改,本文主要为逻辑,除展示的上传控件其他与js基本无异) 全文 <template>& ...
php调取摄像头实现拍照功能
最近做的商户后台要实现调取摄像头拍摄用户打卡照片的功能,找资料研究了下,终于黄天不负有心人,成功了,下面我分步骤将代码贴出来,希望能有帮助代码有点多,但是每一步都很好理解,首先是HTML代码,写一个 ...
JS调用媒体设备失败 --- getUserMedia undefine 问题（各浏览器配置方法）
解决: getUserMedia undefine 问题问题: http请求的 chrome,edge, fireFox 等主流浏览器由于安全限制将不会暴露getUserMedia 方法,所以就不能 ...
js调用pc摄像头实现拍照、录视频等，新版Chrome无访问http页面无法打开麦克风、摄像头
js调用pc摄像头实现拍照.录视频等,新版Chrome无访问http页面无法打开麦克风.摄像头新版Chrome配置 vue环境下的前端 function部分 ##由于没有https环境,只有http ...
使用js调用设备摄像头并实现拍照
使用getUserMedia这个API来获取摄像头的权限并实现拍照在线体验:https://811w1z2xwj.codesandbox.io/ 下面是源码: <!DOCTYPE html&g ...

【bootstraptable】JS访问用户媒体设备摄像头，进行拍照保存

1.html页面创建一个div画布

2.JS 调用摄像头拍照并传给后台

3.后台接收图片并保存

【bootstraptable】JS访问用户媒体设备摄像头，进行拍照保存相关推荐

最新文章

热门文章