@flomon-ui/jsmpeg/README.md

Flomon for jsmpeg

# flomon-jsmpeg

Flomon for jsmpeg

## 설치 방법

```sh
npm install --save @flomon-ui/jsmpeg
```

## VanillaJS 코드 예시

```javascript
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 코드 예시

```javascript
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;
```

## RTSP Player 6개

![image](https://user-images.githubusercontent.com/19975642/154651254-ce51bc3c-177b-4e30-828a-f032b9316334.png)

## RTSP 6개 스트리밍시 CPU 사용률 (scale=480:-1, qscale=25)

<img width="317" alt="image" src="https://user-images.githubusercontent.com/19975642/154652122-3cc571d3-fb54-4579-842d-2892b271d6bb.png">