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

【问题标题】：Passing uploaded image through webrtc - pubnub通过 webrtc 传递上传的图像 - pubnub
【发布时间】：2015-11-02 20:12:49
【问题描述】：

我正在尝试实现一个网站，人们将能够通过 html5 画布和 pubnub 进行绘图，并且每个人都可以看到其他人的绘图。到目前为止一切都很好，唯一的事情是我希望人们能够上传图像然后在它们上面画画（当然每个人都可以看到上传的图像）。
从这篇帖子here我拿了图片上传的一部分，但是当我上传图片时，它不会发生在其他用户身上。关于如何实施的任何想法？

【问题讨论】：

如果您共享<canvas>，那么只需使用ctx.drawImage() 将该图像绘制到画布上即可。那么你当然需要与其他人分享这个；即告诉客户在哪里绘制哪个图像
看起来很整洁非常感谢:)

标签： javascript html canvas pubnub

【解决方案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);
});

【讨论】：

【解决方案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 应该包含一个图像标签

Javascript：

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

}

【讨论】：