This commit is contained in:
yumoqing 2024-08-21 13:44:45 +08:00
parent 8cfa1e1cd7
commit 633289c71d

View File

@ -27,11 +27,12 @@ bricks.RTCClient = class extends bricks.VBox {
} }
*/ */
constructor(opts){ constructor(opts){
opts.width = '100%';
super(opts); super(opts);
this.build_phone(); this.build_head();
this.videobox = new bricks.ResponsableBox({}); this.videobox = new bricks.ResponsableBox({css:'filler'});
this.localVideo = new bricks.VideoBox({}); this.localVideo = new bricks.VideoBox({css:'filler'});
this.remoteVideo = new bricks.VideoBox({}); this.remoteVideo = new bricks.VideoBox({css:'filler'});
this.videobox.add_widget(this.localVideo); this.videobox.add_widget(this.localVideo);
this.videobox.add_widget(this.remoteVideo); this.videobox.add_widget(this.remoteVideo);
this.add_widget(this.videobox); this.add_widget(this.videobox);
@ -43,7 +44,14 @@ bricks.RTCClient = class extends bricks.VBox {
this.socket.onclose = null; this.socket.onclose = null;
this.socket.onerror = null; this.socket.onerror = null;
} }
build_phone(){ build_head(){
var box = new bricks.HBox({height:'50px'});
this.add_widget(box);
this.build_phone(box);
this.peer_w = new bricks.Text({text:''});
box.add_widget(this.peer_w);
}
build_phone(box){
var opts = { var opts = {
states:[ states:[
{ {
@ -58,8 +66,8 @@ bricks.RTCClient = class extends bricks.VBox {
rate:2 rate:2
} }
this.phone = new bricks.StatedIcon(opts); this.phone = new bricks.StatedIcon(opts);
this.add_widget(this.phone);
this.phone.bind('click', this.phone_action.bind(this)); this.phone.bind('click', this.phone_action.bind(this));
box.add_widget(this.phone);
} }
phone_action(){ phone_action(){
if (this.phone.state == 'free'){ if (this.phone.state == 'free'){
@ -135,12 +143,13 @@ bricks.RTCClient = class extends bricks.VBox {
to:peer_info to:peer_info
} }
this.peer_info = peer_info; this.peer_info = peer_info;
this.role = 'requester'; this.role = 'requester';
this.socket.send(JSON.stringify(d)); this.socket.send(JSON.stringify(d));
} }
async send_offer(){ async send_offer(){
var offer = await this.pc.createOffer(); var offer = await this.pc.createOffer();
this.pc.setLocalDescription(offer); await this.pc.setLocalDescription(offer);
console.log('offer =', offer, this.pc.localDescription); console.log('offer =', offer, this.pc.localDescription);
this.socket.send(JSON.stringify({ this.socket.send(JSON.stringify({
type:'offer', type:'offer',
@ -210,9 +219,9 @@ bricks.RTCClient = class extends bricks.VBox {
break; break;
case 'offer': case 'offer':
var offer = new RTCSessionDescription(d.offer); var offer = new RTCSessionDescription(d.offer);
this.pc.setRemoteDescription(offer); await this.pc.setRemoteDescription(offer);
var answer = await this.pc.createAnswer(); var answer = await this.pc.createAnswer();
this.pc.setLocalDescription(answer); await this.pc.setLocalDescription(answer);
console.log('answer=', answer, 'desc=', this.pc.localDescription); console.log('answer=', answer, 'desc=', this.pc.localDescription);
this.socket.send(JSON.stringify({ this.socket.send(JSON.stringify({
type:'answer', type:'answer',
@ -224,14 +233,14 @@ bricks.RTCClient = class extends bricks.VBox {
case 'answer': case 'answer':
if (d.from == self.peer_info){ if (d.from == self.peer_info){
var desc = new RTCSessionDescription(d.answer); var desc = new RTCSessionDescription(d.answer);
this.pc.setRemoteDescription(desc); await this.pc.setRemoteDescription(desc);
}
console.log('answer branch exe'); console.log('answer branch exe');
}
break; break;
case 'iceCandidate': case 'iceCandidate':
if (d.from == self.peer_info){ if (d.from == self.peer_info){
var candidate = new RTCIceCandidate(d.candidate); var candidate = new RTCIceCandidate(d.candidate);
this.pc.addIceCandidate(candidate); await this.pc.addIceCandidate(candidate);
console.log('iceCandidate branch exe'); console.log('iceCandidate branch exe');
} }
break; break;
@ -256,6 +265,7 @@ bricks.RTCClient = class extends bricks.VBox {
// 创建 PeerConnection // 创建 PeerConnection
async createPeerConnection(to_info) { async createPeerConnection(to_info) {
this.phone.set_state('using'); this.phone.set_state('using');
this.peer_w.set_text(to_info.name);
if (! this.localVideo.get_stream()){ if (! this.localVideo.get_stream()){
await this.getLocalStream(); await this.getLocalStream();
} }