ur-ui-kit-tm
Version:
unlimited robotics ui kit
43 lines (42 loc) • 2.55 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from "react";
import ReactHlsPlayer from "react-hls-player";
import download from "downloadjs";
import { FiVolumeX } from "react-icons/fi";
import { RiLiveLine } from "react-icons/ri";
import { AiOutlineCamera } from "react-icons/ai";
import { BsBroadcast } from "react-icons/bs";
import { Icon, IconWrapper, Live, LiveWrapper } from "./video.styled";
export var Video = function (_a) {
var url = _a.url;
var playerRef = useRef();
var muteVideo = function () {
playerRef.current.muted = !playerRef.current.muted;
};
var snapVideo = function () {
var _a;
var video = playerRef.current;
var scale = 1;
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth * scale;
canvas.height = video.videoHeight * scale;
(_a = canvas === null || canvas === void 0 ? void 0 : canvas.getContext("2d")) === null || _a === void 0 ? void 0 : _a.drawImage(video, 0, 0, canvas.width, canvas.height);
download(canvas.toDataURL(), Date.now() + ".png");
};
return (_jsxs("div", __assign({ style: { position: "relative" } }, { children: [_jsx(ReactHlsPlayer, { autoPlay: true, width: "100%", height: "auto", src: url, crossOrigin: "anonymous", playerRef: playerRef, hlsConfig: {
maxLoadingDelay: 4,
minAutoBitrate: 0,
lowLatencyMode: true,
} }, void 0), _jsx(LiveWrapper, { children: _jsxs(Live, { children: [_jsx(BsBroadcast, { size: "30px", color: "red" }, void 0), _jsx("span", __assign({ style: { margin: "0px 10px" } }, { children: "LIVE" }), void 0)] }, void 0) }, void 0), _jsxs(IconWrapper, { children: [_jsx(Icon, { children: _jsx(FiVolumeX, { size: "37px", color: "white", onClick: muteVideo }, void 0) }, void 0), _jsx(Icon, { children: _jsx(RiLiveLine, { size: "37px", color: "white" }, void 0) }, void 0), _jsx(Icon, { children: _jsx(AiOutlineCamera, { size: "37px", color: "white", onClick: snapVideo }, void 0) }, void 0)] }, void 0)] }), void 0));
};