一、安裝?CamSplitter?

這塊網上有很多教程了，這里不再贅述，就一點，需要分幾個虛擬攝像頭，就要在CamSplitter 的安裝目錄下?driver_install.cmd 執行幾次。

二、React + ts + react-webcam 調用虛擬攝像頭

import { useState, useEffect, useCallback, useMemo } from "react";
import Webcam from "react-webcam";interface DeviceInfo {deviceId: string;label: string;kind: string;
}export const VirtualCameraViewer = () => {const [_, setDevices] = useState<DeviceInfo[]>([]);const [selectedDevice, setSelectedDevice] = useState<string | null>(null);//這里實現了跨系統的適配const systemSpecificConstraints = useMemo(() => {const isLinux = navigator.userAgent.includes("Linux");const isWindows = navigator.userAgent.includes("Windows");if (isLinux) {return {width: { ideal: 640 },height: { ideal: 480 },frameRate: { ideal: 15 },facingMode: "environment",};} else if (isWindows) {return {width: { ideal: 640 },height: { ideal: 480 },frameRate: { ideal: 30 },facingMode: "user",};}return {};}, [navigator.userAgent]);// 必須先請求攝像頭權限才能獲取完整設備信息async function initCamera() {try {//瀏覽器webRTC 請求攝像頭權限const stream = await navigator.mediaDevices.getUserMedia({ video: true });stream.getTracks().forEach((track) => track.stop()); // 釋放初始流//獲取攝像頭列表const devices = await navigator.mediaDevices.enumerateDevices();//過濾出來虛擬攝像頭 這里 linux系統可以使用 v4l2loopback實現//v4l2loopback label 包含 Virtual。//CamSplitter的虛擬攝像頭默認名稱為CamSplitter #1,CamSplitter #2const cameras = devices.filter((d) =>d.kind === "videoinput" &&(d.label.includes("Virtual") || d.label.includes("CamSplitter")));console.log("攝像頭列表:", cameras); // 檢查label和deviceIdhandleDevices(cameras);} catch (error) {console.error("權限獲取失敗:", error);}}const handleDevices = useCallback((mediaDevices: MediaDeviceInfo[]) => {setDevices(mediaDevices);if (mediaDevices.length > 0) {setSelectedDevice(mediaDevices[0].deviceId);}}, []);useEffect(() => {initCamera();}, [handleDevices]);return (<>{selectedDevice && (<Webcamaudio={false}videoConstraints={selectedDevice? {...systemSpecificConstraints,deviceId: { exact: selectedDevice },}: { ...systemSpecificConstraints }}/>)}</>);
};

上面就實現了一個簡單 的 瀏覽器通過webRTC 調用虛擬攝像頭，避免攝像頭被占用的問題。

注意：1、webRTC只有現代瀏覽器支持，成熟方案應該考慮老舊版本瀏覽器不支持webRTC的問題。

? ? ? ? ? 2、考慮攝像頭流資源釋放問題。

? ? ? ? ? 3、瀏覽器調用攝像頭，第一次要獲取權限。

? ? ? ? ? 4、CamSplitter 要讀取真實的攝像頭流并最小化。