如何移除react-video-recorder中的摄像头翻转图标？

你自定义renderActions只能覆盖底部操作栏内容，摄像头翻转按钮是组件独立渲染在视频预览层的控件，不会被这个配置覆盖，以下两种方案都可以实现移除效果：

方案1：覆盖翻转按钮渲染逻辑（推荐，无副作用） #

组件本身提供了renderCameraFlipButton自定义渲染入口，直接传入返回null的函数即可让组件完全不渲染该按钮，不会出现样式加载闪烁问题，侵入性最低。
只需要在你现有组件props里新增一行配置即可：

<VideoRecorder
  isFlipped={false}
  audio={true}
  constraints={videoConstraints}
  onUserMediaError={handleError}
  ref={webcamRef}
  // 新增配置，直接让翻转按钮不渲染
  renderCameraFlipButton={() => null}
  renderDisconnectedView={() => <div>disconnected</div>}
  onRecordingComplete={(videoBlob) => {
    setBlob(videoBlob);
    handleStopCaptureClick();
  }}
  renderLoadingView={() => <div></div>}
  renderActions={({
    t,
    isVideoInputSupported,
    isInlineRecordingSupported,
    thereWasAnError,
    isConnecting,
    isRunningCountdown,
    isReplayingVideo,
    onTurnOnCamera,
    onStopReplaying,
  }) => {
    const renderContent = () => {
      const shouldUseVideoInput =
        !isInlineRecordingSupported && isVideoInputSupported;

      if (
        (!isInlineRecordingSupported && !isVideoInputSupported) ||
        thereWasAnError ||
        isConnecting ||
        isRunningCountdown
      ) {
        return null;
      }

      if (isReplayingVideo) {
        return (
          <Button
            type="button"
            onClick={onStopReplaying}
            title="start-replaying"
          >
            {t("Use another video")}
          </Button>
        );
      }
      if (!shouldUseVideoInput && turnonCamera) {
        onTurnOnCamera();
        setturnonCamera(false);
      }
    };

    return <div>{renderContent()}</div>;
  }}
/>

方案2：CSS样式隐藏（兼容旧版本） #

如果你使用的组件版本没有暴露renderCameraFlipButton配置，可以通过CSS选择器直接隐藏该按钮，给VideoRecorder外层套一层自定义类名的容器，添加如下样式：

/* 替换成你自己的外层容器类名 */
.video-recorder-container .react-video-recorder__camera-flip {
  display: none !important;
}

如果上面的类名不生效，可以打开浏览器开发者工具选中翻转按钮，复制对应的实际类名替换即可。

内容的提问来源于stack exchange，提问作者Aman panwar