1

I am trying to implement a web site where people will be able through html5 canvas and pubnub to draw and everyone see the other's drawing. So far everything is good, the only thing is that i want people to be able to upload images and then draw on them (of course everyone will be able to see the uploaded images).
From this post here i took the part of the image upload, but when i upload the image it doesn't happen on the other users. Any ideas on how can this be implemented?

Community
  • 1
  • 1
iol
  • 27
  • 1
  • 9
  • If you share a `` then it's just a matter of drawing that image onto the canvas using `ctx.drawImage()`. You then of course need to share this with the others; i.e. tell the clients which image to draw where – Eric Apr 07 '15 at 11:45
  • Seems pretty neat thanks a lot :) – iol Apr 07 '15 at 12:33

2 Answers2

0

Get the PubNub WebRTC SDK - https://github.com/stephenlb/webrtc-sdk

WebRTC Photo Sharing without STUN or TURN

You can easily snap a photo from the video stream and send it to your friends in an instant. You can think of this as an Instagram WebRTC style. Also Photo Sharing works through Corporate Enterprise Firewalls.

WebRTC Camera Photo Sharing Broadcast

phone.snap()

Broadcast your camera photo to all connected sessions. Also get the IMG data as base64 supported format for local display if desired.

phone.ready(function(){
    // Auto Send Camera's Photo to all connected Sessions.
    var photo = phone.snap();
    $('#photo-div').append(photo.image);
});

WebRTC Session Camera Photo Share

session.snap()

Send your camera's latest frame as raw IMG to a specific call session.

phone.ready(function(){
    var session = phone.dial('4321');
    var photo   = session.snap();
    $('#photo-div').append(photo.image);
});
Stephen Blum
  • 6,498
  • 2
  • 34
  • 46
0

You can use it directly :

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    canvas.setAttribute('width', 640);
    canvas.setAttribute('height',400);

    function snapshot() {
    if (localStream) {
    ctx.drawImage(localVideo, 0, 0);         
    var imageData = canvas.toDataURL('image/webp');
    send({snap: imageData});
}
}

At the other end, the HTML should contain an image tag <,image id="img"><,/image>

Javascript :

function messageHandler(data){      // typeof(data) = 'object'
document.querySelector('img').src = data.snap; 

}
Kevin Roy
  • 111
  • 8