GIF 이미지를 미디어 스트림으로
10653 단어 webrtcdevjournaljavascripthtml
소개
안녕하세요! 오늘 저는 캔버스에서 WebRTC로 GIF 이미지를 스트리밍해야 했습니다. 전체 코드를 표시할 수는 없지만 향후 WebRTC 시리즈에 대한 전체 자습서를 수행할 생각입니다.
사용한 라이브러리:
콘바란?
Konva는 고성능 애니메이션, 전환, 노드 중첩, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션용 이벤트 처리 등을 가능하게 하는 HTML5 Canvas Javascript 프레임워크입니다.
Konva 스테이지란 무엇입니까?
간단히 말해서 Konva Stage는 레이어를 표시하는 디스플레이로 사용됩니다.
Konva 레이어란 무엇입니까?
레이어는 그릴 수 있는 것입니다.
기플러란?
GIF 프레임을 캔버스 요소로 렌더링하는 라이브러리입니다.
기본 HTML 파일 만들기
HTML은 매우 간단합니다.
<!DOCTYPE html>
<html lang="jp">
<head>
<title>Canvas</title>
<meta charset="utf-8"/>
</head>
<body>
<button onclick="publish();">Publish</button>
<div id="container"></div>
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<script src="https://unpkg.com/[email protected]/gifler.min.js"></script>
<script src="./main.js"></script>
</body>
</html>
컨테이너는 div가 GIF 이미지를 표시하는 데 사용됩니다.
다음은 Javascript 부분입니다.
GIF 이미지 표시
먼저 "main.js"라는 파일에 Konva 스테이지와 레이어를 만들었습니다.
const stage = new Konva.Stage({
container: 'container',
width: 640,
height: 480
});
const layer = new Konva.Layer();
stage.add(layer);
레이어가 생성되면 스테이지에 추가됩니다.
다음은 캔버스 요소를 만들고 "onDrawFrame"함수를 만드는 것입니다.
const canvas = document.createElement('canvas');
const onDrawFrame = (ctx, frame) => {
canvas.width = frame.width;
canvas.height = frame.height;
ctx.drawImage(frame.buffer, 0, 0);
layer.draw();
};
그런 다음 이미지를 읽고 Konva 레이어에 추가합니다.
gifler('./200.gif').frames(canvas, onDrawFrame);
const image = new Konva.Image({
image: canvas
});
layer.add(image);
GIF 파일의 프레임은 "onDrawFrame"기능을 통해 처리된 다음 캔버스에 그려집니다.
캔버스에서 MediaStream으로
게시 버튼을 클릭하면 다음이 발생합니다.
const publish = async () => {
try {
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
const audioTrack = mediaStream.getAudioTracks()[0];
if (!audioTrack) {
alert('no audio');
return;
}
const localCanvas = document.getElementsByTagName('canvas')[0];
const canvasStream = localCanvas.captureStream(30);
const canvasTrack = canvasStream.getVideoTracks()[0];
if (!canvasTrack) {
alert('failed to get video track');
return;
}
console.log('got audio and video tracks');
mediaStream.addTrack(canvasTrack);
// Add the stream to a PeerConnection etc.
} catch (error) {
console.error(error);
}
};
위는 기본적으로 "getUserMedia"를 호출하여 사용자의 마이크만 가져옵니다.
완료되면 "captureStream"이 30FPS의 인수로 호출되고 캔버스 비디오 트랙이 얻어지고 마지막으로 캔버스 비디오 트랙을 미디어 스트림 객체에 추가합니다.
완료되면 RTCPeerConnection을 통해 미디어 스트림 개체를 스트리밍할 수 있습니다. 이에 대해서는 가까운 시일 내에 자세히 살펴보겠습니다.
GIF일 필요가 없는 모든 것을 표시하는 캔버스에서 captureStream 함수를 사용할 수 있습니다.
결론
오늘 저는 Konva와 Gifler 라이브러리에 대해 배웠습니다.
TBH 저는 아마도 Konva를 사용할 필요가 없었고 Gifler로도 똑같이 할 수 있었을 것입니다. 😅
하지만 좋은 학습 경험이었습니다. 😃
내가 일하는 것처럼? 다양한 주제에 대해 포스팅하고 있으니 더 보고 싶으시면 좋아요와 팔로우 부탁드립니다.
또한 저는 커피를 좋아합니다.
Reference
이 문제에 관하여(GIF 이미지를 미디어 스트림으로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/ethand91/gif-image-to-media-stream-1doe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
