やりたかったこと
機械学習を簡単に利用できるml5を利用しているとcanvasを使った画面をSkyWayを利用して共有したくなってくる
いきなりソースコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SkyWayでcanvas共有</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
let myColor;
let myCanvas;
let myStream;
function setup() {
myCanvas = createCanvas(480, 320);
myColor = color(random(255), random(255), random(255));
background(myColor);
// skywayのインスタンスを作成
let peer = new Peer({
key: 'SkyWayのAPIキー',
});
// skywayでドメインを許可していれば実行される
peer.on("open", () => {
console.log("open! id=" + peer.id);
createP("Your id: " + peer.id);
});
// id入力タグの生成
let idInput = createInput("");
// 送信ボタンの生成
createButton("Call").mousePressed(() => {
// ボタンが押されたら
const callId = idInput.value(); //id入力欄の値を取得
console.log("call! id=" + peer.id);
const call = peer.call(callId, myStream); //id先を呼び出し
setEventListener(call);
});
// // 相手から呼び出された実行される
peer.on("call", (call) => {
console.log("be called!");
call.answer(myStream); //呼び出し相手に対して返す
setEventListener(call);
});
// 相手の映像を追加処理
function setEventListener(call) {
call.on("stream", (theirStream) => {
console.log("stream!");
let theirVideo = createVideo();
// theirVideo.parent("#video-area");
theirVideo.elt.autoplay = true;
theirVideo.elt.srcObject = theirStream;
});
}
}
function draw() {
if (mouseIsPressed) {
ellipse(mouseX, mouseY, 10, 10);
}
}
let isFirstClick = true;
function mousePressed() {
if (isFirstClick) {
// 画面をマウスクリックした後じゃないと実行できない
myStream = myCanvas.elt.captureStream(frameRate()); // 60
isFirstClick = false;
}
}
大事なとこ、詰まったとこは
let isFirstClick = true;
function mousePressed() {
if (isFirstClick) {
// 画面をマウスクリックした後じゃないと実行できない
myStream = myCanvas.elt.captureStream(frameRate()); // 60
isFirstClick = false;
}
}
なぜか 画面をマウスクリックした後じゃないと実行できない でした。
結果
マウスで描いたcanvasの内容を共有してます！
機械学習と合わせて
透過背景を写真やループ画像に飽きた人は是非canvasを透過背景にしてみてください！
ソースコードはGitHubにありますので是非御覧ください