@flomon-ui/jsmpeg
v0.0.4
Published
Flomon for jsmpeg
Downloads
6
Readme
flomon-jsmpeg
Flomon for jsmpeg
설치 방법
npm install --save @flomon-ui/jsmpeg
VanillaJS 코드 예시
import JSMpeg from '@flomon-ui/jsmpeg';
const canvasEl = document.createElement('canvas');
document.body.appendChild(canvasEl);
const player = new JSMpeg.RTSPPlayer({
url,
params: {
rtspUrl,
scale: '480:-1',
},
canvas: canvasEl,
autoplay: true,
poster: 'https://cycjimmy.github.io/staticFiles/images/screenshot/big_buck_bunny_640x360.jpg',
});
... Code ...
player.destory();
React.js 코드 예시
import JSMpeg from '@flomon-ui/jsmpeg';
import Player from '@flomon-ui/jsmpeg/dist/jsmpeg/player';
import React, { useEffect, useRef } from 'react';
interface IProps {
url: string;
rtspUrl: string;
}
const RTSPPlayer: React.FC<IProps> = props => {
const { url, rtspUrl } = props;
const canvasRef = useRef<HTMLCanvasElement>();
const playerRef = useRef<Player>();
useEffect(() => {
if (canvasRef.current && url && rtspUrl) {
playerRef.current = new JSMpeg.RTSPPlayer({
url,
params: {
rtspUrl,
scale: '480:-1',
},
canvas: canvasRef.current,
autoplay: true,
poster: 'https://cycjimmy.github.io/staticFiles/images/screenshot/big_buck_bunny_640x360.jpg',
});
}
return () => {
playerRef.current?.destroy();
};
}, [canvasRef]);
return <canvas ref={canvasRef} />;
};
export default RTSPPlayer;