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

Passing uploaded image through webrtc - pubnub

本文关键字：webrtc-pubnub 通过      更新时间：2023-09-26

我正在尝试实现一个网站，人们可以通过html5画布和pubnub进行绘制，每个人都可以看到对方的绘制。到目前为止一切都很好，唯一的是我希望人们能够上传图像，然后在上面画画（当然每个人都能看到上传的图像）
在这篇文章中，我承担了图像上传的部分，但当我上传图像时，其他用户不会发生这种情况。关于如何实现这一点，有什么想法吗？

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

WebRTC照片共享无STUN或TURN

您可以轻松地从视频流中拍摄照片立即将其发送给您的朋友。您可以将其视为Instagram WebRTC风格。照片共享也通过企业防火墙工作。

WebRTC相机照片共享广播

phone.snap()

向所有连接的会话广播您的相机照片。同时获取支持base64格式的IMG数据以便在需要时进行本地显示。

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

您可以直接使用它：

    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应该包含图像标签<，image id="img"><图像>

Javascript：

function messageHandler(data){      // typeof(data) = 'object'
document.querySelector('img').src = data.snap; 
}
相关文章：