通过webrtc传递上传的图像 - pubnub

Question

我正在尝试实现一个网站，人们可以通过html5 canvas和pubnub绘制，每个人都可以看到其他人的绘图。到目前为止一切都很好，唯一的一点是我希望人们能够上传图像然后在上面绘图（当然每个人都能看到上传的图像）。
从这篇文章{{3}我拍摄了图像上传的一部分，但是当我上传图片时，它并没有发生在其他用户身上。关于如何实施的任何想法？

Answer 1

  

获取PubNub WebRTC SDK - https://github.com/stephenlb/webrtc-sdk

WebRTC照片共享没有STUN或TURN

您可以轻松地从视频流中捕捉照片 马上把它发给你的朋友。 您可以将其视为 Instagram WebRTC 风格。 照片共享也通过企业企业防火墙工作。

WebRTC相机照片共享广播

phone.snap()

  

将相机照片广播到所有连接的会话。   还可以将IMG数据作为base64支持的格式   如果需要，可以进行本地显示。

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

WebRTC会话相机照片共享

session.snap()

  

将相机的最新相框作为原始IMG发送至   特定的电话会议。

phone.ready(function(){
    var session = phone.dial('4321');
    var photo   = session.snap();
    $('#photo-div').append(photo.image);
});

Answer 2

您可以直接使用它：

    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});
}
}

另一方面，HTML应包含图片代码＆lt;，image id =“img”＆gt;＆lt;，/ image＆gt;

Javascript：

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

}