|
@@ -24,7 +24,7 @@
|
|
|
<el-col :span="8" class="btn">
|
|
|
<span @click="shareon"><i class="iconfont iconfenxiang"></i>分享</span>
|
|
|
<span @click="liveon"><i class="iconfont iconshexiangtou"></i>摄像头</span>
|
|
|
- <span><i class="iconfont iconmaikefeng"></i>麦克风</span>
|
|
|
+ <span @click="liveclose">关闭</span>
|
|
|
</el-col>
|
|
|
</div>
|
|
|
</el-col>
|
|
@@ -56,12 +56,14 @@ export default {
|
|
|
data: function() {
|
|
|
return {
|
|
|
client_: '',
|
|
|
+ localStream_: '',
|
|
|
sdkAppId_: '1400380125',
|
|
|
cameras: [],
|
|
|
microphones: [],
|
|
|
cameraId: '',
|
|
|
microphoneId: '',
|
|
|
userId_: '1111',
|
|
|
+ open_: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -89,6 +91,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
async liveon() {
|
|
|
+ this.open_ = true;
|
|
|
console.log('8888--' + this.userId_);
|
|
|
if (this.cameraId === '' || this.microphoneId === '') {
|
|
|
this.$message({
|
|
@@ -98,18 +101,18 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
await this.client_.join({ roomId: this.name, role: 'anchor' });
|
|
|
- const localStream_ = await TRTC.createStream({
|
|
|
+ this.localStream_ = await TRTC.createStream({
|
|
|
audio: true,
|
|
|
video: true,
|
|
|
cameraId: this.cameraId,
|
|
|
microphoneId: this.microphoneId,
|
|
|
userId: this.userId_,
|
|
|
});
|
|
|
- await localStream_.initialize();
|
|
|
+ await this.localStream_.initialize();
|
|
|
console.log('initialize local stream success');
|
|
|
// publish the local stream
|
|
|
- await this.client_.publish(localStream_);
|
|
|
- localStream_.play('main-video');
|
|
|
+ await this.client_.publish(this.localStream_);
|
|
|
+ this.localStream_.play('main-video');
|
|
|
//$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
|
|
|
},
|
|
|
async shareon() {
|
|
@@ -141,6 +144,23 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
+ async liveclose() {
|
|
|
+ // 关闭视频通话
|
|
|
+ console.log(this.open_);
|
|
|
+ if (this.open_) {
|
|
|
+ const videoTrack = this.localStream_.getVideoTrack();
|
|
|
+ if (videoTrack) {
|
|
|
+ this.localStream_.removeTrack(videoTrack).then(() => {
|
|
|
+ console.log('remove video call success');
|
|
|
+ // 关闭摄像头
|
|
|
+ videoTrack.stop();
|
|
|
+ this.client_.unpublish(localStream).then(() => {
|
|
|
+ // 取消发布本地流成功
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
...mapState(['user']),
|