@fortawesome/free-solid-svg-icons#faVideo TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faVideo.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: VideoInputControl.tsx From amazon-chime-sdk-smart-video-sending-demo with Apache License 2.0 | 5 votes |
|
VideoInputControl: React.FC = () => {
const meetingManager = useMeetingManager();
const audioVideo = useAudioVideo();
const { isLocalVideoEnabled, toggleVideo, nameplate, setNameplate } = useLocalVideoContext();
const videoEl = useRef<HTMLVideoElement>(null);
const canSendLocalVideo = useVideoSendingCommand();
const attendeeName = meetingManager.attendeeName!;
useEffect(() => {
if (!audioVideo) {
return;
}
const sendLocalVideo = async () => {
await audioVideo.chooseVideoInputDevice(meetingManager.selectedVideoInputDevice);
audioVideo.startLocalVideoTile();
setNameplate(attendeeName);
}
const sendLocalVideoPreview = async () => {
await audioVideo.chooseVideoInputDevice(meetingManager.selectedVideoInputDevice);
if (videoEl.current) {
audioVideo.startVideoPreviewForVideoInput(videoEl.current);
setNameplate(`${attendeeName} - preview`);
}else {
throw new Error('No video preview element to show preview!');
}
}
if (canSendLocalVideo && isLocalVideoEnabled !== 'disabled') {
if (videoEl.current) {
audioVideo.stopVideoPreviewForVideoInput(videoEl.current);
}
sendLocalVideo();
}
if (!canSendLocalVideo && isLocalVideoEnabled === 'enabled') {
audioVideo.stopLocalVideoTile();
sendLocalVideoPreview();
}
}, [audioVideo, canSendLocalVideo]);
return (
<>
<ButtonGroup>
<IconButton
icon={isLocalVideoEnabled === 'enabled' ? faVideo : isLocalVideoEnabled === 'disabled' ? faVideoSlash : faSpinner}
disabled={isLocalVideoEnabled === 'pending'}
onClick={() => toggleVideo(videoEl.current)} />
</ButtonGroup>
<LocalVideo
nameplate={nameplate}
videoEl={videoEl}
style={{ width: "20rem", position: "absolute", top: "3.5rem", background: "#1c1c1c" }}
/>
</>
);
}
Example #2
| Source File: VideoSelectButton.tsx From livekit-react with Apache License 2.0 | 5 votes |
|
VideoSelectButton = ({
isEnabled,
onClick,
onSourceSelected,
disableText = 'Disable Video',
enableText = 'Enable Video',
className,
isButtonDisabled,
popoverContainerClassName,
popoverTriggerBtnClassName,
popoverTriggerBtnSeparatorClassName,
}: VideoSelectButtonProps) => {
const [sources, setSources] = useState<MediaDeviceInfo[]>([]);
const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
const listVideoDevices = useCallback(async () => {
const devices = await Room.getLocalDevices('videoinput');
setSources(devices);
setMenuItems(
devices.map((item) => {
return { label: item.label };
}),
);
}, []);
useEffect(() => {
listVideoDevices();
navigator.mediaDevices.addEventListener('devicechange', listVideoDevices);
return () => {
navigator.mediaDevices.removeEventListener('devicechange', listVideoDevices);
};
}, []);
const handleMenuItem = (item: MenuItem) => {
const device = sources.find((d) => d.label === item.label);
if (device && onSourceSelected) {
onSourceSelected(device);
}
};
return (
<ControlButton
label={isEnabled ? disableText : enableText}
icon={isEnabled ? faVideo : faVideoSlash}
disabled={isButtonDisabled}
onClick={onClick}
menuItems={menuItems}
onMenuItemClick={handleMenuItem}
className={className}
popoverContainerClassName={popoverContainerClassName}
popoverTriggerBtnClassName={popoverTriggerBtnClassName}
popoverTriggerBtnSeparatorClassName={popoverTriggerBtnSeparatorClassName}
/>
);
}
Example #3
| Source File: Avatar.tsx From sync-party with GNU General Public License v3.0 | 5 votes |
|
export default function Avatar({
username,
size,
user,
showTitle,
online,
webRtc,
fontSize
}: Props): JSX.Element {
const { t } = useTranslation();
return (
<div
title={
showTitle
? username +
': ' +
(online ? t('common.online') : t('common.offline'))
: ''
}
key={username}
className={
'rounded-full ' +
(size === 10 ? 'h-10 w-10' : 'h-8 w-8') +
' mr-2 mt-2 backgroundShade flex items-center justify-center' +
(username === user.username
? ' border border-purple-400 text-purple-400'
: ' border border-gray-500 text-gray-200') +
(fontSize ? ' ' + fontSize : '')
}
>
{(online === true || online === false) && (
<div className="relative z-40">
<div
className={
'absolute rounded-full h-3 w-3 mb-2 ml-5 bottom-0 border' +
(online
? 'border-green-500 bg-green-500'
: 'border-red-600 bg-red-600')
}
></div>
{online && webRtc && webRtc.mode !== 'none' && (
<div className="absolute text-xs h-2 w-2 mt-2 ml-5 top-0">
<FontAwesomeIcon
icon={
webRtc.mode === 'audio'
? faPhoneAlt
: faVideo
}
/>
</div>
)}
</div>
)}
<span className="z-50">
{username.toLowerCase().substring(0, 3)}
</span>
</div>
);
}
Example #4
| Source File: CommunicationBar.tsx From sync-party with GNU General Public License v3.0 | 4 votes |
|
export default function CommunicationBar({
toggleChat,
toggleWebRtcAudio,
toggleWebRtcVideo,
chatIsActive,
webRtcAudioIsActive,
webRtcVideoIsActive,
uiVisible,
showVideos,
setShowVideos,
audioIsMuted,
videoIsMuted,
toggleAudioIsMuted,
toggleVideoIsMuted
}: Props): ReactElement {
const { t } = useTranslation();
return (
<div
className={
'absolute bottom-0 left-0 ml-3' +
(uiVisible ? ' mb-12' : ' mb-3')
}
>
<div className="flex flex-row">
<BarButton
isActive={chatIsActive}
clickHandler={toggleChat}
icon={faComment}
titleText={chatIsActive ? t('chat.close') : t('chat.open')}
size="large"
/>
{!webRtcAudioIsActive && (
<BarButton
isActive={webRtcVideoIsActive}
clickHandler={toggleWebRtcVideo}
icon={faVideo}
titleText={
webRtcVideoIsActive
? t('webRtc.videoClose')
: t('webRtc.videoOpen')
}
size="large"
/>
)}
{!webRtcVideoIsActive && (
<BarButton
isActive={webRtcAudioIsActive}
clickHandler={toggleWebRtcAudio}
icon={faPhoneAlt}
titleText={
webRtcAudioIsActive
? t('webRtc.audioClose')
: t('webRtc.audioOpen')
}
size="large"
/>
)}
{webRtcVideoIsActive && (
<BarButton
isActive={!videoIsMuted}
clickHandler={toggleVideoIsMuted}
titleText={
videoIsMuted
? t('webRtc.unmuteVideo')
: t('webRtc.muteVideo')
}
icon={videoIsMuted ? faVideoSlash : faVideo}
size="small"
/>
)}
{(webRtcAudioIsActive || webRtcVideoIsActive) && (
<BarButton
isActive={!audioIsMuted}
clickHandler={toggleAudioIsMuted}
titleText={
audioIsMuted
? t('webRtc.unmuteAudio')
: t('webRtc.muteAudio')
}
icon={audioIsMuted ? faMicrophoneSlash : faMicrophone}
size="small"
/>
)}
{webRtcVideoIsActive && (
<BarButton
isActive={showVideos}
clickHandler={(): void => setShowVideos(!showVideos)}
titleText={
showVideos
? t('webRtc.hideVideos')
: t('webRtc.showVideos')
}
icon={showVideos ? faEye : faEyeSlash}
size="small"
/>
)}
</div>
</div>
);
}
