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

浏览器调用摄像头

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

        this.div.innerHTML = ''
        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调用陀螺仪必须加按钮手动触发才能用调用起来

你可能感兴趣的:(ios,前端)