/*
|
* @Description: 屏幕分享
|
* @Date: 2022-03-16 10:34:54
|
* @LastEditTime: 2022-04-01 11:57:06
|
*/
|
import TRTC from 'trtc-js-sdk';
|
import LibGenerateTestUserSig from '@/utils/lib-generate-test-usersig.min.js';
|
|
export default {
|
data() {
|
return {
|
shareClient: null,
|
shareLocalStream: null,
|
isShareJoined: false,
|
isSharePublished: false,
|
};
|
},
|
|
computed: {
|
shareUserId() {
|
return `share_${this.userId}`;
|
},
|
shareUserSig() {
|
if (this.sdkAppId && this.secretKey && this.shareUserId) {
|
const generator = new LibGenerateTestUserSig(this.sdkAppId, this.secretKey, 604800);
|
return generator.genTestUserSig(this.shareUserId);
|
}
|
return '';
|
},
|
},
|
|
methods: {
|
// 初始化屏幕分享 client
|
initShareClient() {
|
this.shareClient = TRTC.createClient({
|
mode: 'rtc',
|
sdkAppId: this.sdkAppId,
|
userId: this.shareUserId,
|
userSig: this.shareUserSig,
|
autoSubscribe: false,
|
});
|
this.addSuccessLog(`Client [${this.shareUserId}] created.`);
|
this.handleShareClientEvents();
|
},
|
|
// 初始化屏幕分享 stream
|
async initShareLocalStream() {
|
this.shareLocalStream = TRTC.createStream({
|
screenAudio: false,
|
screen: true,
|
userId: this.shareUserId,
|
});
|
this.shareLocalStream.setScreenProfile('1080p');
|
try {
|
await this.shareLocalStream.initialize();
|
this.addSuccessLog(`ShareStream [${this.shareUserId}] initialized.`);
|
} catch (error) {
|
this.addFailedLog(`ShareStream failed to initialize. Error: ${error.message}}.`);
|
switch (error.name) {
|
case 'NotReadableError':
|
alert('屏幕分享失败，请确保系统允许当前浏览器获取屏幕内容');
|
throw error;
|
case 'NotAllowedError':
|
if (error.message.includes('Permission denied by system')) {
|
alert('屏幕分享失败，请确保系统允许当前浏览器获取屏幕内容');
|
} else {
|
console.log('User refused to share the screen');
|
}
|
throw error;
|
default:
|
return;
|
}
|
}
|
this.handleShareStreamEvents();
|
},
|
|
// 销毁本地屏幕分享流
|
destroyShareLocalStream() {
|
this.shareLocalStream.stop();
|
this.shareLocalStream.close();
|
this.shareLocalStream = null;
|
},
|
|
// 处理屏幕分享 client 进房
|
async handleShareJoin() {
|
if (this.isShareJoined) {
|
console.error('ShareClient has joined');
|
return;
|
}
|
try {
|
await this.shareClient.join({ roomId: this.roomId });
|
this.isShareJoined = true;
|
|
this.addSuccessLog(`ShareClient [${this.shareUserId}] join success.`);
|
} catch (error) {
|
console.log('shareRTC handleJoin error', error);
|
this.addFailedLog(`ShareClient [${this.shareUserId}] join failed. ${error.message}.`);
|
this.reportFailedEvent('startScreenShare', error, 'share');
|
}
|
},
|
|
// 屏幕分享 client 发布屏幕分享流
|
async handleSharePublish() {
|
if (this.isSharePublished) {
|
console.error('ShareClient has published');
|
return;
|
}
|
try {
|
await this.shareClient.publish(this.shareLocalStream);
|
this.isSharePublished = true;
|
|
this.addSuccessLog('ShareStream is published successfully.');
|
this.reportSuccessEvent('startScreenShare', 'share');
|
} catch (error) {
|
this.addFailedLog(`ShareStream is published failed. ${error.message}.`);
|
this.reportFailedEvent('startScreenShare', error, 'share');
|
}
|
},
|
|
async handleShareUnpublish() {
|
if (!this.isSharePublished) {
|
console.error('ShareStream has not published');
|
return;
|
}
|
try {
|
await this.shareClient.unpublish(this.shareLocalStream);
|
this.isSharePublished = false;
|
|
this.addSuccessLog('ShareStream is unpublished successfully.');
|
} catch (error) {
|
console.log(`ShareStream unpublish failed, ${error.message}`);
|
this.addFailedLog(`ShareStream unpublish failed, ${error.message}.`);
|
this.reportFailedEvent('stopScreenShare', error, 'share');
|
}
|
},
|
|
async handleShareLeave() {
|
if (!this.isShareJoined) {
|
console.error('ShareStream has not joined');
|
return;
|
}
|
this.destroyShareLocalStream();
|
try {
|
await this.shareClient.leave();
|
this.isShareJoined = false;
|
|
this.addSuccessLog('ShareClient leave successfully.');
|
this.reportSuccessEvent('stopScreenShare', 'share');
|
} catch (error) {
|
console.log(`ShareClient leave failed, ${error.message}`);
|
this.addFailedLog(`ShareClient leave failed, ${error.message}.`);
|
this.reportFailedEvent('stopScreenShare', error, 'share');
|
}
|
},
|
|
handleShareClientEvents() {
|
this.shareClient.on('error', (error) => {
|
console.error(error);
|
alert(error);
|
});
|
this.shareClient.on('client-banned', (event) => {
|
console.warn(`client has been banned for ${event.reason}`);
|
});
|
},
|
|
handleShareStreamEvents() {
|
this.shareLocalStream.on('player-state-changed', (event) => {
|
console.log(`local stream ${event.type} player is ${event.state}`);
|
});
|
// 当用户通过浏览器自带的按钮停止屏幕分享时，会监听到 screen-sharing-stopped 事件
|
this.shareLocalStream.on('screen-sharing-stopped', async () => {
|
console.log('share stream video track ended.');
|
this.addSuccessLog('ScreenShare is stopped.');
|
await this.handleShareUnpublish();
|
await this.handleShareLeave();
|
});
|
},
|
},
|
};
|
