爱收集资源网

每日一题:WebRTC核心内容

网络整理 2023-10-02 04:03

A.webRTC

webRTC是WebReal-TimeCommunication的简写支持浏览器进行实时语音对话或视频对话。可以参考[百度百科]的介绍。()

B.peerjs

peerjs是一个对webRTCAPI的封装,提供简单可配的联接设置,具体可参考其官网。简单介绍一下其使用步骤。webRTC利用中介服务器,仅须要一个用户标示,即可使两个端(peer)构建起专有联接(后续通讯不再须要经过服务器)。

B.1脚本安装

官网上介绍了最便捷的脚本获取方法,通过CDN。

#9:3:9:6:a:3:8:9:8:3:6:6:9:c:e:c:4:a:1:4:4:2:c:0:0:c:8:c:3:6:c:5#

你们也可以依照官网给的下载链接直接下载脚本文件。

B.2创建一个端

当没有指定联接参数时,其默认使用的是该库提供的中介服务器。

#8:e:b:5:8:f:1:f:1:0:5:9:b:5:d:f:b:4:5:2:9:d:1:1:f:0:9:4:c:5:3:f#

C.示例工程helloworldC.1新建页面,引入脚本

#5:f:3:7:e:3:9:5:8:c:b:e:7:3:c:c:0:8:6:f:3:9:8:f:7:8:9:6:4:1:2:b#

页面有一个当与中介服务器联接完善后,更新为自身的id;

一个文本框,用以用户输入须要发送的消息内容;

一个发送按键,用以触发发送动作;

一个

#0:2:d:3:6:4:1:c:f:4:f:4:8:8:9:d:a:4:a:0:8:8:8:9:b:9:2:1:6:f:9:c#

当与中介服务器联接后,获取到当前访问页面的id,并在中显示;

注册error风波,便于我们在发生错误时晓得错误的内容。

开房者(游戏发起方)

#9:7:b:f:6:a:9:6:7:4:c:a:c:b:d:2:a:5:e:3:4:8:3:2:3:f:a:8:8:3:9:c#

联接打开后open,向对方发送一条消息hellofromhoster;

收到消息data更新收到的消息至

#6:2:f:3:b:3:1:5:7:8:4:e:1:c:5:4:f:4:d:7:1:c:b:4:2:0:a:0:b:1:d:6#

通过判断是否指定联接(location.hash)目标判定该页面是卧室的发起方还是加入方。联接完善后向开房者发送Hellofromguest!。打开两个浏览器,在第二个窗口中以#a9wncox5jve00000添加联接目标,两个浏览器之间可以见到如下内容:

#3:2:8:3:0:6:f:6:6:3:e:f:f:1:8:0:a:c:d:1:1:0:3:8:6:1:9:9:7:5:e:8#

screen-shot.png

可以试着通过文本框在两个浏览器窗口之间发送消息。

至此本文的核心内容早已介绍完毕,后续我们会将本文介绍的内容用在游戏中。

D.peerjs-server

假如想自己维护用户登入信息,联接信息之类的状态(用以支持游戏大厅的创建,),我们须要构建自已的联接中介服务,好在该库同时提供了该中介服务的实现,不须要我们再自动编撰该部份的代码,直接集成即可。

D.1安装

因为本节我们仅使用服务功能,因而我全局安装该服务。

#7:5:8:e:d:2:3:e:b:a:5:2:f:7:3:d:7:c:8:9:5:f:5:d:f:c:1:4:8:b:e:3#

D.2启动服务

我们不设置联接key,直接在9000端口启动中介服务。

#9:b:d:6:7:6:8:f:f:c:e:c:a:9:e:c:1:c:7:c:e:c:0:1:a:0:5:8:d:d:1:7#

D.3更改代码使用自己服务

我们仅须要在创建Peer对象时指定中介服务器地址即可:

#7:e:c:e:6:a:4:b:9:7:d:a:e:6:9:b:b:7:4:e:9:3:3:c:9:9:b:3:9:d:7:c#

更多具体的配置也可以参考GitHub中的Readme.md

E.示例E.1代码E.2在线示例

开启两个页面,第一个页启动后,复制该页面的ID,在第二个窗口中的地址后粘贴上该#ID,使第二个窗口作为连接客户构建两个端(窗口)的联接。也可以通过手机(联通网路)浏览器与笔记本进行联接。

目前因为GitHub上的页面是基于https的,而peerjs中介服务使用的是http,浏览器会制止访问混和内容,后续游戏大厅一节,会搭建一个使用https的中介服务,届时该在线事例也会可用。

#f:5:0:c:0:3:d:b:a:f:9:c:a:d:3:9:5:3:b:8:4:3:2:e:9:2:5:3:c:4:a:b#

c 房间服务器框架
上一篇:免费装修软件推荐 下一篇:没有了
相关文章