在React应用中切换摄像头,可以使用navigator.mediaDevices.getUserMedia()
方法,它会弹出一个对话框让用户选择摄像头
navigator.mediaDevices
和navigator.mediaDevices.getUserMedia
:if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log('getUserMedia supported');
} else {
console.log('getUserMedia not supported');
}
async function getCameraStream() {
try {
const constraints = { video: true };
const stream = await navigator.mediaDevices.getUserMedia(constraints);
return stream;
} catch (err) {
console.error('Error accessing camera:', err);
}
}
async function switchCamera() {
const currentStream = videoRef.current.srcObject;
const newStream = await getCameraStream();
if (currentStream) {
currentStream.stop();
}
videoRef.current.srcObject = newStream;
}
import React, { useRef } from 'react';
function VideoCamera() {
const videoRef = useRef(null);
return (
<div>
<video ref={videoRef} autoPlay playsInline width="320" height="240"></video>
<button onClick={switchCamera}>切换摄像头</button>
</div>
);
}
export default VideoCamera;
在这个例子中,我们创建了一个VideoCamera
组件,它包含一个video
元素和一个按钮。点击按钮时,会调用switchCamera
函数来切换摄像头。
领取专属 10元无门槛券
手把手带您无忧上云