|
@@ -1,174 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="index">
|
|
|
- <p>直播管理</p>
|
|
|
- <el-button @click="liveon">直播</el-button>
|
|
|
- <el-button @click="shareon">分享</el-button>
|
|
|
- <el-button @click="lookon">观看</el-button>
|
|
|
- <div id="room-root" class="col-div">
|
|
|
- <div id="share-video" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- <div id="main-video" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </div>
|
|
|
- <div id="look-video" class="video-box col-div" style="justify-content: flex-end"></div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { mapState, createNamespacedHelpers } from 'vuex';
|
|
|
-import TRTC from 'trtc-js-sdk';
|
|
|
-export default {
|
|
|
- name: 'index',
|
|
|
- props: {},
|
|
|
- components: {},
|
|
|
- data: function() {
|
|
|
- return {
|
|
|
- client_: null,
|
|
|
- localStream_: null,
|
|
|
- sdkAppId_: '1400380125',
|
|
|
- userId_: 'test1',
|
|
|
- userSig_:
|
|
|
- 'eJw1zMEKgkAUheF3udtC7oxOmdAmqk1FVGrrbG5xGZPJmUSI3j3RWp7vh-OGdHsKGqohARkgjPvNmirPN*7Zk-PiF5w2F2tZQyIixDBGIdVQPD*oUzUTKpZTxEGptVz3rpTEvzq*d7-5ZHTIl6*GVHQ21m2u7rgWbbqST2Kx2y-KLMSiyCoszRw*XweDMRU_',
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.initclient();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- async initclient() {
|
|
|
- this.client_ = TRTC.createClient({
|
|
|
- mode: 'live',
|
|
|
- sdkAppId: this.sdkAppId_,
|
|
|
- userId: this.userId_,
|
|
|
- userSig: this.userSig_,
|
|
|
- });
|
|
|
- },
|
|
|
- async liveon() {
|
|
|
- await this.client_.join({ roomId: 8888, role: 'anchor' });
|
|
|
- const localStream_ = TRTC.createStream({
|
|
|
- audio: true,
|
|
|
- video: true,
|
|
|
- userId: this.userId_,
|
|
|
- });
|
|
|
- await localStream_.initialize();
|
|
|
- console.log('initialize local stream success');
|
|
|
- // publish the local stream
|
|
|
- await this.client_.publish(localStream_);
|
|
|
- localStream_.play('main-video');
|
|
|
- //$('#mask_main').appendTo($('#player_' + this.localStream_.getId()));
|
|
|
- },
|
|
|
- async shareon() {
|
|
|
- const shareId = 'share-userId';
|
|
|
- const shareClient = TRTC.createClient({
|
|
|
- mode: 'videoCall',
|
|
|
- sdkAppId: this.sdkAppId_,
|
|
|
- userId: shareId,
|
|
|
- userSig:
|
|
|
- 'eJwtzMEKgkAUheF3mW0ld8yZVGgRFFFMFFiQ7sS52iUUm9GKondP1OX5DvxfdlaR80TDQuY6wKb9Jo1VQzn1bG*pwVlr0ez0*Ft9T*uaNAu5BzD3gbtieBoqsVMRcBn4HshB8V2T6V0IFwDGChVdXp3i-epVtdEky7DgpV0HR4nSs49FJD9XlSg85Je03G7iJfv9AdKzNAI_',
|
|
|
- });
|
|
|
- shareClient.setDefaultMuteRemoteStreams(true);
|
|
|
- await shareClient.join({ roomId: 8888 });
|
|
|
- const localStream = TRTC.createStream({ audio: false, screen: true });
|
|
|
- await localStream.initialize();
|
|
|
- console.log('initialize share stream success');
|
|
|
- await shareClient.publish(localStream);
|
|
|
- this.client_.on('stream-added', event => {
|
|
|
- const remoteStream = event.stream;
|
|
|
- const remoteUserId = remoteStream.getUserId();
|
|
|
- if (remoteUserId === shareId) {
|
|
|
- // 取消订阅自己的屏幕分享流
|
|
|
- client.unsubscribe(remoteStream);
|
|
|
- } else {
|
|
|
- // 订阅其他一般远端流
|
|
|
- client.subscribe(remoteStream);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- async lookon() {
|
|
|
- const client = TRTC.createClient({
|
|
|
- mode: 'live',
|
|
|
- sdkAppId: this.sdkAppId_,
|
|
|
- userId: 'test2',
|
|
|
- userSig:
|
|
|
- 'eJwtzF0LgjAUxvHvsttCzpZLJ3QTvZBJVCpRd5JHOYzF0CFC9N0T9fL5PfD-sixJvQ4bFjHhAVuOm0r8OKpoZIetE-PRlrqwlkoWcR9gFQIXcnocGRxUKr5WAfBwUuwtNaNLKQBgrlA9dDHpYpOebotqf81Vcdc9xrbzg8fxotXTnA-1Ns126mWz94b9-hIRMTw_',
|
|
|
- });
|
|
|
- await client.join({ roomId: 8888, role: 'anchor' });
|
|
|
- client.on('stream-subscribed', event => {
|
|
|
- const remoteStream = event.stream;
|
|
|
- // 远端流订阅成功,播放远端音视频流
|
|
|
- remoteStream.play('look-video');
|
|
|
- });
|
|
|
- // 监听远端流增加事件
|
|
|
- client.on('stream-added', event => {
|
|
|
- const remoteStream = event.stream;
|
|
|
- // 订阅远端音频和视频流
|
|
|
- client.subscribe(remoteStream, { audio: true, video: true, screen: true }).catch(e => {
|
|
|
- console.error('failed to subscribe remoteStream');
|
|
|
- });
|
|
|
-
|
|
|
- // 仅订阅音频数据
|
|
|
- // client.subscribe(remoteStream, { audio: true, video: false }).catch(e => {
|
|
|
- // console.error('failed to subscribe remoteStream');
|
|
|
- // });
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapState(['user']),
|
|
|
- pageTitle() {
|
|
|
- return `${this.$route.meta.title}`;
|
|
|
- },
|
|
|
- },
|
|
|
- metaInfo() {
|
|
|
- return { title: this.$route.meta.title };
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-#room-root {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- min-width: 1500px;
|
|
|
- min-height: 700px;
|
|
|
- align-items: flex-start;
|
|
|
- background-color: #f0f0f0;
|
|
|
-}
|
|
|
-#main-video {
|
|
|
- float: left;
|
|
|
- width: 32%;
|
|
|
- height: 420px;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
-}
|
|
|
-#share-video {
|
|
|
- float: left;
|
|
|
- width: 40%;
|
|
|
- height: 420px;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
-}
|
|
|
-#look-video {
|
|
|
- width: 80%;
|
|
|
- height: 420px;
|
|
|
- padding: 10px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- grid-area: 1/1/3/4;
|
|
|
-}
|
|
|
-.video-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
-}
|
|
|
-.mask {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: absolute;
|
|
|
- font-size: 14px;
|
|
|
- color: #888888;
|
|
|
- z-index: 9;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-div[id^='player'] {
|
|
|
- background-color: #d8d8d8 !important;
|
|
|
-}
|
|
|
-</style>
|