Javascript 使用pubnub和webrtc在画布之间成功传输数据
我正在尝试实现一个小应用程序（例如，为了让我的主应用程序正常工作），当一个画布上的用户单击按钮时，另一个用户的频道号会发生变化，以便与第一个画布上单击按钮的用户相同（这是通过webrtc和pubnub实现的，如下所示！）Javascript 使用pubnub和webrtc在画布之间成功传输数据,javascript,html,canvas,webrtc,pubnub,Javascript,Html,Canvas,Webrtc,Pubnub,我正在尝试实现一个小应用程序（例如，为了让我的主应用程序正常工作），当一个画布上的用户单击按钮时，另一个用户的频道号会发生变化，以便与第一个画布上单击按钮的用户相同（这是通过webrtc和pubnub实现的，如下所示！）问题在于数据从未在对等方之间交换，因此通道从未更改。请帮忙 index.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <
问题在于数据从未在对等方之间交换，因此通道从未更改。请帮忙 index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CoDoodler</title>
<meta name="description" content="Draw">
<meta name="author" content="Tomomi Imura @girlie_mac">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="http://cdn.pubnub.com/pubnub.min.js"></script>
</head>
<body>
<script>var canvas_flag = false;</script>
<header>
<div>
<h1>CoDoodler</h1>
<h2>Doodle with strangers on InterWeb!</h2>
</div>
<div class="bubble">
<span id="occupancy">0</span>
<span id="unit">doodler</span>
</div>
</header>
<section id="main">
<canvas id="drawCanvas" width="300" height="300">Canvas is not supported on this browser!</canvas>
<section id="colorSwatch">
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
</section>
</section>
<footer>
Powered by <a href="http://pubnub.com" target="_blank">PubNub</a><br>
Read the tutorial on <a href="http://pubnub.com/blog/multiuser-draw-html5-canvas-tutorial/" target="_blank">PubNub Blog</a>
</footer>
<a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script>
// For history() demo, please view history.html.
var drawHistory = false;
var number = Math.floor(Math.random()*999+1); //phone variable
var string_number = number.toString();
var pubnub = PUBNUB({
subscribe_key: 'demo', // always required
publish_key: 'demo' // only required if publishing
});
function function1(){
pubnub.publish({
channel: 'canvas_channel2000',
'message' : {
'canvas_channel_number': string_number
},
callback : function(m){console.log(m)}
});
}
function change_the_canvas_channel_(m){
string_number = m.canvas_channel_number;
console.log("tora to kanali egine"+ string_number);
}
pubnub.subscribe({
channel: 'canvas_channel2000',
message: function(m){change_the_canvas_channel_(m)}
error: function (error) {
// Handle error here
console.log(JSON.stringify(error));
}
});
</script>
<button type="button" onclick = "function1()">Submit</button>
<script src="js/test1.js"></script>
</body>
</html>
科多德勒
var canvas_flag=false；
科多德勒
在互联网上与陌生人涂鸦！
0
涂鸦者
此浏览器不支持画布！
由
阅读有关的教程
//对于history（）演示，请查看history.html。
var-drawshistory=false；
var number=Math.floor（Math.random（）*999+1）//电话变量
var string_number=number.toString（）；
var pubnub=pubnub({
订阅密钥：'演示'，//始终需要
publish_key:'demo'//仅在发布时需要
});
函数function1（）{
发布({
频道：“canvas_channel2000”，
'消息'：{
“画布通道编号”：字符串编号
},
回调：函数（m）{console.log（m）}
});
}
功能更改\u画布\u通道（m）{
string_number=m.canvas_channel_number；
日志（“tora to kanali egine”+字符串编号）；
}
publinub.subscribe（{
频道：“canvas_channel2000”，
消息：函数（m）{更改画布通道}
错误：函数（错误）{
//在这里处理错误
log（JSON.stringify（error））；
}
});
提交
(function() {
/* Canvas */
var canvas = document.getElementById('drawCanvas');
var ctx = canvas.getContext('2d');
var color = document.querySelector(':checked').getAttribute('data-color');
canvas.width = 300;
canvas.height = 300;
ctx.strokeStyle = color;
ctx.lineWidth = '3';
ctx.lineCap = ctx.lineJoin = 'round';
/* Mouse and touch events */
document.getElementById('colorSwatch').addEventListener('click', function() {
color = document.querySelector(':checked').getAttribute('data-color');
}, false);
var isTouchSupported = 'ontouchstart' in window;
var isPointerSupported = navigator.pointerEnabled;
var isMSPointerSupported = navigator.msPointerEnabled;
var downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown'));
var moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove'));
var upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup'));
canvas.addEventListener(downEvent, startDraw, false);
canvas.addEventListener(moveEvent, draw, false);
canvas.addEventListener(upEvent, endDraw, false);
/* PubNub */
var pubnub = PUBNUB.init({
publish_key : 'pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5',
subscribe_key : 'sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f',
leave_on_unload : true
});
pubnub.subscribe({
channel: string_number,
callback: drawFromStream,
presence: function(m){
if(m.occupancy > 1){
document.getElementById('unit').textContent = 'doodlers';
}
document.getElementById('occupancy').textContent = m.occupancy;
var p = document.getElementById('occupancy').parentNode;
p.classList.add('anim');
p.addEventListener('transitionend', function(){p.classList.remove('anim');}, false);
}
});
function publish(data) {
pubnub.publish({
channel: string_number,
message: data
});
}
/* Draw on canvas */
function drawOnCanvas(color, plots) {
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(plots[0].x, plots[0].y);
for(var i=1; i<plots.length; i++) {
ctx.lineTo(plots[i].x, plots[i].y);
}
ctx.stroke();
}
function drawFromStream(message) {
if(!message || message.plots.length < 1) return;
drawOnCanvas(message.color, message.plots);
}
// Get Older and Past Drawings!
if(drawHistory) {
pubnub.history({
channel : string_number,
count : 50,
callback : function(messages) {
pubnub.each( messages[0], drawFromStream );
}
});
}
var isActive = false;
var plots = [];
function draw(e) {
e.preventDefault(); // prevent continuous touch event process e.g. scrolling!
if(!isActive) return;
var x = isTouchSupported ? (e.targetTouches[0].pageX - canvas.offsetLeft) : (e.offsetX || e.layerX - canvas.offsetLeft);
var y = isTouchSupported ? (e.targetTouches[0].pageY - canvas.offsetTop) : (e.offsetY || e.layerY - canvas.offsetTop);
plots.push({x: (x << 0), y: (y << 0)}); // round numbers for touch screens
drawOnCanvas(color, plots);
}
function startDraw(e) {
e.preventDefault();
isActive = true;
}
function endDraw(e) {
e.preventDefault();
isActive = false;
publish({
color: color,
plots: plots
});
plots = [];
}
})();
（函数（）{
/*帆布*/
var canvas=document.getElementById（'drawCanvas'）；
var ctx=canvas.getContext（'2d'）；
var color=document.querySelector（':checked'）.getAttribute（'data-color'）；
画布宽度=300；
帆布高度=300；
ctx.strokeStyle=颜色；
ctx.lineWidth='3'；
ctx.lineCap=ctx.lineJoin='round'；
/*鼠标和触摸事件*/
document.getElementById（'colorSwatch'）。addEventListener（'click'，function（）{
color=document.querySelector（':checked'）.getAttribute（'data-color'）；
}，假）；
var isTouchSupported='ontouchstart'在窗口中；
var isPointerSupported=navigator.pointerEnabled；
var isMSPointerSupported=navigator.msPointerEnabled；
var downEvent=isTouchSupported？'touchstart'：（isPointerSupported？'pointerdown'：（isMSPointerSupported？'MSPointerDown'：'mousedown'）；
var moveEvent=isTouchSupported？'touchmove'：（isPointerSupported？'pointermove'：（isMSPointerSupported？'MSPointerMove'：'mousemove'）；
var upEvent=isTouchSupported？'touchend'：（isPointerSupported？'pointerup'：（isMSPointerSupported？'MSPointerUp'：'mouseup'）；
canvas.addEventListener（downEvent、startDraw、false）；
canvas.addEventListener（moveEvent、draw、false）；
addEventListener（upEvent、endDraw、false）；
/*耻骨*/
var pubnub=pubnub.init({
发布密钥：“pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5”，
订阅密钥：“sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f”，
将_保留在_卸载：true
});
订阅({
频道：字符串_编号，
回调：drawFromStream，
存在：功能（m）{
如果（m.占用率>1）{
document.getElementById（'unit'）.textContent='doodler'；
}
document.getElementById（‘占用’）.textContent=m.occulation；
var p=document.getElementById（'占用'）.parentNode；
p、 添加（'anim'）；
p、 addEventListener（'transitionend'，function（）{p.classList.remove（'anim'）；}，false）；
}
});
功能发布（数据）{
发布({
频道：字符串_编号，
信息：数据
});
}
/*在画布上画画*/
函数drawOnCanvas（颜色、绘图）{
ctx.strokeStyle=颜色；
ctx.beginPath（）；
移动到（绘图[0].x，绘图[0].y）；
对于（var i=1；i我看到您没有使用test1.js来发布或订阅，它只是PubNub教程页面中的一个画布代码，所以我忽略js来测试您的代码。
如果你能在发帖前整理一下就好了
不管怎么说，发布和订阅都能正常工作
我修改了您的代码，以便您可以在第二个用户的浏览器窗口中查看订阅发生的时间-
初始化：
请使用您自己的subscribe\u-key
和publish\u-key
密钥，而不是您从教程中复制的密钥！否则，请同时使用“demo”
在发生onclick
事件时，您的应用程序将随机数发布为字符串：
订阅
成功订阅邮件后，您应该可以在浏览器控制台上看到该对象。
上面的代码（删除了一些没有意义的代码，例如订阅中的uuid
）按预期工作
另外，我建议您也使用调试控制台！
我知道您没有使用test1.js来发布或订阅，它只是PubNub教程页面中的一个画布代码，所以我忽略js来测试您的代码。
如果你能在发帖前整理一下就好了
不管怎么说，发布和订阅都能正常工作
var pubnub = PUBNUB({
subscribe_key: 'sub-c-...',
publish_key: 'pub-c-...'
});
pubnub.publish({
channel: 'canvas_channel2000',
'message' : {
'canvas_channel_number': string_number
},
callback : function(m){console.log(m)}
});
pubnub.subscribe({
channel: 'canvas_channel2000',
message: function(m){
console.log(m);
}
});