yjz-web-sdk 1.0.10 → 1.0.11-beta.2

package/src/composables/useRemoteVideo.ts

@@ -1,248 +0,0 @@
-import type {Ref} from 'vue';
-import {computed, onBeforeUnmount, onMounted, ref} from 'vue';
-import {Dimension} from '../components/RemotePlayer/type';
-import {
-    checkDecoderSupport,
-    detectRenderingCapabilities,
-    VideoCodecType
-} from "../util/WasmUtil";
-import DecodeWorker from '../worker/worker.ts?worker&inline';
-
-import {DecoderSupportResult, RendererType} from "../types";
-
-export default function useRemoteVideo(
-    videoContainer: Ref<HTMLElement | null>,
-    remoteVideoElement: Ref<HTMLCanvasElement | null>,
-    audioElement: Ref<HTMLAudioElement | null>,
-    videoAngle: Ref<number>,
-    emit: (event: 'loadedSuccess' | 'loadedFailure', reason?: string) => void
-) {
-    const screenStatus = ref(false);
-    const remoteVideo = ref<Partial<Dimension>>({});
-    const dimensions = ref<Dimension>({ width: 0, height: 0 });
-    const widthRadio = ref(0);
-    const heightRadio = ref(0);
-    const resizeObserver = ref<ResizeObserver | null>(null);
-
-    const renderType = ref<RendererType | null>(null)
-
-    const isRotated = computed(() => videoAngle.value % 180 !== 0);
-    // Worker 相关
-    const worker = ref<Worker | null>(null)
-    const offscreen =  ref<OffscreenCanvas | null>(null)
-    const workerInited = ref(false)
-    const visible = ref<boolean>(true);
-
-    const videoSize = computed(() => {
-        let width: number;
-        let height: number;
-
-        const containerWidth = isRotated.value ? dimensions.value.height : dimensions.value.width;
-        const containerHeight = isRotated.value ? dimensions.value.width : dimensions.value.height;
-
-        const vWidth = remoteVideo.value.width ?? 720;
-        const vHeight = remoteVideo.value.height ?? 1280;
-        const aspect = vWidth / vHeight;
-        const videoHeight = containerWidth / aspect;
-        if (videoHeight > containerHeight) {
-            height = containerHeight;
-            width = height * aspect;
-        } else {
-            width = containerWidth;
-            height = videoHeight;
-        }
-
-        widthRadio.value = vWidth / width;
-        heightRadio.value = vHeight / height;
-
-        return { width, height };
-    });
-    const waitingKeyFrame = ref(true)
-    const checkResult = ref<DecoderSupportResult | null>(null)
-
-    const observeContainer = () => {
-        if (!videoContainer.value) return;
-        resizeObserver.value = new ResizeObserver(([entry]) => {
-            const { width, height } = entry.contentRect;
-            dimensions.value = { width, height };
-        });
-        resizeObserver.value.observe(videoContainer.value);
-    };
-
-    const initVideoContainer = () => {
-        observeContainer();
-        bindVideoEvents()
-    };
-
-    const bindVideoEvents = async () => {
-        const video = remoteVideoElement.value;
-        if (!video) return;
-        checkResult.value = await checkDecoderSupport(VideoCodecType.H264)
-        console.log("checkResult.value====>", checkResult.value)
-        const result = await detectRenderingCapabilities()
-        console.log("detectRenderingCapabilities===>", result)
-        renderType.value = result.best
-        initWorker(video)
-    };
-
-    const initWorker = (video: HTMLCanvasElement) => {
-        if (workerInited.value) return;
-        console.log("initWorker===>");
-        worker.value = new DecodeWorker();
-        const pixelRatio = window.devicePixelRatio || 1;
-        if (!offscreen.value) {
-            offscreen.value = video.transferControlToOffscreen();
-        }
-
-        worker.value.onmessage = (event: MessageEvent) => {
-            const { data } = event;
-            switch (data.type) {
-                case 'decoderError':
-                case 'rendererError':
-                    emit('loadedFailure', data.error)
-                    break
-            }
-        }
-        worker.value.onerror = (event: ErrorEvent) => {
-            console.error('error', event);
-        }
-
-        worker.value?.postMessage({
-            type: 'init',
-            supportH265: checkResult.value?.supported,
-            isHardware: checkResult.value?.hardware,
-            isSoftware: checkResult.value?.software,
-            canvas: offscreen.value,
-            pixelRatio: pixelRatio,
-            renderType: renderType.value
-        }, [offscreen.value])
-        workerInited.value = true;
-    }
-
-    const startDecode = (arrayBuffer: ArrayBuffer) => {
-        handleMessage(arrayBuffer)
-    };
-
-    const handleMessage = (arrayBuffer: ArrayBuffer) => {
-        const data = new Uint8Array(arrayBuffer); // ArrayBuffer -> Uint8Array
-        if (data.length < 4) return;
-
-        // 读取 label 长度（前 4 个字节，Big Endian）
-        const labelLen = (data[0] << 24) | (data[1] << 16) | (data[2] << 8) | data[3];
-        if (data.length < 4 + labelLen) return;
-
-        // 读取 label
-        const labelBytes = data.subarray(4, 4 + labelLen);
-        const label = new TextDecoder().decode(labelBytes);
-
-        // 读取 frame
-        const frame = data.subarray(4 + labelLen); // Uint8Array 视图，底层 buffer 没拷贝
-
-        // 调用回调
-        decodeVideo(label, frame)
-    }
-
-    const decodeVideo = (label: String, data: Uint8Array) => {
-        if(label !== 'key' && !visible){
-            return;
-        }
-        if (label === 'config'){
-            return;
-        }
-        if (waitingKeyFrame.value){
-            if(label === 'delta'){
-                return;
-            }
-            waitingKeyFrame.value = false;
-            emit("loadedSuccess")
-        }
-        worker.value?.postMessage(
-            {
-                type: 'decode',
-                label,
-                data
-            },
-            [data.buffer]
-        );
-    }
-
-    const stopPlay = () => {
-        screenStatus.value = false;
-        waitingKeyFrame.value = true;
-        const audio = audioElement.value;
-        worker.value?.postMessage({type: 'clearRender'});
-        if (audio && audio.srcObject) {
-            const stream = audio.srcObject as MediaStream;
-
-            stream.getTracks().forEach(t => t.stop());
-
-            audio.pause();
-            audio.srcObject = null;
-        }
-    };
-
-    const startPlay = (track: MediaStreamTrack) => {
-        const audio = audioElement.value;
-        if (!audio) return;
-
-        replaceAudioTrack(audio, track);
-        audio.autoplay = true;
-        audio.muted = false;
-        audio.setAttribute('playsinline', 'true');
-        audio.setAttribute('webkit-playsinline', 'true');
-    };
-
-    const replaceAudioTrack = (audioEl: HTMLAudioElement, newTrack: MediaStreamTrack) => {
-        if (!audioEl.srcObject) {
-            audioEl.srcObject = new MediaStream();
-        }
-
-        const stream = audioEl.srcObject as MediaStream;
-        updateTrack(stream, newTrack);
-    };
-
-    const updateTrack = (stream: MediaStream, newTrack: MediaStreamTrack) => {
-        if (newTrack.kind === 'audio') {
-            // 移除旧音频轨
-            stream.getAudioTracks().forEach(oldTrack => {
-                stream.removeTrack(oldTrack);
-                oldTrack.stop();
-            });
-            stream.addTrack(newTrack);
-        }
-    };
-
-    const handleVisibilityChange = () => {
-        visible.value = document.visibilityState === "visible";
-    };
-
-    onMounted(() => {
-        document.addEventListener('visibilitychange', handleVisibilityChange);
-    })
-
-    onBeforeUnmount(async () => {
-        document.removeEventListener('visibilitychange', handleVisibilityChange);
-        if (resizeObserver.value && videoContainer.value) {
-            resizeObserver.value.unobserve(videoContainer.value);
-        }
-        stopPlay();
-        worker.value?.postMessage({type: 'stopDecode'});
-        if(worker.value) {
-            worker.value.terminate()
-        }
-    });
-
-
-    return {
-        videoSize,
-        remoteVideo,
-        dimensions,
-        widthRadio,
-        heightRadio,
-        screenStatus,
-        initVideoContainer,
-        startDecode,
-        stopPlay,
-        startPlay
-    };
-}

package/src/composables/useResizeObserver.ts

@@ -1,27 +0,0 @@
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted } from 'vue'
-import type {Dimension} from "../components/RemotePlayer/type";
-
-export default function useResizeObserver(target: Ref<HTMLElement | null>, dimension: Ref<Dimension>) {
-    let observer: ResizeObserver | null = null
-
-    const init = () => {
-        if (!target.value) return
-
-        observer = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                const { width, height } = entry.contentRect
-                dimension.value = { width, height }
-            }
-        })
-
-        observer.observe(target.value)
-    }
-
-    const destroy = () => {
-        observer?.disconnect()
-    }
-
-    onMounted(init)
-    onUnmounted(destroy)
-}