Introduction
Good day! At present I needed to stream a GIF picture from canvas to WebRTC, I am unable to present the complete code however I’m pondering of doing a full tutorial sooner or later for my WebRTC sequence.
Libraries used:
What’s Konva?
Konva is an HTML5 Canvas Javascript framework that permits excessive efficiency animations, transitions, node nesting, layering, filtering, caching, occasion dealing with for desktop, and cell purposes and so forth.
What’s a Konva Stage?
In easy phrases a Konva Stage is used as a show that shows layers.
What’s a Konva Layer?
A layer is one thing that may be drawn to.
What’s Gifler?
A library that renders GIF frames to a canvas factor.
Making a fundamental HTML file
The HTML is fairly easy:
<!DOCTYPE html>
<html lang="jp">
<head>
<title>Canvas</title>
<meta charset="utf-8"/>
</head>
<physique>
<button onclick="publish();">Publish</button>
<div id="container"></div>
<script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
<script src="./foremost.js"></script>
</physique>
</html>
The container is div can be used to show the GIF picture.
Subsequent the Javascript half.
Displaying the GIF picture
First I created the Konva stage and the layer in a file known as “foremost.js”.
const stage = new Konva.Stage({
container: 'container',
width: 640,
peak: 480
});
const layer = new Konva.Layer();
stage.add(layer);
As soon as the layer is created it’s added to the stage.
Subsequent was to create the canvas factor and create the “onDrawFrame” perform:
const canvas = doc.createElement('canvas');
const onDrawFrame = (ctx, body) => {
canvas.width = body.width;
canvas.peak = body.peak;
ctx.drawImage(body.buffer, 0, 0);
layer.draw();
};
Then learn the picture and add it to the Konva layer:
gifler('./200.gif').frames(canvas, onDrawFrame);
const picture = new Konva.Picture({
picture: canvas
});
layer.add(picture);
The frames from the GIF file can be processed by way of the “onDrawFrame” perform, which is then drawn to the canvas.
From Canvas to MediaStream
As soon as the Publish button is clicked the next occurs:
const publish = async () => {
attempt {
const mediaStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: true });
const audioTrack = mediaStream.getAudioTracks()[0];
if (!audioTrack) {
alert('no audio');
return;
}
const localCanvas = doc.getElementsByTagName('canvas')[0];
const canvasStream = localCanvas.captureStream(30);
const canvasTrack = canvasStream.getVideoTracks()[0];
if (!canvasTrack) {
alert('did not get video monitor');
return;
}
console.log('bought audio and video tracks');
mediaStream.addTrack(canvasTrack);
// Add the stream to a PeerConnection and so forth.
} catch (error) {
console.error(error);
}
};
The above mainly calls “getUserMedia” to acquire the consumer’s mic solely.
As soon as achieved “captureStream” is named with an argument of 30 FPS, the canvas video monitor is obtained and eventually we add the canvas video monitor to the media stream object.
As soon as achieved you possibly can then stream the media stream object by way of an RTCPeerConnection, which I’ll go over in additional element within the close to future.
Be aware you should utilize the captureStream perform on a canvas displaying something it does not should be a GIF.
Conclusion
At present I discovered about each the Konva and Gifler libraries.
TBH I most likely did not want to make use of Konva and will have most likely achieved the identical with Gifler. 😅
Nevertheless it was an excellent studying expertise. 😃
Like me work? I submit about a wide range of subjects, if you want to see extra please like and observe me.
Additionally I like espresso.
