Skip to content

Instantly share code, notes, and snippets.

@KensakuKOMATSU
Created June 10, 2020 01:29
Show Gist options
  • Save KensakuKOMATSU/84678a6231463691b504b03fe29c68ab to your computer and use it in GitHub Desktop.
Save KensakuKOMATSU/84678a6231463691b504b03fe29c68ab to your computer and use it in GitHub Desktop.
canvas capturestream sample
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
</head>
<body>
<button id="enterRoom">enter room</button>
<h2>canvas out</h2>
<div>
<canvas id="c1" />
</div>
<h2>local video</h2>
<div>
<video id="localstream" autoplay />
</div>
<h2>remote video</h2>
<div>
<video id="v1" autoplay />
</div>
</body>
<script>
const APIKEY="YOUR_APIKEY_HERE"
$(function () {
$('button#enterRoom').on('click', async () => {
const canvas = $('canvas#c1')[0];
canvas.width = 160;
canvas.height = 120;
const context = canvas.getContext('2d');
const _draw = _ => {
const imgData = context.createImageData(canvas.width, canvas.height);
for (let i = 0; i < (canvas.width * canvas.height); i++) {
imgData.data[i * 4 + 0] = Math.ceil(Math.random() * 255);
imgData.data[i * 4 + 1] = Math.ceil(Math.random() * 255);
imgData.data[i * 4 + 2] = Math.ceil(Math.random() * 255);
imgData.data[i * 4 + 3] = 255;
}
context.putImageData(imgData, 0, 0);
requestAnimationFrame( _draw )
}
_draw()
const localStream = canvas.captureStream();
const videoElem = $("video#localstream")[0]
videoElem.srcObject = localStream
const peer = new Peer({key: APIKEY, debug: 2});
peer.on('open', () => {
meshRoom = peer.joinRoom('TEST-ROOM', {mode: 'mesh', stream: localStream});
meshRoom.on('stream', stream => {
const video = $('video#v1')[0];
video.srcObject = stream;
});
});
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment