KensakuKOMATSU/canvas-stream.html

## canvas-stream.html
<!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>
	<!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>