|
|
@@ -1,398 +1,11 @@
|
|
|
<template>
|
|
|
- <div id="app">
|
|
|
- <template v-if="isLogin">
|
|
|
- <video id="v2" autoplay playsinline muted></video>
|
|
|
- <div class="marke">
|
|
|
- <!-- 信号 -->
|
|
|
- <Signal :signalValue="signalValue" />
|
|
|
- <!-- 手柄状态 -->
|
|
|
- <svg viewBox="0 -50 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
|
|
|
- <path
|
|
|
- d="M817.68 803.17a130.23 130.23 0 0 1-125.6-96.37l-14-52.19a54.08 54.08 0 0 0-52.16-40H398.07a54.08 54.08 0 0 0-52.16 40l-14 52.19c-15.54 58-68.21 96.37-125.6 96.37A130 130 0 0 1 80.78 639.51l66.72-249a181.66 181.66 0 0 1 63.19-97.15A177.79 177.79 0 0 1 322 254.58h380a177.79 177.79 0 0 1 111.31 38.79 181.66 181.66 0 0 1 63.19 97.15l66.72 249a130 130 0 0 1-125.54 163.65zM322 274.58A160 160 0 0 0 166.87 395.5v0.13l-66.73 249a110 110 0 0 0 212.5 56.94l14-52.19a74.11 74.11 0 0 1 71.48-54.85h227.81a74.11 74.11 0 0 1 71.48 54.85l14 52.19a110 110 0 0 0 212.5-56.94L857.13 395.5A160 160 0 0 0 702 274.58z"
|
|
|
- :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
|
|
|
- <path
|
|
|
- d="M580 213.86a12 12 0 0 1 12 12v28H432v-28a12 12 0 0 1 12-12h136m0-20H444a32 32 0 0 0-32 32v48h200v-48a32 32 0 0 0-32-32z"
|
|
|
- :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
|
|
|
- <path
|
|
|
- d="M512 213.86a10 10 0 0 1-10-10v-63a60.07 60.07 0 0 1 60-60 10 10 0 0 1 0 20 40 40 0 0 0-40 40v63a10 10 0 0 1-10 10zM330 344.86a90 90 0 1 1-90 90 90.1 90.1 0 0 1 90-90m0-20a110 110 0 1 0 110 110 110 110 0 0 0-110-110z"
|
|
|
- :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
|
|
|
- <path
|
|
|
- d="M330 384.86a50 50 0 1 1-50 50 50.06 50.06 0 0 1 50-50m0-20a70 70 0 1 0 70 70 70 70 0 0 0-70-70zM697 344.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM697 496.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM773 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34zM621 420.86a14 14 0 1 1-14 14 14 14 0 0 1 14-14m0-20a34 34 0 1 0 34 34 34 34 0 0 0-34-34z"
|
|
|
- :fill="contrlState ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"></path>
|
|
|
- </svg>
|
|
|
- <!-- 音频 -->
|
|
|
- <Record @callBack="sendAudio" :audioState="audioState" />
|
|
|
- <!-- 喇叭 -->
|
|
|
- <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="30" height="30">
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M393.707231 292.571429L343.13933 487.619048l46.955908 234.779541-97.523809-45.149912-66.82187-108.359788-21.671958-86.687831 66.82187-113.777778z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M451.499118 509.291005a104.747795 61.40388 90 1 0 122.80776 0 104.747795 61.40388 90 1 0-122.80776 0Z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M426.215168 781.996473c-3.611993 0-7.223986-1.805996-10.835979-3.611993l-117.389771-86.687831c-36.119929-23.477954-65.015873-57.791887-83.075838-99.329806-10.835979-25.283951-16.253968-52.373898-16.253968-81.269841s5.417989-55.985891 16.253968-81.269842c16.253968-41.537919 45.149912-74.045855 83.075838-97.523809l110.165785-77.657848c9.029982-5.417989 19.865961-3.611993 25.28395 3.611993 5.417989 9.029982 3.611993 19.865961-3.611993 25.28395L319.661376 361.199295c-32.507937 19.865961-55.985891 48.761905-70.433863 81.269841-9.029982 21.671958-14.447972 45.149912-14.447972 68.627866 0 23.477954 3.611993 45.149912 12.641976 66.821869 14.447972 34.313933 37.925926 63.209877 68.627866 83.075838l117.38977 86.687831c7.223986 5.417989 9.029982 18.059965 3.611993 25.28395 0 5.417989-5.417989 9.029982-10.835978 9.029983z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M523.738977 830.758377c-108.359788 0-193.241623-140.867725-193.241623-317.855379S415.379189 193.241623 523.738977 193.241623c25.283951 0 50.567901 7.223986 74.045855 23.477954 9.029982 5.417989 10.835979 16.253968 5.41799 25.28395s-16.253968 10.835979-25.283951 5.41799c-18.059965-10.835979-34.313933-18.059965-54.179894-18.059965-84.881834 0-157.121693 130.031746-157.121693 281.73545S438.857143 794.638448 523.738977 794.638448s157.121693-130.031746 157.121693-281.73545c0-74.045855-16.253968-146.285714-46.955908-198.659612-5.417989-9.029982-1.805996-19.865961 7.223986-25.28395 9.029982-5.417989 19.865961-1.805996 25.28395 7.223986 32.507937 59.597884 50.567901 135.449735 50.567902 216.719576C718.786596 689.890653 633.904762 830.758377 523.738977 830.758377z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M523.738977 646.546737c-48.761905 0-86.687831-59.597884-86.687831-133.643739S474.977072 379.259259 523.738977 379.259259s86.687831 59.597884 86.687831 133.643739-37.925926 133.643739-86.687831 133.643739z m0-232.973545c-23.477954 0-50.567901 39.731922-50.567901 97.52381s27.089947 97.52381 50.567901 97.523809 50.567901-39.731922 50.567901-97.523809-27.089947-97.52381-50.567901-97.52381z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M523.738977 413.573192h-1.805996l-92.105821-10.835979c-9.029982-1.805996-16.253968-10.835979-16.253968-19.865961 1.805996-9.029982 10.835979-16.253968 19.865961-16.253968l92.105821 10.835979c9.029982 1.805996 16.253968 10.835979 16.253968 19.865961 0 9.029982-9.029982 16.253968-18.059965 16.253968zM372.035273 662.800705c-9.029982 0-16.253968-7.223986-18.059964-16.253968-1.805996-9.029982 5.417989-18.059965 16.253968-19.865961l153.5097-16.253968c9.029982-1.805996 18.059965 5.417989 19.865961 16.253968 1.805996 9.029982-5.417989 18.059965-16.253968 19.865961l-153.5097 16.253968h-1.805997z">
|
|
|
- </path>
|
|
|
- <path :fill="muted ? '#00CED1' : 'rgba(0, 0, 0, 0.3)'"
|
|
|
- d="M763.936508 364.811287c-5.417989 0-9.029982-1.805996-12.641975-5.417989-7.223986-7.223986-7.223986-18.059965 0-25.283951l25.28395-25.28395c7.223986-7.223986 18.059965-7.223986 25.283951 0s7.223986 18.059965 0 25.28395L776.578483 359.393298c-3.611993 3.611993-9.029982 5.417989-12.641975 5.417989zM771.160494 720.592593c-5.417989 0-9.029982-1.805996-12.641975-5.41799l-25.283951-25.28395c-7.223986-7.223986-7.223986-18.059965 0-25.283951s18.059965-7.223986 25.283951 0l25.28395 25.283951c7.223986 7.223986 7.223986 18.059965 0 25.28395-3.611993 3.611993-7.223986 5.417989-12.641975 5.41799zM819.922399 529.156966h-54.179895c-10.835979 0-18.059965-7.223986-18.059964-18.059964s7.223986-18.059965 18.059964-18.059965h54.179895c10.835979 0 18.059965 7.223986 18.059964 18.059965s-9.029982 18.059965-18.059964 18.059964z">
|
|
|
- </path>
|
|
|
- </svg>
|
|
|
- <!-- 电量 -->
|
|
|
- <Battery :quantity="60" />
|
|
|
- </div>
|
|
|
- <!-- 码数 -->
|
|
|
- <div class="gauge">
|
|
|
- <Gauge :value="SpeedValue" :gears="speed" />
|
|
|
- </div>
|
|
|
- <Loading v-if="showLoading" />
|
|
|
- </template>
|
|
|
- <Login v-else :err="error" @loginBack="login" />
|
|
|
- </div>
|
|
|
+ <div>test</div>
|
|
|
</template>
|
|
|
|
|
|
-<script>
|
|
|
-const { io } = require("socket.io-client");
|
|
|
-import Login from "@/components/login";
|
|
|
-import Loading from "@/components/loading";
|
|
|
-import Record from "@/components/record";
|
|
|
-import Signal from "@/components/signal";
|
|
|
-import Battery from "@/components/battery";
|
|
|
-import Gauge from "@/components/gauge";
|
|
|
-import { Message } from "view-design";
|
|
|
+<script setup lang='ts'>
|
|
|
|
|
|
-const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
|
|
|
-export default {
|
|
|
- components: { Login, Loading, Record, Signal, Battery, Gauge },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- socket: null,
|
|
|
- // HOST: "wss://car.caner.top",
|
|
|
- HOST:'ws://127.0.0.1:10086',
|
|
|
- Peer: null,
|
|
|
- isLogin: false,
|
|
|
- error: "",
|
|
|
- remoteVideo: null,
|
|
|
- showLoading: true,
|
|
|
- contrlState: false,
|
|
|
- audioState: false,
|
|
|
- mutedState: true,
|
|
|
- warnAudio: false,// 鸣笛
|
|
|
- speed: 1, //1低速档 | 2 高速档
|
|
|
- muted: true,// 是否静音
|
|
|
- signalValue: 0,
|
|
|
- SpeedValue: 0,
|
|
|
- iceServers: [
|
|
|
- {
|
|
|
- urls: ["stun:caner.top:3478"],
|
|
|
- },
|
|
|
- {
|
|
|
- urls: "turn:caner.top:3478",
|
|
|
- username: "admin",
|
|
|
- credential: "123456",
|
|
|
- },
|
|
|
- ],
|
|
|
- num: 0
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 网络连接
|
|
|
- intSoketRtc(host) {
|
|
|
- // int socket
|
|
|
- this.socket = io(host, {
|
|
|
- autoConnect: false,
|
|
|
- transports: ["websocket"],
|
|
|
- });
|
|
|
-
|
|
|
- // socket
|
|
|
- this.socket.on("connect", () => {
|
|
|
- try {
|
|
|
- this.isLogin = true;
|
|
|
- // init webrtc
|
|
|
- this.Peer = new RTCPeerConnection({
|
|
|
- iceServers: this.iceServers,
|
|
|
- bundlePolicy: "max-bundle",
|
|
|
- });
|
|
|
-
|
|
|
- // listen state
|
|
|
- this.Peer.onicegatheringstatechange = () => {
|
|
|
- console.log("GatheringState: ", this.Peer.iceGatheringState);
|
|
|
- if (this.Peer.iceGatheringState === "complete") {
|
|
|
- const answer = this.Peer.localDescription;
|
|
|
- this.socket.emit("msg", answer);
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // listen track
|
|
|
- this.Peer.ontrack = async (evt) => {
|
|
|
- console.log("track", evt);
|
|
|
- this.remoteVideo = document.getElementById("v2");
|
|
|
- this.remoteVideo.srcObject = evt.streams[0];
|
|
|
- if (evt.track.kind === 'audio') this.remoteAudioTrak = evt.streams[0]
|
|
|
- };
|
|
|
-
|
|
|
- // listen changestate
|
|
|
- this.Peer.oniceconnectionstatechange = async () => {
|
|
|
- const state = this.Peer.iceConnectionState;
|
|
|
- console.log("ICE状态", state);
|
|
|
- if (
|
|
|
- state === "failed" ||
|
|
|
- state === "disconnected" ||
|
|
|
- state === "closed"
|
|
|
- ) {
|
|
|
- this.close("P2P通信失败");
|
|
|
- }
|
|
|
-
|
|
|
- // ICE连接成功|初始化摇杆
|
|
|
- if (state === "connected") {
|
|
|
- // init Control
|
|
|
- window.addEventListener("gamepadconnected", this.conControl);
|
|
|
- window.addEventListener("gamepaddisconnected", this.disControl);
|
|
|
- await sleep(3000);
|
|
|
- this.showLoading = false;
|
|
|
- }
|
|
|
- };
|
|
|
- } catch (error) {
|
|
|
- this.socket.disconnect();
|
|
|
- this.isLogin = false;
|
|
|
- Message.error({
|
|
|
- content: "webrtc初始化错误" + error,
|
|
|
- duration: 3,
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.socket.on("msg", async (data) => {
|
|
|
- if (data.type === "offer") {
|
|
|
- console.log(data.sdp);
|
|
|
- await this.Peer.setRemoteDescription(data);
|
|
|
- const answer = await this.Peer.createAnswer();
|
|
|
- await this.Peer.setLocalDescription(answer);
|
|
|
- } else if (data.type === "power") {
|
|
|
- console.log("电量", data);
|
|
|
- } else if (data.type === "signal") {
|
|
|
- const v = data.data <= 20 ? Math.floor(data.data / 4) : 5
|
|
|
- this.signalValue = v || 1
|
|
|
- } else if (data.type === 'speed') {
|
|
|
- const v = Math.floor(data.data)
|
|
|
- this.SpeedValue = v
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- this.socket.on("joined", async () =>
|
|
|
- this.socket.emit("msg", { type: "startRTC" })
|
|
|
- );
|
|
|
- this.socket.on("leaved", () => this.close("车端断开"));
|
|
|
- this.socket.on("connect_error", (err) => this.close(err));
|
|
|
- },
|
|
|
-
|
|
|
- // 手柄数据
|
|
|
- ControlData() {
|
|
|
- const data = navigator.getGamepads();
|
|
|
- const db = data[0];
|
|
|
- if (!db) return;
|
|
|
- // 挡位选择AB
|
|
|
- if (db.buttons[1].touched) this.speed = 2;
|
|
|
- if (db.buttons[0].touched) this.speed = 1;
|
|
|
- // 语音按键R2
|
|
|
- this.audioState = db.buttons[7].touched
|
|
|
- // 静音X3
|
|
|
- this.mutedState = db.buttons[3].touched
|
|
|
- // 播放警笛Y2
|
|
|
- this.warnAudio = db.buttons[2].touched
|
|
|
- // console.log(db.buttons);
|
|
|
- const params = {
|
|
|
- v0: Math.floor(db.axes[0] * 128 + 128),
|
|
|
- v1: Math.floor(db.axes[1] * 128 + 128),
|
|
|
- v2: Math.floor(db.axes[2] * 128 + 128),
|
|
|
- v3: this.Gear(this.speed, Math.floor(db.axes[3] * 128 + 128)),
|
|
|
- };
|
|
|
-
|
|
|
- if (this.socket && this.socket.connected) this.socket.emit("msg", { type: "conctrl", conctrl: params });
|
|
|
- requestAnimationFrame(this.ControlData);
|
|
|
- },
|
|
|
-
|
|
|
- // 发送语音
|
|
|
- sendAudio(blob) {
|
|
|
- if (!this.socket && !this.socket.connected) return;
|
|
|
- this.socket.emit("msg", {
|
|
|
- type: "Meadia",
|
|
|
- Meadia: blob,
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- // 挡位
|
|
|
- Gear(speed, num) {
|
|
|
- // 低速档
|
|
|
- if (speed === 1) {
|
|
|
- if (num < 116) {
|
|
|
- // 前
|
|
|
- num = 120;
|
|
|
- } else if (num >= 120 && num <= 131) {
|
|
|
- num = 128;
|
|
|
- } else if (num > 140) {
|
|
|
- // 后
|
|
|
- num = 140;
|
|
|
- }
|
|
|
- }
|
|
|
- // 高速档
|
|
|
- if (speed === 2) {
|
|
|
- if (num < 96) {
|
|
|
- num = 96;
|
|
|
- } else if (num >= 120 && num <= 131) {
|
|
|
- num = 128;
|
|
|
- } else if (num > 160) {
|
|
|
- num = 160;
|
|
|
- }
|
|
|
- }
|
|
|
- return num;
|
|
|
- },
|
|
|
-
|
|
|
- // 登录
|
|
|
- login(data) {
|
|
|
- const socket = new WebSocket(this.HOST+`/${data.roomID}/${data.name}`);
|
|
|
- //连接发生错误的回调方法
|
|
|
- socket.onerror = (event)=> {
|
|
|
- console.log("ws连接错误!");
|
|
|
- };
|
|
|
-
|
|
|
- //连接成功建立的回调方法
|
|
|
- socket.onopen = (event)=> {
|
|
|
- console.log("连接成功!");
|
|
|
- socket.send('test')
|
|
|
- }
|
|
|
-
|
|
|
- //接收到消息的回调方法
|
|
|
- socket.onmessage = (event)=> {
|
|
|
- console.log("收到消息啦:" +event.data);
|
|
|
- }
|
|
|
-
|
|
|
- //连接关闭的回调方法
|
|
|
- socket.onclose = ()=> {
|
|
|
- console.log("连接关闭!");
|
|
|
- }
|
|
|
- // console.log(666,socket);
|
|
|
- },
|
|
|
-
|
|
|
- // 关闭
|
|
|
- close(err) {
|
|
|
- if (this.Peer) this.Peer.close();
|
|
|
- if (this.remoteVideo) this.remoteVideo.srcObject = null;
|
|
|
- this.socket.disconnect();
|
|
|
- this.isLogin = false;
|
|
|
- this.showLoading = false;
|
|
|
- this.error = err || "";
|
|
|
- this.socket = null;
|
|
|
- this.Peer = null
|
|
|
- this.num = 0
|
|
|
- cancelAnimationFrame(this.ControlData);
|
|
|
- window.removeEventListener("gamepadconnected", this.conControl);
|
|
|
- window.removeEventListener("gamepaddisconnected", this.disControl);
|
|
|
- },
|
|
|
-
|
|
|
- // 手柄连接
|
|
|
- conControl() {
|
|
|
- this.contrlState = true;
|
|
|
- this.ControlData();
|
|
|
- },
|
|
|
-
|
|
|
- // 手柄断开连接
|
|
|
- disControl() {
|
|
|
- this.contrlState = false;
|
|
|
- cancelAnimationFrame(this.ControlData);
|
|
|
- },
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.intSoketRtc(this.HOST);
|
|
|
- },
|
|
|
- watch: {
|
|
|
- // 静音
|
|
|
- mutedState(v) {
|
|
|
- if (v) {
|
|
|
- this.num++
|
|
|
- const state = this.num % 2 ? false : true
|
|
|
- this.muted = state
|
|
|
- if (this.socket && this.socket.connected) this.socket.emit("msg", { type: "contrlAudio", contrlAudio: state });
|
|
|
- }
|
|
|
- },
|
|
|
- // 鸣笛
|
|
|
- warnAudio(v) {
|
|
|
- if (v && this.socket && this.socket.connected) this.socket.emit("msg", { type: "warnAudio", warnAudio: v });
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-video,
|
|
|
-#app,
|
|
|
-html,
|
|
|
-body {
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- user-select: none;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- min-width: 1000px;
|
|
|
- min-height: 900px;
|
|
|
-}
|
|
|
-
|
|
|
-video {
|
|
|
- background: none;
|
|
|
- object-fit: fill;
|
|
|
- font-size: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.marke {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- width: 555px;
|
|
|
- height: 30px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- z-index: 1;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-}
|
|
|
-
|
|
|
-.marke::before {
|
|
|
- position: absolute;
|
|
|
- z-index: 0;
|
|
|
- content: "";
|
|
|
- width: 100%;
|
|
|
- height: 0;
|
|
|
- border-top: 30px solid rgba(0, 0, 0, 0.25);
|
|
|
- border-left: 15px solid transparent;
|
|
|
- border-right: 15px solid transparent;
|
|
|
-}
|
|
|
-
|
|
|
-.marke>div {
|
|
|
- margin: 0 3px;
|
|
|
-}
|
|
|
-
|
|
|
-.gauge {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 500px;
|
|
|
- height: 185px;
|
|
|
- z-index: 9;
|
|
|
-}
|
|
|
|
|
|
-/* 隐藏滚动条 */
|
|
|
-::-webkit-scrollbar {
|
|
|
- width: 0 !important;
|
|
|
- display: none;
|
|
|
-}
|
|
|
-</style>
|
|
|
+</style>
|
