danmu.js

// ==UserScript==
// @name      bilibili vtb直播同传man字幕显示
// @version   202210431
// @description ！！！
// @author    siro
// @match     http://live.bilibili.com/*
// @match     https://live.bilibili.com/*
// @require      https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js
// @require  https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.10/pako.min.js
// @namespace http://www.xiaosiro.cn
// @grant     unsafeWindow
// @run-at document-idle
// ==/UserScript==

//脚本多次加载这可能是因为目标页面正在加载帧或iframe。
//
//将这下行添加到脚本代码部分的顶部：
if (window.top != window.self)  //-- Don't run on frames or iframes
    return;

var room_id = 22129083;//默认房间号
var uid = 0;
var url;
var mytoken;
var port;
var rawHeaderLen = 16;
var packetOffset = 0;
var headerOffset = 4;
var verOffset = 6;
var opOffset = 8;
var seqOffset = 12;
var socket;
var utf8decoder = new TextDecoder();
var f = 0; //不知道为什么会建立两次连接，用这个标记一下。
var zimuBottom = 40;//修改此数值改变字幕距底部的高度
var zimuColor = "#FFFFFF";//修改此处改变字幕颜色
var zimuFontSize = 25;//修改此处改变字体大小
var zimuShadow = 1;//启动弹幕阴影
var zimuShadowColor = "#66CCFF"// 弹幕阴影颜色
var deltime = 3000;//字幕存在时间
var IsSikiName = 0;// 1为启动同传man过滤 0为不启动，默认不启动
//如果要启动同传man过滤，启动后需要修改SikiName里括号里的内容
//如SikiName=["斋藤飞鳥Offcial","小明1","小明2"],则只会显示名字为，斋藤飞鳥Offcial，小明1，小明2的同传
//此变量为字符串数字，元素为字符串变量，元素内容由 , 分隔(不是中文下的 ，)
var SikiName = ["白峰さやか"];
var isSpecialRoom = false;
var isTop = false;// 默认生成在底部；
if (!document.getElementById("live-player-ctnr")) {
    console.log('特殊主题直播间，20s后执行脚本');
    isSpecialRoom = true;
    zimuBottom = zimuBottom + 150;
    setTimeout(() => myCode(), 20000);
} else {
    myCode();
}

