h5调用摄像头拍摄_调用后置摄像头 could not start video resource

相关文章推荐

不开心的椰子 · 日本经济概况· 1 月前 ·

谦和的火龙果 · 颈族Alist楔芯肛帚拨柬煞留蚌 - 知乎· 7 月前 ·

独立的柚子 · 山西省还有多少生产煤矿？最新最全名单公布！_ ...· 7 月前 ·

天涯 · 大模型RAG ...· 1 年前 ·

鼻子大的红酒 · 梁朝伟生活曝光：又破圈！没想到他是这样的男神 ...· 1 年前 ·

< ! -- < div class = "demo_main" > < div @click = "moveToCameraAVG()" v - cloak > < img v - if = "imginfo!==''" : src = "imginfo" / > < div class = "warm_title2" > 点击自拍一张头像 < / div > < / div > < video id = "video" class = "pic_video" playsinline autoplay x5 - video - player - type = "h5" style = "object-fit:fill" > < / video > < canvas id = "canvas" class = "canvas_pic" style = "margin: 0;padding: 0;" > < / canvas > < div class = "bottom_div" > < div > 拍照 < / div > < img src = "images/pic_btn.png" class = "capture-btn" @click = "captureAvg" / > < / div > < / div > -- > < div class = "demo_main" > < img v - if = "imginfo!==''" : src = "imginfo" / > < div class = "booth" v - if = "showStatus" > < div class = "top_header" > < span @click = "hideDom" > 取消 < / span > < span > 相册 < / span > < / div > < div class = "box_center" > < div class = "img_box" > < / div > < video id = "video" class = "pic_video" playsinline autoplay x5 - video - player - type = "h5" style = "object-fit:fill" > < / video > < / div > < button id = "tack" @click = "captureAvg" > < / button > < canvas id = "canvas" width = "400" height = "300" style = "" > < / canvas > < ! -- < img id = "img" src style = "max-width:100%" / > -- > < / div > < div v - else > < button type = "file" @click = "showDom" > 上传图片 < / button > < img id = "img" src style = "max-width:100%" / > < / div > < / div > < / template > < script > import "@/utils/flexible.js" ; export default { data ( ) { return { showStatus : false , imgUrl : "" , vendorUrl : "" , video : "" , canvas : "" , img : "" , snap : "" , imginfo : "" created ( ) { } , mounted ( ) { } , methods : { showDom ( ) { this . showStatus = true ; this . moveToCameraAVG ( ) ; hideDom ( ) { this . showStatus = false ; moveToCameraAVG ( ) { var self = this ; if ( navigator . mediaDevices === undefined ) { navigator . mediaDevices = { } ; if ( navigator . mediaDevices . getUserMedia === undefined ) { navigator . mediaDevices . getUserMedia = function ( constraints ) { var getUserMedia = navigator . getUserMedia || navigator . webkitGetUserMedia || navigator . mozGetUserMedia || navigator . msGetUserMedia || navigator . oGetUserMedia ; if ( ! getUserMedia ) { return Promise . reject ( new Error ( "getUserMedia is not implemented in this browser" ) return new Promise ( function ( resolve , reject ) { getUserMedia . call ( navigator , constraints , resolve , reject ) ; } ) ; if ( window . stream ) { window . stream . getTracks ( ) . forEach ( track => { track . stop ( ) ; } ) ; var constraints = ( window . constraints = { audio : false , video : { sourceId : "default" , facingMode : { exact : "environment" } } ) ; navigator . mediaDevices . getUserMedia ( constraints ) . then ( function ( stream ) { var video = document . getElementById ( "video" ) ; try { window . stream = stream ; video . srcObject = stream ; } catch ( error ) { video . src = window . URL . createObjectURL ( stream ) ; self . localMediaStream = stream ; video . play ( ) ; . catch ( function ( err ) { alert ( err . name + ": " + err . message ) ; } ) ; //停止摄像机 stopCapture : function ( ) { var video = document . getElementById ( "video" ) ; if ( ! video . srcObject ) return ; let stream = video . srcObject ; let tracks = stream . getTracks ( ) ; tracks . forEach ( track => { track . stop ( ) ; } ) ; // 头像照片 captureAvg ( ) { var vm = this ; var video = document . getElementById ( "video" ) ; var canvas = document . getElementById ( "canvas" ) , ctx = canvas . getContext ( "2d" ) , CHeight = video . clientHeight , //获取屏幕大小让canvas自适应 CWidth = video . clientWidth ; canvas . width = CWidth ; canvas . height = CHeight ; if ( vm . localMediaStream ) { ctx . drawImage ( video , 0 , 0 , CWidth , CHeight ) ; var dataURL = canvas . toDataURL ( "image/jpeg" ) ; //dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA' vm . imginfo = dataURL ; // 停止摄像机 video . pause ( ) ; this . stopCapture ( ) ; < / script > < style lang = "less" scoped > . top_header { position : fixed ; left : 0 ; right : 0 ; top : 0 ; height : 1.31 rem ; display : flex ; justify - content : space - around ; align - items : center ; padding : 0 ; margin : 0 ; . demo_main { height : 100 % ; width : 100 % ; background : rgba ( 0 , 0 , 0 , 0.31 ) ; padding : 0 ; margin : 0 ; . booth { display : flex ; justify - content : center ; align - items : center ; flex - direction : column ; height : 100 % ; width : 100 % ; position : relative ; . box_center { height : 13.55 rem ; width : 10 rem ; position : relative ; display : flex ; justify - content : center ; align - items : center ; video { height : 11.31 rem ; width : 7.55 rem ; . img_box { height : 11.31 rem ; width : 7.55 rem ; background - image : url ( "https://file.baojunev.com/group1/default/20200602/09/39/3/positive.png" ) ; position : absolute ; background - size : 100 % 100 % ; top : 1.12 rem ; #tack { position : fixed ; z - index : 2 ; height : 1.65 rem ; width : 1.65 rem ; border - radius : 50 % ; background : #fff ; bottom : 0.45 rem ; background - image : url ( "https://file.baojunev.com/group1/default/20200602/10/10/3/btn.png" ) ; background - size : contain ; border : none ; outline : none ; < / style >

2.遇到的问题
在浏览器上直接打开该页面时可生效，但是在app的内嵌h5内不生效

权限未打开(APP拍摄权限打开)

config.xml
<platform name="ios">
 <custom-config-file parent="NSCameraUsageDescription" platform="ios" target="*-Info.plist">
   <string>Access to camera to make video calls.</string>
 </custom-config-file>
 <custom-config-file parent="NSMicrophoneUsageDescription" platform="ios" target="*-Info.plist">
   <string>Access to microphone to make calls.</string>
 </custom-config-file>
</platform>
以及适用于Android的以下内容：AndroidManifest.xml
<platform name="android">
 ...
 <custom-preference name="android-minSdkVersion" value="21" />
 <custom-preference name="android-targetSdkVersion" value="28" />
 <custom-config-file parent="/*" target="AndroidManifest.xml">
   <uses-permission android:name="android.webkit.PermissionRequest" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.RECORD_AUDIO" />
   <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
   <uses-permission android:name="android.permission.CAMERA" />
   <uses-feature android:name="android.hardware.camera" />
   <uses-feature android:name="android.hardware.camera.autofocus" />
 </custom-config-file>
</platform>
APP找那个需要加入代码 
参考的文档：参考文档 
"permissions": {
  "audio-capture": {
    "description": "Required to capture audio using getUserMedia()"
  "video-capture": {
    "description": "Required to capture video using getUserMedia()"
提示错误，和video标签的显示，并不会显示摄像头（原因：摄像的权限未打开）
 chrome NotReadableError: Could not start video source
                    &lt;template&gt;  &lt;!-- &lt;div class="demo_main"&gt;    &lt;div @click="moveToCameraAVG()" v-cloak&gt;      &lt;img v-if="imginfo!==''" :src="imginfo" /&gt;      &lt;div class="warm_title2"&gt;点击自拍一张头像&lt;/div&gt;    &lt;/div&gt;    &lt;video    
				js实现调用网络摄像头及常见错误处理
　　最近由于业务的原因，需要在Web端页面接入调试各类的网络摄像头，遇到了很多匪夷所思的问题（说的就是读得出摄像头的品牌，读不出摄像头的分辨率）。于是整理了这篇文章作为备忘录，也希望能帮到有类似的小伙伴们。
　　navigator.mediaDevices.getUserMedia({ audio: false, video: true }).then(async (stream) => {　　 　　  let video = document.getElementById('#video')　　  　　  // 兼容性监测　　  if( '
voide的 两个属性，autoplay muted
<video id='video2' autoplay='autoplay' muted='muted'></video>
先说说已经过时的方法，
进入 chrome://flags/  搜索Autoplay policy ，该选项默认设置为Default，改为：No user gesture is required， 此方法已经行不通了，，以后不要在入坑了
这时候别慌，可能你你的路由太少，甚至只有一个路由。在路由切换时路由重复点击所导致的错误，虽然这个错误不影响功能，但一般不要给它报错
解决方法一，添加两个及以上的路由
解决方法二，在你的路由代码中抛出错误就可以了this.$router.push("/").catch(()=>{});
				项目中调用相机踩坑记录
最近开发vue框架h5项目多端嵌套，企业微信端，个人微信端，及微信小程序的身份证上传功能，可拍照，可从相册中选取。
项目中用到的是vant-ui，上代码：
<van-uploader  
    v-model="picList" 
    :multiple="multiple"
    :max-count="maxCount"
    :after-read="afterReadHandle" 
    :before-delete="beforeDeleteHandle
				Andoird中拍照、录像是很常见的功能，但是系统相机的Api目前发生了很大的变化，有Camera1、Camera2、CameraX三个api,每个api的使用和方法都不一样，如果做过相机开发的小伙伴应该会很头疼这三个api在不同安卓系统手机的适配，由于目前的App有一部分工作涉及到这部分，所以总结了一下，目前由基础到深入慢慢总结.
一.简介：（官方介绍如下）
CameraX 是一个 Jetpack 支持库，旨在帮助您简化相机应用的开发工作。它提供一致且易用的 API 接口，适用于大多数 Android
然后就可以成功调起摄像头进行拍照了。
上传到服务器异常：DOMException: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).
网上查找原因和解决的方法。原因是用的http，需要使...
navigator.mediaDevices.getUserMedia
应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：
https://developer.mozilla.org/zh-CN/docs/Web/...
public void onPermissionRequests(String permission, OnBooleanListener onBooleanListener) {
    onPermis
	<video id="video" width="640" height="480" autoplay></video>
	<script>
		navigator.mediaDevices.getUserMedia({ video: true })
		.then(function (stream) {
			var video = document.querySelector('#video');
			video.srcObject = stream;
			video.onloadedmetadata = function(e) {
				video.play();
		.catch(function (err) {
			console.log(err);
	</script>
</body>
</html>
这段代码会调用用户的摄像头，并在页面上显示摄像头的视频。如果您需要更多的控制，可以使用WebRTC API，例如获取视频帧和处理视频流。