如何解决Agora Angular 8中的屏幕共享
我正在尝试将Agora集成到Angular 8应用程序中。成功地,我能够加入和退出视频通话,现在我正在尝试整合无法共享的屏幕共享。从Agora官方文档中可以看到屏幕共享的示例,但是Angular不支持AgoraRTC,因为它是一个JS文件。
https://www.npmjs.com/package/angular-agora-rtc
我正在使用这个Angular npm库。
我使用了以下代码
constructor(
private agoraService: NgxAgoraService
) {
// AgoraRTC.createClient({
// mode: 'rtc',// codec: 'vp8'
// })
this.uid = Math.floor(Math.random() * 100);
this.agoraService.createClient({ mode: 'rtc',codec: 'vp8' });
}
ngOnInit() {
this.showImage = true;
}
goLive() {
this.showImage = false;
this.showStopBtn = true;
this.channel_name = ((document.getElementById("channel_name") as HTMLInputElement).value);
console.log("Channel Name = " + this.channel_name);
this.agoraService.client.join(null,this.channel_name,null,(uid) => {
//alert("UID = "+uid)
this.uid = uid;
this.localStream = this.agoraService.createStream({
streamID: uid,audio: true,video: true,screen: false,});
this.localStream.setVideoProfile('4K_3');
this.subscribeToStreams();
});
}
private subscribeToStreams() {
// The user has granted access to the camera and mic.
this.localStream.on(StreamEvent.MediaAccessAllowed,() => {
console.log('accessAllowed');
});
// The user has denied access to the camera and mic.
this.localStream.on(StreamEvent.MediaAccessDenied,() => {
console.log('accessDenied');
});
this.localStream.init(
() => {
console.log('getUserMedia successfully');
this.localStream.play('agora_local');
this.agoraService.client.publish(this.localStream,(err) =>
console.log('Publish local stream error: ' + err)
);
this.agoraService.client.on(ClientEvent.LocalStreamPublished,(evt) =>
console.log('Publish local stream successfully')
);
},(err) => console.log('getUserMedia failed',err)
);
this.agoraService.client.on(ClientEvent.Error,(err) => {
console.log('Got error msg:',err.reason);
if (err.reason === 'DYNAMIC_KEY_TIMEOUT') {
this.agoraService.client.renewChannelKey(
'',() => {
console.log('Renew channel key successfully');
},(err) => {
console.log('Renew channel key failed: ',err);
}
);
}
});
this.agoraService.client.on(ClientEvent.RemoteStreamAdded,(evt) => {
const stream = evt.stream;
this.agoraService.client.subscribe(stream);
});
this.agoraService.client.on(ClientEvent.RemoteStreamSubscribed,(evt) => {
const stream = evt.stream as Stream;
if (!this.remoteCalls.includes(`agora_remote${stream.getId()}`))
this.remoteCalls.push(`agora_remote${stream.getId()}`);
setTimeout(() => stream.play(`agora_remote${stream.getId()}`),1000);
});
this.agoraService.client.on(ClientEvent.RemoteStreamRemoved,(evt) => {
const stream = evt.stream as Stream;
stream.stop();
this.remoteCalls = this.remoteCalls.filter(
(call) => call !== `#agora_remote${stream.getId()}`
);
console.log(`Remote stream is removed ${stream.getId()}`);
});
this.agoraService.client.on(ClientEvent.PeerLeave,(evt) => {
const stream = evt.stream as Stream;
if (stream) {
stream.stop();
this.remoteCalls = this.remoteCalls.filter(
(call) => call === `#agora_remote${stream.getId()}`
);
console.log(`${evt.uid} left from this channel`);
}
});
}
stopLive() {
this.agoraService.client.leave(() => {
console.log("client leaves channel");
},(err) => {
console.log("client leave failed ",err);
//this.toaster.error("Some error occurred while leaving. Please try again!","Failed")
});
this.localStream.stop();
this.localStream.close();
this.showImage = true;
this.showStopBtn = false;
}
initScreenShare() {
this.localStream = this.agoraService.createStream({
streamID: this.uid,audio: false,video: false,screen: true,extensionId: 'minllpmhdgpndnkomcoccfekfegnlikg'
});
this.localStream.setScreenProfile("480p_1");
this.localStream.init(() => {
console.log('init local stream success');
// play stream with html element id "local_stream"
this.localStream.play('video_local');
this.agoraService.client.publish(this.localStream,(err) =>
console.log('Publish local stream error: ' + err)
);
this.agoraService.client.on(ClientEvent.LocalStreamPublished,(evt) =>
console.log('Publish local stream successfully')
);
},err)
);
}
屏幕共享现在可以使用,但其他参与者看不到屏幕(在2个标签中打开)。
谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。