function myCode() {
    console.log("开始执行脚本");
    // 创建页面字幕元素
    var danmudiv = $('<div></div>');
    danmudiv.attr('id', 'danmu');
    var danmudivwidth;
    if ($("#live-player-ctnr")) {
        danmudivwidth = $("#live-player-ctnr").width();
    } else {
        danmudivwidth = "900px";
    }
    console.log(danmudivwidth);
    danmudiv.css({
        "min-width": "100px",
        "width": "100%",
        "magin": "0 auto",
        "position": "absolute",
        "left": "0px",
        "bottom": zimuBottom + "px",
        "z-index": "14",
        "color": zimuColor,
        "font-size": zimuFontSize + "px",
        "text-align": "center",
        "font-weight": "bold",
        "pointer-events": "none",
        "text-shadow": "0 0 0.2em #F87, 0 0 0.2em #F87",
    });

    if (isTop) {
        danmudiv.css("bottom", "");
        danmudiv.css("top", zimuBottom + "px");
    }

    if (!document.getElementById("live-player-ctnr")) {
        console.log('主页面无此元素,尝试注入父div...');//player-ctnr

        //$("iframe:eq(1)").attr('id','danmulive')
        console.log();
        danmudiv.appendTo($("#player-ctnr"));
    } else {
        danmudiv.appendTo($("#live-player-ctnr"));
    }


    // 创建控制面板
    var danmuControldiv = $('<div>字幕设置</div>');
    danmuControldiv.attr('id', 'danmuControldiv');
    danmuControldiv.css({
        "height": "60px",
        "top": "100px",
        "left": "0",
        "width": "16px",
        "z-index": "999998",
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "center",
        "align-items": "center",
        "position": "fixed",
        "transform": "translateY(-50%)",
        "background": "#FFF",
        "border-radius": "2px",
    });
    danmuControldiv.appendTo($("body"));
    var danmuControlBody = $(`<div id="danmuControlBody" style="flex-direction:column;position: fixed;top: 100px;left: 0;width: 16px;z-index: 999999;display: none;padding: 5px;border-radius: 5px;border: 1px solid #0AADFF;width: 300px;background-color: #FFF;">
        <label>字体大小:</label><input type="number">px<br>
        <label>字幕颜色:</label><input type="color"><br>
        <label>字幕高度:</label><input type="number">px<br>
        <label>字幕阴影:</label><input type="checkbox"><br>
        <label>字幕阴影颜色:</label><input type="color"><br>
        <label>字幕显示在顶部:</label><input type="checkbox"><br>
        <div style="margin:0 auto;width: 120px;margin-top: 5px;">
            <input id="danmuControlOK" type="button" value="确定">&nbsp;&nbsp;&nbsp;&nbsp;<input id="danmuControlOld" type="button" value="默认">
        </div>
        <div id="closeDiv" style="background-color: red;color: seashell;position: absolute;top: 3px;right: 3px;width: 15px;height: 15px;line-height: 15px;text-align: center;cursor: pointer;">x</div>
    </div>`);
    function upDanmudiv() {
        danmudiv.css({
            "bottom": zimuBottom + "px",
            "color": zimuColor,
            "font-size": zimuFontSize + "px",
            "z-index": "999999",
        });
        if (zimuShadow == 1) {
            danmudiv.css({
                "text-shadow": "0 0 0.2em " + zimuShadowColor + ", 0 0 0.2em " + zimuShadowColor,
            });
        } else {
            danmudiv.css({
                "text-shadow": "0 0 0",
            });
        }

        if (isTop) {
            danmudiv.css("bottom", "");
            danmudiv.css("top", zimuBottom + "px");
        } else {
            danmudiv.css("bottom", zimuBottom + "px");
        }
    }
    function bindDanmuDate() {
        var inputs = $("#danmuControlBody").children("input");
        inputs[0].value = zimuFontSize;
        inputs[1].value = zimuColor;
        if (isSpecialRoom) {
            inputs[2].value = zimuBottom - 150;
        } else {
            inputs[2].value = zimuBottom;
        }
        inputs[3].checked = (zimuShadow == 0 ? false : true);
        inputs[4].value = zimuShadowColor;
        inputs[5].value = (isTop == 0 ? false : true);
    }
    function saveDanmuDate() {
        var inputs = $("#danmuControlBody").children("input");
        zimuFontSize = inputs[0].value;
        zimuColor = inputs[1].value;
        if (isSpecialRoom) {
            zimuBottom = inputs[2].value;
            zimuBottom += 150;
        } else {
            zimuBottom = inputs[2].value;
        }
        zimuShadow = (inputs[3].checked ? 1 : 0);
        zimuShadowColor = inputs[4].value;
        isTop = (inputs[5].checked ? 1 : 0);
        upDanmudiv();
    }
    danmuControlBody.appendTo($("body"));
    $("#danmuControldiv").on('click', function () {
        $("#danmuControlBody").css("display", "flex");
        bindDanmuDate();
    }
    );
    $("#closeDiv").on('click', function () {
        $("#danmuControlBody").css("display", "none");
    }
    );
    $("#danmuControlOK").on('click', function () {
        saveDanmuDate();
    }
    );
    $("#danmuControlOld").on('click', function () {
        zimuBottom = 40;//修改此数值改变字幕距底部的高度
        zimuColor = "#FF0000";//修改此处改变字幕颜色
        zimuFontSize = 25;//修改此处改变字体大小
        zimuShadow = 1;//启动弹幕阴影
        zimuShadowColor = "#000F87"// 弹幕阴影颜色
        upDanmudiv();
    }
    );

    //获取当前房间编号
    var UR = document.location.toString();
    var arrUrl = UR.split("//");
    var start = arrUrl[1].indexOf("/");
    var relUrl = arrUrl[1].substring(start + 1);//stop省略，截取从start开始到结尾的所有字符
    if (relUrl.indexOf("?") != -1) {
        relUrl = relUrl.split("?")[0];
    }
    room_id = parseInt(relUrl);

    //获取你的uid
    $.ajax({
        url: 'https://api.live.bilibili.com/xlive/web-ucenter/user/get_user_info',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            //console.log(data.data);
            uid = data.data.uid;
            //console.log(uid);
        },
        xhrFields: {
            withCredentials: true // 这里设置了withCredentials
        },
    });
    //获取真实房间号
    $.ajax({
        url: '//api.live.bilibili.com/room/v1/Room/room_init?id=' + room_id,
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            room_id = data.data.room_id;

        }
    });
    //获取弹幕连接和token
    $.ajax({
        url: '//api.live.bilibili.com/room/v1/Danmu/getConf?room_id=' + room_id + '&platform=pc&player=web',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            url = data.data.host_server_list[1].host;
            port = data.data.host_server_list[1].wss_port;
            mytoken = data.data.token;
            DanmuSocket();
        },
        xhrFields: { withCredentials: true }
    })
    // 蜜汁字符转换
    function txtEncoder(str) {
        var buf = new ArrayBuffer(str.length);
        var bufView = new Uint8Array(buf);
        for (var i = 0, strlen = str.length; i < strlen; i++) {
            bufView[i] = str.charCodeAt(i);
        }
        return bufView;
    }
    // 合并
    function mergeArrayBuffer(ab1, ab2) {
        var u81 = new Uint8Array(ab1),
            u82 = new Uint8Array(ab2),
            res = new Uint8Array(ab1.byteLength + ab2.byteLength);
        res.set(u81, 0);
        res.set(u82, ab1.byteLength);
        return res.buffer;
    }

    //发送心跳包
    function heartBeat() {
        var headerBuf = new ArrayBuffer(rawHeaderLen);
        var headerView = new DataView(headerBuf, 0);
        var ob = "[object Object]";
        var bodyBuf = txtEncoder(ob);
        headerView.setInt32(packetOffset, rawHeaderLen + bodyBuf.byteLength);
        headerView.setInt16(headerOffset, rawHeaderLen);
        headerView.setInt16(verOffset, 1);
        headerView.setInt32(opOffset, 2);
        headerView.setInt32(seqOffset, 1);
        //console.log('发送信条');
        socket.send(mergeArrayBuffer(headerBuf, bodyBuf));
    };
    // 导入css

    var style = document.createElement("style");
    style.type = "text/css";
    var text = document.createTextNode(`#danmu .message {
        transition: height 0.2s ease-in-out, margin 0.2s ease-in-out;
    }

    #danmu .message .text {
        text-align:center;
        font-weight: bold;
        pointer-events:none;
    }

    @keyframes message-move-in {
        0% {
            opacity: 0;
            transform: translateY(100%);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #danmu .message.move-in {
        animation: message-move-in 0.3s ease-in-out;
    }


    @keyframes message-move-out {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(-100%);
        }
    }
    #danmu .message.move-out {
        animation: message-move-out 0.3s ease-in-out;
        animation-fill-mode: forwards;
    }`
    );
    style.appendChild(text);
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);

    // 消息渲染器
    class Message {
        //构造函数
        constructor() {
            const containerId = 'danmu';
            this.containerEl = document.getElementById(containerId);
        }

        show({ text = '', duration = 2000 }) {
            // 创建一个Element对象
            let messageEl = document.createElement('div');
            // 设置消息class，这里加上move-in可以直接看到弹出效果
            messageEl.className = 'message move-in';
            // 消息内部html字符串
            messageEl.innerHTML = `
                <div class="text">${text}</div>
            `;
            // 追加到message-container末尾
            // this.containerEl属性是我们在构造函数中创建的message-container容器
            this.containerEl.appendChild(messageEl);

            // 用setTimeout来做一个定时器
            setTimeout(() => {
                // 首先把move-in这个弹出动画类给移除掉，要不然会有问题，可以自己测试下
                messageEl.className = messageEl.className.replace('move-in', '');
                // 增加一个move-out类
                messageEl.className += 'move-out';

                // move-out动画结束后把元素的高度和边距都设置为0
                // 由于我们在css中设置了transition属性，所以会有一个过渡动画
                messageEl.addEventListener('animationend', () => {
                    messageEl.setAttribute('style', 'height: 0; margin: 0');
                });

                // 这个地方是监听动画结束事件，在动画结束后把消息从dom树中移除。
                // 如果你是在增加move-out后直接调用messageEl.remove，那么你不会看到任何动画效果
                //messageEl.addEventListener('transitionend', () => {
                //    // Element对象内部有一个remove方法，调用之后可以将该元素从dom树种移除！
                //    messageEl.remove();
                //});
                // 以上方法似乎无效，所以用一个定时器来完成
                setTimeout(() => {
                    messageEl.remove();
                }, duration + 10000);
            }, duration);
        }

    }

    const message = new Message();


    //数据包解析 感谢https://github.com/lovelyyoshino/Bilibili-Live-API/blob/master/API.WebSocket.md
    const textEncoder = new TextEncoder('utf-8');
    const textDecoder = new TextDecoder('utf-8');

    const readInt = function (buffer, start, len) {
        let result = 0
        for (let i = len - 1; i >= 0; i--) {
            result += Math.pow(256, len - i - 1) * buffer[start + i]
        }
        return result
    }

    const writeInt = function (buffer, start, len, value) {
        let i = 0
        while (i < len) {
            buffer[start + i] = value / Math.pow(256, len - i - 1)
            i++
        }
    }

    function encode(str, op) {
        let data = textEncoder.encode(str);
        let packetLen = 16 + data.byteLength;
        let header = [0, 0, 0, 0, 0, 16, 0, 1, 0, 0, 0, op, 0, 0, 0, 1]
        writeInt(header, 0, 4, packetLen)
        return (new Uint8Array(header.concat(...data))).buffer
    }
    function decode(blob) {
        let buffer = new Uint8Array(blob)
        let result = {}
        result.packetLen = readInt(buffer, 0, 4)
        result.headerLen = readInt(buffer, 4, 2)
        result.ver = readInt(buffer, 6, 2)
        result.op = readInt(buffer, 8, 4)
        result.seq = readInt(buffer, 12, 4)
        if (result.op === 5) {
            result.body = []
            let offset = 0;
            while (offset < buffer.length) {
                let packetLen = readInt(buffer, offset + 0, 4)
                let headerLen = 16// readInt(buffer,offset + 4,4)
                if (result.ver == 2) {
                    let data = buffer.slice(offset + headerLen, offset + packetLen);
                    let newBuffer = pako.inflate(new Uint8Array(data));
                    const obj = decode(newBuffer);
                    const body = obj.body;
                    result.body = result.body.concat(body);
                } else {
                    let data = buffer.slice(offset + headerLen, offset + packetLen);
                    let body = textDecoder.decode(data);
                    if (body) {
                        result.body.push(JSON.parse(body));
                    }
                }
                offset += packetLen;
            }
        } else if (result.op === 3) {
            result.body = {
                count: readInt(buffer, 16, 4)
            };
        }
        return result;
    }

    // socket连接
    function DanmuSocket() {
        var ws = 'wss';
        if (f) {
            return;
        }
        socket = new WebSocket(ws + '://' + url + ':' + port + '/sub');
        f = 1;
        socket.binaryType = 'arraybuffer';

        // Connection opened
        socket.addEventListener('open', function (event) {
            console.log('Danmu WebSocket Server Connected.');
            console.log('Handshaking...');
            var token = JSON.stringify({
                'uid': uid,
                'roomid': room_id,
                'key': mytoken,
                'protover': 1,
            });
            var headerBuf = new ArrayBuffer(rawHeaderLen);
            var headerView = new DataView(headerBuf, 0);
            var bodyBuf = txtEncoder(token);
            headerView.setInt32(packetOffset, rawHeaderLen + bodyBuf.byteLength);
            headerView.setInt16(headerOffset, rawHeaderLen);
            headerView.setInt16(verOffset, 1);
            headerView.setInt32(opOffset, 7);
            headerView.setInt32(seqOffset, 1);
            socket.send(mergeArrayBuffer(headerBuf, bodyBuf));
            // heartBeat();
            var Id = setInterval(function () {
                heartBeat();
            }, 30 * 1000);
        });

        socket.addEventListener('error', function (event) {
            console.log('WebSocket 错误: ', event);
            socket.close();
            f = 0;
            console.log('WebSocket 重连 ');
            DanmuSocket();
        });

        socket.addEventListener('close', function (event) {
            console.log('WebSocket 关闭 ');
            f = 0;
            sleep(5000);
            console.log('WebSocket 重连 ');
            DanmuSocket();
        });

        // Listen for messages
        socket.addEventListener('message', function (msgEvent) {
            const packet = decode(msgEvent.data);
            switch (packet.op) {
                case 8:
                    //console.log('加入房间');
                    break;
                case 3:
                    //console.log(`人气`);
                    break;
                case 5:
                    packet.body.forEach((body) => {
                        switch (body.cmd) {
                            case 'DANMU_MSG':
                                var tongchuan = body.info[1];
                                var manName = body.info[2][1];
                                //message.show({
                                //         text: tongchuan,
                                //           duration: deltime,
                                //        });
                                if (tongchuan.indexOf("【") != -1) {
                                    tongchuan = tongchuan.replace("【", " ");
                                    tongchuan = tongchuan.replace("】", "");
                                    if (!IsSikiName) {
                                        //console.log("显示字幕");
                                        message.show({
                                            text: tongchuan,
                                            duration: deltime,
                                        });
                                    } else if ((SikiName.indexOf(manName) > -1)) {
                                        message.show({
                                            text: tongchuan,
                                            duration: deltime,
                                        });
                                    }

                                }
                                //console.log(`${body.info[2][1]}: ${body.info[1]}`);
                                break;
                            case 'SEND_GIFT':
                                //console.log(`${body.data.uname} ${body.data.action} ${body.data.num} 个 ${body.data.giftName}`);
                                break;
                            case 'WELCOME':
                                //console.log(`欢迎 ${body.data.uname}`);
                                break;
                            // 此处省略很多其他通知类型
                            default:
                            //console.log(body);
                        }
                    })
                    break;
            }
        });
    }

};

// 延迟执行


/* 弹幕json示例
{
    "info": [
        [
            0,
            1,
            25,
            16777215,
            1526267394,
            -1189421307,
            0,
            "46bc1d5e",
            0
        ],
        "空投！",
        [
            10078392,
            "白の驹",
            0,
            0,
            0,
            10000,
            1,
            ""
        ],
        [
            11,
            "狗雨",
            "宫本狗雨",
            102,
            10512625,
            ""
        ],
        [
            23,
            0,
            5805790,
            ">50000"
        ],
        [
            "title-111-1",
            "title-111-1"
        ],
        0,
        0,
        {
            "uname_color": ""
        }
    ],
    "cmd": "DANMU_MSG"
}
*/