|
|
@@ -7,7 +7,8 @@
|
|
|
<div class="detail">
|
|
|
<div class="top">
|
|
|
<span class="tag">未开播</span>
|
|
|
- 房东的猫livehouse/音乐节
|
|
|
+ <!-- 房东的猫livehouse/音乐节 -->
|
|
|
+ {{ networkStore.rtcMap.get(roomId)?.rtcStatus }}
|
|
|
</div>
|
|
|
<div class="bottom">
|
|
|
<span class="tag">UP 3</span>
|
|
|
@@ -33,7 +34,21 @@
|
|
|
<div class="bottom">关注量：5</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="video"></div>
|
|
|
+ <div class="video-wrap">
|
|
|
+ <video
|
|
|
+ id="localVideo"
|
|
|
+ ref="localVideoRef"
|
|
|
+ autoplay
|
|
|
+ webkit-playsinline="true"
|
|
|
+ playsinline
|
|
|
+ x-webkit-airplay="allow"
|
|
|
+ x5-video-player-type="h5"
|
|
|
+ x5-video-player-fullscreen="true"
|
|
|
+ x5-video-orientation="portraint"
|
|
|
+ :muted="muted"
|
|
|
+ controls
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
<div class="gift">
|
|
|
<div
|
|
|
v-for="(item, index) in giftList"
|
|
|
@@ -84,7 +99,36 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { ref } from 'vue';
|
|
|
+import { onMounted, ref, watch } from 'vue';
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+
|
|
|
+import { liveTypeEnum } from '@/interface';
|
|
|
+import { WebRTCClass } from '@/network/webRtc';
|
|
|
+import {
|
|
|
+ WebSocketClass,
|
|
|
+ WsConnectStatusEnum,
|
|
|
+ WsMsgTypeEnum,
|
|
|
+} from '@/network/webSocket';
|
|
|
+import { useAppStore } from '@/store/app';
|
|
|
+import { useNetworkStore } from '@/store/network';
|
|
|
+
|
|
|
+const networkStore = useNetworkStore();
|
|
|
+
|
|
|
+const roomIdRef = ref<HTMLInputElement>();
|
|
|
+const joinRef = ref<HTMLButtonElement>();
|
|
|
+const leaveRef = ref<HTMLButtonElement>();
|
|
|
+const roomId = ref<string>('19990507');
|
|
|
+const websocketInstant = ref<WebSocketClass>();
|
|
|
+// const userList = ref<{ id: string; rooms: string[] }[]>([]);
|
|
|
+const muted = ref(true);
|
|
|
+const localVideoRef = ref<HTMLVideoElement>();
|
|
|
+const localStream = ref();
|
|
|
+const currType = ref(liveTypeEnum.camera); // 1:摄像头，2:录屏
|
|
|
+const id = ref('');
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+const appStore = useAppStore();
|
|
|
+const isAdmin = ref(route.query.id === '1234');
|
|
|
|
|
|
const giftList = ref([
|
|
|
{ name: '鲜花', ico: '', price: '免费' },
|
|
|
@@ -118,6 +162,304 @@ const userList = ref([
|
|
|
{ nickname: '大鸡腿', avatar: '46326fb26', expr: 100 },
|
|
|
{ nickname: '一杯咖啡', avatar: 'shgd544', expr: 100 },
|
|
|
]);
|
|
|
+
|
|
|
+interface IOffer {
|
|
|
+ socketId: string;
|
|
|
+ roomId: string;
|
|
|
+ data: {
|
|
|
+ sdp: any;
|
|
|
+ };
|
|
|
+ isAdmin: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+interface ICandidate {
|
|
|
+ socketId: string;
|
|
|
+ roomId: string;
|
|
|
+ data: {
|
|
|
+ candidate: string;
|
|
|
+ sdpMid: string | null;
|
|
|
+ sdpMLineIndex: number | null;
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ id.value = route.query.id as string;
|
|
|
+ websocketInstant.value = new WebSocketClass({
|
|
|
+ roomId: roomId.value,
|
|
|
+ url:
|
|
|
+ process.env.NODE_ENV === 'development'
|
|
|
+ ? 'ws://localhost:4300'
|
|
|
+ : 'wss://live.hsslive.cn',
|
|
|
+ isAdmin: isAdmin.value,
|
|
|
+ });
|
|
|
+ websocketInstant.value.update();
|
|
|
+ initReceive();
|
|
|
+ sendJoin();
|
|
|
+ localVideoRef.value?.addEventListener('loadstart', () => {
|
|
|
+ console.warn('视频流-loadstart');
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ rtc.rtcStatus.loadstart = true;
|
|
|
+ rtc.update();
|
|
|
+ });
|
|
|
+
|
|
|
+ localVideoRef.value?.addEventListener('loadedmetadata', () => {
|
|
|
+ console.warn('视频流-loadedmetadata');
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ rtc.rtcStatus.loadedmetadata = true;
|
|
|
+ rtc.update();
|
|
|
+ setTimeout(async () => {
|
|
|
+ if (isAdmin.value) {
|
|
|
+ console.warn('发送管理员正在直播消息');
|
|
|
+ websocketInstant.value?.send({
|
|
|
+ msgType: WsMsgTypeEnum.adminIn,
|
|
|
+ data: { socketId: getSocketId(), roomId: roomId.value },
|
|
|
+ });
|
|
|
+ await sendOffer();
|
|
|
+ }
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+watch(
|
|
|
+ () => appStore.liveStatus,
|
|
|
+ (newVal) => {
|
|
|
+ if (newVal) {
|
|
|
+ console.log('开始直播');
|
|
|
+ join();
|
|
|
+ }
|
|
|
+ }
|
|
|
+);
|
|
|
+
|
|
|
+function getSocketId() {
|
|
|
+ return networkStore.wsMap.get(roomId.value!)?.socketIo?.id;
|
|
|
+}
|
|
|
+
|
|
|
+function sendJoin() {
|
|
|
+ const instance = networkStore.wsMap.get(roomId.value);
|
|
|
+ if (!instance) return;
|
|
|
+ instance.send({ msgType: WsMsgTypeEnum.join, data: {} });
|
|
|
+}
|
|
|
+
|
|
|
+async function join() {
|
|
|
+ console.log('join的房间号', roomId.value);
|
|
|
+ if (!roomId.value) {
|
|
|
+ console.error('房间号不能为空！');
|
|
|
+ alert('房间号不能为空！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (isAdmin.value) {
|
|
|
+ try {
|
|
|
+ if (currType.value === liveTypeEnum.camera) {
|
|
|
+ await startMediaDevices();
|
|
|
+ } else if (currType.value === liveTypeEnum.screen) {
|
|
|
+ await startGetDisplayMedia();
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.log('用户拒绝', error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function initReceive() {
|
|
|
+ const instance = websocketInstant.value;
|
|
|
+ if (!instance?.socketIo) return;
|
|
|
+ // websocket连接成功
|
|
|
+ instance.socketIo.on(WsConnectStatusEnum.connect, () => {
|
|
|
+ console.log('【websocket】websocket连接成功', instance.socketIo?.id);
|
|
|
+ if (!instance) return;
|
|
|
+ instance.status = WsConnectStatusEnum.connect;
|
|
|
+ instance.update();
|
|
|
+ });
|
|
|
+
|
|
|
+ // websocket连接断开
|
|
|
+ instance.socketIo.on(WsConnectStatusEnum.disconnect, () => {
|
|
|
+ console.log('【websocket】websocket连接断开', instance);
|
|
|
+ if (!instance) return;
|
|
|
+ instance.status = WsConnectStatusEnum.disconnect;
|
|
|
+ instance.update();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 当前所有在线用户
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.adminIn, (data) => {
|
|
|
+ console.log('【websocket】收到管理员正在直播', data);
|
|
|
+ sendOffer();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 当前所有在线用户
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.liveUser, (data) => {
|
|
|
+ console.log('【websocket】当前所有在线用户');
|
|
|
+ if (!instance) return;
|
|
|
+ userList.value = data;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 收到offer
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.offer, async (data: IOffer) => {
|
|
|
+ console.warn('【websocket】收到offer', data);
|
|
|
+ if (!instance) return;
|
|
|
+ if (data.socketId !== getSocketId()) {
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ console.log('收到offer，并且这个offer不是我发的', data);
|
|
|
+ await rtc.setRemoteDescription(data.data.sdp);
|
|
|
+ const sdp = await rtc.createAnswer();
|
|
|
+ console.warn('【websocket】发送answer', sdp);
|
|
|
+ websocketInstant.value?.send({
|
|
|
+ msgType: WsMsgTypeEnum.answer,
|
|
|
+ data: { sdp },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('收到offer，并且这个offer是我发的');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 收到answer
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.answer, async (data: IOffer) => {
|
|
|
+ console.warn('【websocket】收到answer', data);
|
|
|
+ if (!instance) return;
|
|
|
+ // if (!networkStore.rtcMap.get(roomId.value)?.rtcStatus.createOffer) return;
|
|
|
+ if (data.socketId !== getSocketId()) {
|
|
|
+ console.log('不是我发的answer');
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ // await rtc.setRemoteDescription(data.data.sdp);
|
|
|
+ // const sdp = await rtc.createAnswer();
|
|
|
+ // console.warn('【websocket】发送answer', sdp);
|
|
|
+ // websocketInstant.value?.send({
|
|
|
+ // msgType: WsMsgTypeEnum.answer,
|
|
|
+ // data: { sdp },
|
|
|
+ // });
|
|
|
+ } else {
|
|
|
+ console.log('是我发的answer');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 收到candidate
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.candidate, (data: ICandidate) => {
|
|
|
+ if (!instance) return;
|
|
|
+ console.warn('【websocket】收到candidate', data);
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ if (data.socketId !== getSocketId()) {
|
|
|
+ console.log('不是我发的candidate');
|
|
|
+ const candidate = new RTCIceCandidate({
|
|
|
+ sdpMid: data.data.sdpMid,
|
|
|
+ sdpMLineIndex: data.data.sdpMLineIndex,
|
|
|
+ candidate: data.data.candidate,
|
|
|
+ });
|
|
|
+ rtc.peerConnection
|
|
|
+ ?.addIceCandidate(candidate)
|
|
|
+ .then(() => {
|
|
|
+ console.log('candidate成功');
|
|
|
+ rtc.rtcStatus.icecandidate = true;
|
|
|
+ rtc.update();
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error('candidate失败', err);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ console.log('是我发的candidate');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 用户加入房间
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.join, (data) => {
|
|
|
+ console.log('【websocket】用户加入房间', data);
|
|
|
+ if (!instance) return;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 用户加入房间
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.joined, (data) => {
|
|
|
+ console.log('【websocket】用户加入房间完成', data);
|
|
|
+ if (!instance) return;
|
|
|
+ console.warn('开始new WebRTCClass');
|
|
|
+ const rtc = new WebRTCClass({ roomId: roomId.value });
|
|
|
+ rtc.rtcStatus.joined = true;
|
|
|
+ rtc.update();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 其他用户加入房间
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.otherJoin, (data) => {
|
|
|
+ console.log('【websocket】其他用户加入房间', data);
|
|
|
+ if (!instance) return;
|
|
|
+ });
|
|
|
+
|
|
|
+ // 用户离开房间
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.leave, (data) => {
|
|
|
+ console.log('【websocket】用户离开房间', data);
|
|
|
+ if (!instance) return;
|
|
|
+ instance.socketIo?.emit(WsMsgTypeEnum.leave, {
|
|
|
+ roomId: instance.roomId,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ // 用户离开房间完成
|
|
|
+ instance.socketIo.on(WsMsgTypeEnum.leaved, (data) => {
|
|
|
+ console.log('【websocket】用户离开房间完成', data);
|
|
|
+ if (!instance) return;
|
|
|
+ instance.close();
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function startMediaDevices() {
|
|
|
+ currType.value = liveTypeEnum.camera;
|
|
|
+ // WARN navigator.mediaDevices在localhost和https才能用，http://192.168.1.103:8000局域网用不了
|
|
|
+ const event = await navigator.mediaDevices.getUserMedia({
|
|
|
+ video: true,
|
|
|
+ audio: true,
|
|
|
+ });
|
|
|
+ console.log('getUserMedia成功', event);
|
|
|
+ if (!localVideoRef.value) return;
|
|
|
+ localVideoRef.value.srcObject = event;
|
|
|
+ localStream.value = event;
|
|
|
+ localStream.value.getTracks().forEach((track) => {
|
|
|
+ networkStore.rtcMap.get(roomId.value)?.addTrack(track, localStream.value);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function startGetDisplayMedia() {
|
|
|
+ currType.value = liveTypeEnum.screen;
|
|
|
+ // WARN navigator.mediaDevices.getDisplayMedia在localhost和https才能用，http://192.168.1.103:8000局域网用不了
|
|
|
+ const event = await navigator.mediaDevices.getDisplayMedia({
|
|
|
+ video: true,
|
|
|
+ audio: true,
|
|
|
+ });
|
|
|
+ console.log('getDisplayMedia成功', event);
|
|
|
+ if (!localVideoRef.value) return;
|
|
|
+ localVideoRef.value.srcObject = event;
|
|
|
+ localStream.value = event;
|
|
|
+ localStream.value.getTracks().forEach((track) => {
|
|
|
+ console.log(track, networkStore.rtcMap.get(roomId.value));
|
|
|
+ networkStore.rtcMap.get(roomId.value)?.addTrack(track, localStream.value);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+async function sendOffer() {
|
|
|
+ if (!websocketInstant.value) return;
|
|
|
+ const rtc = networkStore.rtcMap.get(roomId.value);
|
|
|
+ if (!rtc) return;
|
|
|
+ const sdp = await rtc.createOffer();
|
|
|
+ await rtc.setLocalDescription(sdp);
|
|
|
+ console.warn('【websocket】发送offer', sdp);
|
|
|
+ websocketInstant.value.send({
|
|
|
+ msgType: WsMsgTypeEnum.offer,
|
|
|
+ data: { sdp },
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function leave() {
|
|
|
+ if (joinRef.value && leaveRef.value && roomIdRef.value) {
|
|
|
+ roomIdRef.value.disabled = false;
|
|
|
+ joinRef.value.disabled = false;
|
|
|
+ leaveRef.value.disabled = true;
|
|
|
+ }
|
|
|
+ if (!websocketInstant.value) return;
|
|
|
+ websocketInstant.value.socketIo?.emit(WsMsgTypeEnum.leave, {
|
|
|
+ roomId: websocketInstant.value.roomId,
|
|
|
+ });
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -193,9 +535,13 @@ const userList = ref([
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .video {
|
|
|
+ .video-wrap {
|
|
|
height: 500px;
|
|
|
background-color: #18191c;
|
|
|
+ #localVideo {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.gift {
|
|
|
display: flex;
|
shuisheng