theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

直播显示 #65

Merged
theluyuan merged 1 commits from xbx into master 2020-10-22 09:35:52 +08:00
Conversation 0 Commits 1 Files Changed 7 +115 -14
7 changed files with 115 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6bad12dcdf - Show all commits

2
package.json
View File

@ -9,11 +9,13 @@
},
"dependencies": {
"@ant-design-vue/use": "^0.0.1-alpha.6",
"@types/trtc-js-sdk": "^4.3.0",
"ant-design-vue": "^2.0.0-beta.9",
"axios": "^0.20.0",
"core-js": "^3.6.5",
"dayjs": "^1.9.1",
"postcss-pxtorem": "^5.1.1",
"trtc-js-sdk": "^4.6.5",
"vod-js-sdk-v6": "^1.4.10",
"vue": "^3.0.0-0",
"vue-router": "^4.0.0-0",

6
src/components/LivePlaying.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="video">
<video src=""></video>
<div class="video" id="local_stream">
<!-- <video src=""></video> -->
</div>
</template>
<style lang="scss" scoped>
@ -9,7 +9,7 @@
height: 449px;
border-radius: 17px;
background-color: #0f0;
// overflow: hidden;
overflow: hidden;
>video{
width: 100%;
height: 100%;

1
src/components/LiveingWatcher.vue
View File

@ -117,7 +117,6 @@
width: 57px;
height: 57px;
border-radius: 50%;
background-color: #0f0;
}
}
}

3
src/types/index.d.ts vendored
View File

@ -15,9 +15,6 @@ declare module 'axios' {
}
}
// 图片选择
export interface ImgInfo {
file: string;

4
src/types/trtc-js-sdk.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module 'trtc-js-sdk' {
export function createClient(info: any): any
export function createStream(info: any): any
}

103
src/views/regime/Liveing.vue
View File

@ -9,7 +9,7 @@
<div class="top">
<div class="left">直播页面</div>
<div class="right">
<img src="@/static/images/liveshare.png" alt="" />
<img src="@/static/images/liveshare.png" alt="" @click="fenxiang()" />
<img src="@/static/images/liveend.png" alt="" />
</div>
</div>
@ -174,7 +174,6 @@
width: 228px;
height: 132px;
border-radius: 18px;
background: #0f0;
}
.name {
position: absolute;
@ -188,17 +187,107 @@
}
</style>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent, onMounted } from "vue";
import LivePlaying from "@/components/LivePlaying.vue";
import LiveingWatcher from "@/components/LiveingWatcher.vue";
import TRTC from "trtc-js-sdk"
export default defineComponent({
components: {
components: {
LivePlaying,
LiveingWatcher,
},
setup() {
},
setup() {
console.log(1);
},
let client: any;
let localStream: any;
let statie = true;
onMounted(()=>{
init(pingmu);
})
function fenxiang(){
console.log(localStream)
// client.unpublish(localStream).then(() => {
// // 关闭屏幕分享流
// console.log("关闭")
// client.leave().then(() => {
// // leaving room success
// console.log("关闭成功")
// }).catch((error: string) => {
// console.error('leaving room failed: ' + error);
// });
// });
init(statie ? shexiang : pingmu);
statie = !statie;
}
function init(fun: any){
const el = document.querySelector("#local_stream");
if(el){
el.innerHTML = ""
}
client = TRTC.createClient({
mode: 'rtc',
sdkAppId: '1400400340',
userId: 10,
userSig: 'cf1e5db5d230ce6fee3fa23ba779c68a597dd229c11cd9ee315e5ffd6b9bf415'
});
client
.join({ roomId: 11 })
.catch((error: string) => {
console.error('进房失败 ' + error);
})
.then(() => {
console.log('进房成功');
fun()
});
}
function pingmu(){
localStream = TRTC.createStream({ userid: 10, audio: true, screen: true });
localStream
.initialize()
.catch((error: string) => {
console.error('初始化本地流失败 ' + error);
})
.then(() => {
console.log('初始化本地流成功');
client
.publish(localStream)
.catch((error: string) => {
console.error('本地流发布失败 ' + error);
})
.then(() => {
localStream.play('local_stream');
console.log('本地流发布成功');
});
});
}
function shexiang(){
localStream = TRTC.createStream({ userId: 10, audio: true, video: true });
localStream
.initialize()
.catch((error: string) => {
console.error('初始化本地流失败 ' + error);
})
.then(() => {
console.log('初始化本地流成功');
client
.publish(localStream)
.catch((error: string) => {
console.error('本地流发布失败 ' + error);
})
.then(() => {
localStream.play('local_stream');
console.log('本地流发布成功');
});
});
}
return{
fenxiang
}
},
});
</script>

10
yarn.lock
View File

@ -1148,6 +1148,11 @@
resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
"@types/trtc-js-sdk@^4.3.0":
version "4.3.0"
resolved "https://registry.npmjs.org/@types/trtc-js-sdk/-/trtc-js-sdk-4.3.0.tgz#8a3fd551861c25448c62021bbf8529e5061a2994"
integrity sha512-VYTe3dYLbT4hBG2pZQTRuuXketJethmix6ymIT1ExohkAOmOS4kYAuK1HUuG0HpxUWINlIC6vJ2T/RgVFH3c5g==
"@types/uglify-js@*":
version "3.11.0"
resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.11.0.tgz#2868d405cc45cd9dc3069179052103032c33afbc"
@ -9045,6 +9050,11 @@ trim-newlines@^1.0.0:
resolved "https://registry.npm.taobao.org/trim-newlines/download/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
trtc-js-sdk@^4.6.5:
version "4.6.5"
resolved "https://registry.npmjs.org/trtc-js-sdk/-/trtc-js-sdk-4.6.5.tgz#a093ccc9637a17f75403ae5e68ef1f193d513d39"
integrity sha512-ggRHhbGh9t32FKUZIJTIBQEcqT1nCTogpg0nzhUc0BtHuhDy1Gq8HA8f7EztV03Wqny7sbxL4k60IdEB9YY3EQ==
"true-case-path@^1.0.2":
version "1.0.3"
resolved "https://registry.npm.taobao.org/true-case-path/download/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"