web调用摄像头拍照_uniapp调摄像头引发的“血案”

李彼岸

于 2021-01-26 04:28:42 发布

阅读量4.6k

点赞数 3

文章标签： web调用摄像头拍照

本文链接：https://blog.csdn.net/weixin_42168830/article/details/113324317

版权

本文介绍了在uniapp中实现移动端视频播放并结合三次调用摄像头拍照的需求。使用uniapp的video组件进行视频播放，并通过uni.chooseImage实现摄像头拍照功能。遇到浏览器端与手机端兼容问题，推荐使用uniapp内置方法。此外，利用image-tools插件将图片转换为base64格式以供后端使用。最后，建议避免使用uni.showToast弹窗，推荐采用uView-Ui库。

摘要由CSDN通过智能技术生成

先来说说“血案”起因(需求)：

1.使用uniapp进行移动端开发(坑多得让一部分大神都望尘莫及的"鬼东西")。

2.实现视频播放。

3.视频播放期间三次(开始看视频一次、中间随机一次、结束看视频一次)调用摄像头拍照功能拍照，进行用户识别。

4.图片转base64转给后端、每5s一次请求将视频进度传给后端存储起来。

不说了，硬着头皮淦吧。。。。。

首先视频播放使用的是uniapp自带的原生video视频播放组件:

//代码如下：根据需求使用相应属性      class="video-con"       src="http://www.gzsanchao.com/upload/portal/20201203/15f4671290bc38bbc9a7a266dacd3680.mp4"      id="myVideo"       :controls="true"      :autoplay="autoplay"      :show-mute-btn="false"      :show-fullscreen-btn="true"      auto-pause-if-open-native      vslide-gesture-in-fullscreen      playbackRate      :enable-play-gesture="false"      :auto-pause-if-navigate="false"      @timeupdate="timeUpdate"      @play="play"      @ended="ended"    >            //使用Uview弹窗     "show" :content=      class=