通過Webrtc在畫布之間傳遞圖像

-1

我發現了一個類似的問題，但它似乎沒有回答我的問題。我有一個HTML5畫布，我用webrtc使用pubnub。我想要做的就是在畫布之間傳遞我的圖像，像這裏的數據通過http://pubnub.github.io/codoodler/history.html。有任何想法嗎？（請添加一個例子，如果答案可能）通過Webrtc在畫布之間傳遞圖像

! function() { 
    function a(a) { 
     q.publish({ 
      channel: 'mychannel12', 
      message: a 
     }) 
    } 

    function b(a, b) { 
     h.strokeStyle = a, h.beginPath(), h.moveTo(b[0].x, b[0].y); 
     for (var c = 1; c < b.length; c++) h.lineTo(b[c].x, b[c].y); 
     h.stroke() 
    } 

    function c(a) { 
     !a || a.plots.length < 1 || b(a.color, a.plots) 
    } 

    function d(a) { 
     if (a.preventDefault(), r) { 
      var c = j ? a.targetTouches[0].pageX - g.offsetLeft : a.offsetX || a.layerX - g.offsetLeft, 
       d = j ? a.targetTouches[0].pageY - g.offsetTop : a.offsetY || a.layerY - g.offsetTop; 
      s.push({ 
       x: c << 0, 
       y: d << 0 
      }), b(i, s) 
     } 
    } 

    function e(a) { 
     a.preventDefault(), r = !0 
    } 

    function f(b) { 
     b.preventDefault(), r = !1, a({ 
      color: i, 
      plots: s 
     }), s = [] 
    } 
    var g = document.getElementById("drawCanvas"), 
     h = g.getContext("2d"), 
     i = document.querySelector(":checked").getAttribute("data-color"); 
    g.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300), g.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300), h.strokeStyle = i, h.lineWidth = "3", h.lineCap = h.lineJoin = "round", document.getElementById("colorSwatch").addEventListener("click", function() { 
     i = document.querySelector(":checked").getAttribute("data-color") 
    }, !1); 
    var j = "ontouchstart" in window, 
     k = navigator.pointerEnabled, 
     l = navigator.msPointerEnabled, 
     m = j ? "touchstart" : k ? "pointerdown" : l ? "MSPointerDown" : "mousedown", 
     n = j ? "touchmove" : k ? "pointermove" : l ? "MSPointerMove" : "mousemove", 
     o = j ? "touchend" : k ? "pointerup" : l ? "MSPointerUp" : "mouseup"; 
    g.addEventListener(m, e, !1), g.addEventListener(n, d, !1), g.addEventListener(o, f, !1); 
    var p = "draw", 
     q = PUBNUB.init({ 
      publish_key: "pub-c-465c4b3b-0b7d-40de-86c5-10a9433058b5", 
      subscribe_key: "sub-c-43a257e0-d94a-11e4-a2b8-0619f8945a4f", 
      leave_on_unload: !0 
     }); 
    q.subscribe({ 
     channel: 'mychannel12', 
     callback: c, 
     presence: function(a) { 
      a.occupancy > 1 && (document.getElementById("unit").textContent = "doodlers"), document.getElementById("occupancy").textContent = a.occupancy; 
      var b = document.getElementById("occupancy").parentNode; 
      b.classList.add("anim"), b.addEventListener("transitionend", function() { 
       b.classList.remove("anim") 
      }, !1) 
     } 
    }), drawHistory && q.history({ 
     channel: 'mychannel12', 
     count: 50, 
     callback: function(a) { 
      q.each(a[0], c) 
     } 
    }); 
    var r = !1, 
     s = [] 
}();

來源

2015-06-18 daab

歡迎來到SO。請向我們提供您迄今爲止所嘗試的代碼，具體而言是什麼以及哪裏出錯。 –

您可以使用webrtc的RTCDataChannel和and canvas.toDataURL來獲取要傳遞的數據，請確保對數據進行字符串化/解串處理。 – mido

您好，感謝您的快速解答。我一直在使用上面的代碼從一個畫布繪製到另一個畫布，但我還不是很熟悉它（我把它從pubnub中拿出來了）。 – daab

您可以發佈/訂閱的畫布（X，Y）座標數據，就像代碼示例，或通過圖像的URL /路徑，但不是圖像本身。

使用PubNub API的每一個數據，你可以publish的大小是32K <，所以直接傳遞圖像使用PubNub不是一個理想的方式，即使你畫布圖像轉換成一個base64與canvas.toDataURL。它仍然太大。

您可能希望將畫布圖像數據發送到其他地方，如Parse，並傳遞網址。

來源

2015-06-29 21:16:55

通過Webrtc在畫布之間傳遞圖像

回答

相關問題