bilibili vtb直播同传man字幕显示

！！！
Wrap lines
// ==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"
}
*/
欢迎访问Greasy Fork镜像
