IOS无法调用摄像头和陀螺仪的问题处理

废柴小z

于 2024-01-09 14:22:33 发布

阅读量576

点赞数 8

文章标签： ios 前端

本文链接：https://blog.csdn.net/qq_34568700/article/details/135479505

版权

浏览器调用摄像头

private createVideo(): void {
        this.div = document.createElement('div');

        this.div.innerHTML = '<video id="videoElement" class="videoElement"  autoplay="autoplay"  muted="muted"   playsinline style="width: 100vw;height:100vh;object-fit: cover"></video>'
        this.div.style = "position:absolute;background-color: transparent; z-order:1;";

        document.body.appendChild(this.div);

        this.video = document.getElementById('videoElement') as HTMLVideoElement;

        // 打开摄像头并获取视频流
        navigator.mediaDevices.getUserMedia({ video: { facingMode: { exact: 'environment' } } })
            .then((stream) => {
                this.video.srcObject = stream;
                this.video.play();// IOS掉不起摄像头是因为少了这一句。一定要加
            })
            .catch((error) => {
                console.error('无法访问摄像头:', error);
                this.video = null
                document.body.removeChild(this.div)
            });
    }

浏览器调用陀螺仪

if (window.DeviceOrientationEvent !== undefined && typeof window.DeviceOrientationEvent.requestPermission === 'function') {
	window.DeviceOrientationEvent.requestPermission().then(function (response) {
			if (response == 'granted') {
				window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
				window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
			}
		}).catch(function (error) {
			console.error('DeviceOrientationControls: Unable to use DeviceOrientation API:', error);
		});
	} else {
		window.addEventListener('orientationchange', onScreenOrientationChangeEvent);
		window.addEventListener('deviceorientation', onDeviceOrientationChangeEvent);
	}

注意：IOS调用陀螺仪必须加按钮手动触发才能用调用起来