@flomon-ui/jsmpeg

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;

RTSP Player 6개

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