Skip to content

蒋秀川 / miniProject

Go to a project
Switch branch/tag
demo-danmu.html 12.4 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Jessica demo</title>
    <link rel="stylesheet" href="./demo.css">
    <script src="./jquery.js"></script>
    <script src="./danMu.js"></script>
    <script src="./vconsole.js"></script>
    <script src="./jessibuca-pro-demo.js"></script>
    <style>
        .container-shell:before {
            content: "jessibuca demo player";
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div id="container"></div>
        <div class="danmustage"></div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
                <span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
                <span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
                <span id="mseNotSupport"
                      style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
                <span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
                <span id="wcsNotSupport264"
                      style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
                <span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div>
                当前浏览器：
                <span id="wasmSupport" style="color: green;display: none">支持WASM解码；</span>
                <span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码</span>
                <span id="wasmNotSupport" style="color: red;display: none">不支持WASM解码</span>
                <span id="simdNotSupport"
                      style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码</span>
            </div>
        </div>
        <div class="input">
            <div><input
                type="checkbox"
                checked
                id="useMSE"
            /><span>MediaSource</span>
                <input
                    type="checkbox"
                    id="useWCS"
                /><span>Webcodec</span>
                <input
                    type="checkbox"
                    id="useWASM"
                /><span>WASM</span>
                <input
                    type="checkbox"
                    id="useSIMD"
                /><span>WASM(SIMD)</span> <span style="color: green">默认使用wasm解码器</span>
            </div>
        </div>
        <div class="input">
            <span>渲染标签：</span>
            <select id="renderDom" onchange="replay()">
                <option value="video" selected>video</option>
                <option value="canvas">canvas</option>
            </select>

            <span>canvas渲染技术：</span>
            <select id="isUseWebGPU" onchange="replay()">
                <option value="webgl">webgl</option>
                <option value="webgpu" selected>webgpu</option>
            </select>
            <span id="supportWebgpu"></span>
        </div>
        <div class="input">
            <div>
                <span>缓存时长：</span>
                <input placeholder="单位：秒" type="text" id="videoBuffer" style="width: 50px" value="0.2">秒
                <span>缓存延迟(延迟超过会触发丢帧)：</span>
                <input placeholder="单位：秒" type="text" id="videoBufferDelay" style="width: 50px" value="1">秒
                <button id="replay">重播</button>
            </div>
        </div>

        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value=""
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
            <span class="fps-inner"></span>
        </div>
    </div>
</div>

<script src="./demo.js"></script>
<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');
    var $useMSE = document.getElementById('useMSE');
    var $useSIMD = document.getElementById('useSIMD');
    var $useWASM = document.getElementById('useWASM');
    var $useWCS = document.getElementById('useWCS');
    var $videoBuffer = document.getElementById('videoBuffer');
    var $videoBufferDelay = document.getElementById('videoBufferDelay');
    var $replay = document.getElementById('replay');
    var $fps = document.querySelector('.fps-inner');
    var $renderDom = document.getElementById('renderDom');
    var $isUseWebGPU = document.getElementById('isUseWebGPU');

    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    //初始的弹幕数据
    var danmuData = [
        '哈哈哈哈哈哈哈',
        '弹幕来袭~',
        '前面的 你肥皂掉了！！',
        "前方高能，一大波弹幕来袭！",
        "不约，叔叔我们不约~",
        "今天没吃药，感觉自己萌萌哒",
        "走开，让专业的来",
        "23333333333~~~~~",
        "请允许我做一个悲伤的表情",
        "警察叔叔，就是这个人",
        "为什么放弃治疗",
        "放开那个人，让我来",
        "噗……节操去了哪里啊都！！",
        "膜拜老司机",
        "你咋不上天呢",
        "666",
        "666666666666666666666666~~~",
        "放开她，让我来！！！",
        "德里克。。。。test 。。。",
        "666~~~~~~~~~！！！！！",
        "前方高能 非战斗人员紧急撤离",
        "妈妈问我为什么跪着看电脑_(:_」∠)_",
        "他说的好有道理 我竟无言以对",
        '小六 你好靓吖',
        '我基本是只废猫(≥◇≤)',
        '这个是真的耶',
        '弹幕走一波~~~~~~~~~~~~~~~~~~~~~~~~~~',
        '我似乎听到有人说我帅',
        '什么？！你刚才说我帅？',
        '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~我是天空中最亮的星星~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
        '好多人啊',
        '喂，妖妖灵吗，这里有人在装逼。。',
        '对方不想和你说话,并向你扔了一条狗。。。',
        '前面那个说我帅的别走啊啊啊啊',
        '你们玩，我静静地看着',
        '我就静静看着你',
        '超级羞羞',
        '好想你',
        '我想你！',
        '你真帅~',
        '你肚子好大！！',
        '最近变胖了，悲伤'
    ];

    //实例化弹幕
    var dm = new danMu({
        device: 'pc',//m代表移动端弹幕,不设置或设为pc代表pc端弹幕
        stage: $(".danmustage"),
        comments: danmuData,
        danMuHtml: "<span>{comment}</span>",
        colors: ["#fff", "#00ccff", "#ff0000", "#00ff00", "#fef500"],
        flyTime: 7000,
        timeInterval: 1200,
        randomSort: true,
        hSpacing: 0.8,
        direction: 'v'
    });
    dm.pause();

    function create() {
        jessibuca = new JessibucaPro({
            container: $container,
            videoBuffer: Number($videoBuffer.value), // 缓存时长
            videoBufferDelay: Number($videoBufferDelay.value), // 1000s
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            debugLevel: "debug",
            useMSE: $useMSE.checked === true,
            useSIMD: $useSIMD.checked === true,
            useWCS: $useWCS.checked === true,
            showBandwidth: showOperateBtns, // 显示网速
            showPerformance: showOperateBtns, // 显示性能
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
                ptz: showOperateBtns,
                quality: showOperateBtns,
                performance: showOperateBtns,
            },
            timeout: 10000,
            heartTimeoutReplayUseLastFrameShow: true,
            audioEngine: "worklet",
            qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
            heartTimeout: 10,
            ptzClickType: 'mouseDownAndUp',
            ptzZoomShow: true,
            ptzMoreArrowShow: true,
            ptzApertureShow: true,
            ptzFocusShow: true,
            useCanvasRender: $renderDom.value === 'canvas',
            useWebGPU: $isUseWebGPU.value === 'webgpu',
            controlHtml: '<div>我是 <span style="color: red">test</span>文案</div>'
            // audioEngine:"worklet",
            // isFlv: true
        },);


        jessibuca.on('ptz', (arrow) => {
            // console.log('ptz', arrow);
        })

        jessibuca.on('streamQualityChange', (value) => {
            console.log('streamQualityChange', value);
        })

        jessibuca.on('timeUpdate', (value) => {
            // console.log('timeUpdate', value);
        })

        jessibuca.on('stats', (stats) => {
            // console.log('stats', stats);
            $fps.textContent = `FPS: ${stats.fps} DFPS: ${stats.dfps}`
        })


        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
        $fps.textContent = '';
    }


    create();

    function play() {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href);
            $player.style.display = 'none';
            $pause.style.display = 'inline-block';
            $destroy.style.display = 'inline-block';
            dm.play();
        }
    }


    function replay() {
        dm.pause();
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
                play();
            });
        } else {
            create();
            play();
        }
    }

    $replay.addEventListener('click', function () {
        replay();
    })

    $player.addEventListener('click', function () {
        play();
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $fps.textContent = '';
        jessibuca.pause();
        dm.pause();
    })

    $destroy.addEventListener('click', function () {
        dm.pause();
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                create();
            });
        } else {
            create();
        }
    })

    $useMSE.addEventListener('click', function () {
        const checked = $useMSE.checked;
        if (checked) {
            $useSIMD.checked = false
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useSIMD.addEventListener('click', function () {
        const checked = $useSIMD.checked;
        if (checked) {
            $useMSE.checked = false
            $useWCS.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWCS.addEventListener('click', function () {
        const checked = $useWCS.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWASM.checked = false
        }
        replay();
    })

    $useWASM.addEventListener('click', function () {
        const checked = $useWASM.checked;
        if (checked) {
            $useMSE.checked = false
            $useSIMD.checked = false
            $useWCS.checked = false
        }
        replay();
    })

</script>

</body>
</html>