开发前准备

开发约定

a. 文档中所有的回调接口名字取名为cb

b. API接口分为同步接口和异步接口

  • 同步接口:调用之后立即返回数据的接口,参数中不存在cb的接口全部为同步接口
  • 异步接口:调用需要传递回调函数cb做为回调的接口,参数中包含cb的接口全部为异步接口

使用方式

  • 引入 API SDK
<script src="https://static.mudu.tv/static/player/bundle.js?v=0.1.0"></script>
<script>videojs.options.flash.swf = "https://static.mudu.tv/static/player/video-js.swf"; window.FETCHER_SERVER_URL = "ws://fetcher.mudu.tv:8088";</script>
<script src="https://static.mudu.tv/fetcher/bundle.6d7aca164d2389e8bea6.js"></script>
<script src="https://static.mudu.tv/static/websdk/bundle.js?v=1.1"></script>
  • 初始化组件
var user = {
    name: "xiaobaitu23, 
    avatar: "http://cdn12.mudu.tv/thumbnails/uploads/9/b5ed4ba472bbaa27e092be7594a2e31d.jpg",
    id: "ddduuueiarwqerw323232"
}

name    用户名          string
avatar  头像地址        string
id      用户唯一标志     string

Mudu.Init({id: 41988,user: user}, function () {
    //这里书写业务逻辑
})

id      频道id int
user    用户对象 object

演示demo

必须在服务器环境下运行,不能直接用浏览器打开demo

必须在服务器环境下运行,不能直接用浏览器打开demo

必须在服务器环境下运行,不能直接用浏览器打开demo

由于演示demo使用了es6语法,推荐使用谷歌浏览器浏览

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
    <script src="https://static.mudu.tv/static/player/bundle.js?v=0.1.0"></script>
    <script>
        videojs.options.flash.swf = "https://static.mudu.tv/static/player/video-js.swf"; window.FETCHER_SERVER_URL = "ws://fetcher.mudu.tv:8088";
    </script>
    <script src="https://static.mudu.tv/fetcher/bundle.6d7aca164d2389e8bea6.js"></script>
    <script src="https://static.mudu.tv/static/websdk/bundle.js?v=1.1"></script>
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0
        }

        ul li {
            list-style: none;
        }

        .app {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            overflow: hidden;
        }

        .app .app_header {
            width: 1200px;
            height: 30px;
            font-size: 24px;
            text-align: center;
            background: #666;
            color: #ffffff;
            letter-spacing: 10px;
            padding: 10px 0;
            margin-bottom: 10px;
        }

        .app #barrage {
            width: 1200px;
            height: 80px;
            background: #e3e3e3;
            margin: 10px 0;
            position: relative;
        }

        .app .showarea {
            width: 1200px;
            height: 300px;
        }

        .app .showarea .player {
            width: 600px;
            height: 300px;
            float: left;
            overflow: hidden;
        }

        .app .showarea .comments {
            width: 600px;
            height: 300px;
            float: left;
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .app .showarea .comments .comment_one {
            width: 560px;
            margin: 0 10px 5px 10px;
            height: 40px;
        }

        .app .showarea .comments .comment_one .avatar {
            width: 40px;
            height: 40px;
            margin-right: 5px;
            float: left;
        }

        .app .showarea .comments .comment_one .username {
            width: 480px;
            height: 12px;
            font-size: 12px;
            line-height: 12px;
            float: left;
        }

        .app .showarea .comments .comment_one .message {
            width: 480px;
            height: 28px;
            line-height: 14px;
            font-size: 14px;
            float: left;
        }

        .app .funcarea {
            width: 1200px;
            height: 85px;
            margin: 20px 0;
        }

        .app .funcarea .comment_area {
            width: 975px;
            border: 1px solid #e3e3e3;
            height: 60px;
            padding: 10px;
            font-size: 18px;
            float: left;
            resize: none;
        }

        .app .funcarea .comment_btn {
            width: 200px;
            height: 80px;
            font-size: 40px;
            color: #ffffff;
            background: #0000ff;
            border-radius: 5px;
            text-align: center;
            line-height: 80px;
            float: left;
        }

        .app #ppt_wrap {
            width: 580px;
            height: 600px;
            overflow-y: scroll;
            float: left;
            border: 1px solid #eee;
        }

        .app #luckyDrawWrap {
            width: 580px;
            height: 100px;
            float: left;
            border: 1px solid #eee;
            margin-left: 10px;
            padding: 10px;
            display: none;
        }

        .app #luckyDrawWrap #SignUpWrap {
            margin: 10px 0;
        }

        .app #luckyDrawWrap #SignUpWrap .signup_blank {
            width: 540px;
            height: 30px;
            line-height: 30px;
        }

        .app #luckyDrawWrap #SignUpWrap .signup_blank input {
            width: 182px;
            height: 30px;
            line-height: 30px;
        }

        .app #luckyDrawWrap #SignUpWrap .SignUp {
            width: 40px;
            height: 30px;
            line-height: 30px;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            background: #ff0000;
        }
    </style>
</head>

<body>

     <div class="app">
        <div class="app_header">
            <div> 标题:<span id="act_name"></span> 页面浏览量 <span id="act_viewnum">0</span></div>
        </div>

        <div id="barrage">

        </div>

        <div class="showarea">
            <div class="player">
                <div id="J_prismPlayer" class="prism-player"></div>
            </div>
            <div class="comments">

            </div>
        </div>

        <div class="funcarea">
            <textarea class="comment_area"></textarea>
            <button class="comment_btn">评 论</button>
        </div>

        <div>
            <div id="ppt_wrap">
                <img id="ppt_content" style="display:none;" src="" />
            </div>

            <div id="luckyDrawWrap">
                <p>奖项:<span id="lucky_award_name"></span></p>
                <p>截止时间:<span id="lucky_deadline"></span></p>
                <div id="SignUpWrap">
                    <p class="signup_blank">用户名:<input id="uname"  type="text" value="" /> 手机:<input id="voucher"  type="text" value="" /> <button id="SignUp" class="SignUp">报名</button></p>
                </div>
            </div>
        </div>

    </div>


    <script>
        //定义一个解析评论的函数
        function parseComment({ avatar, username, message }) {
            return $(`<div class='comment_one'><img class="avatar" src='${avatar}' /> <p class='username'>${username}</p> <p class='message'>${message}</p></div>`);
        }


        //项目初始化
        Mudu.Init({
            id: 41988,
            user: {
                name: "xiaobaitu23",
                avatar: "http://cdn12.mudu.tv/thumbnails/uploads/9/b5ed4ba472bbaa27e092be7594a2e31d.jpg",
                id: "ddduuueiarwqerw323232"
            }
        }, function () {

            //这个里面调用目睹api,结合自身业务实现相关逻辑


            //监听新评论事件
            var delk = Mudu.Room.Comment.On('Comment.New', function (data, topic) {
                var obj = JSON.parse(data);
                $(".comments").prepend(parseComment(obj));
            });

            // 取消监听评论事件,取消之后如果有新的评论就不会收到通知了
            // Mudu.Room.Comment.Off(delk);

            //获取最新三页的评论
            for (var i = Mudu.Room.Comment.GetPage(), j = 0; i > 0; i-- , j++) {
                if (j > 3) {
                    break;
                }
                //获取评论
                Mudu.Room.Comment.Get(i, function (data) {
                    var obj = JSON.parse(data);
                    $.each(obj.data, (idx, comment) => {
                        $(".comments").append(parseComment(comment));
                    })
                });
            }


            //获取抽奖信息
            Mudu.Room.LuckyDraw.Get(function (data) {
                console.log('luckydraw', data);
            });

            // //初始化播放器
            var player = new Mudu.Player('J_prismPlayer', {
                type: 'live',
                src: Mudu.Room.GetPlayAddr(),// 视频地址
                autoplay: false,    //自动播放:false
                controls: true
            });


            //监听直播状态变化事件
            Mudu.Room.On('Room.StreamEvent', function (data, topic) {
                var obj = JSON.parse(data);
                //开始直播,调用播放器播放
                if (obj.event == 1) {
                    player.play();
                } else {
                    //停止直播,调用播放器的停止播放方法
                    player.stop();
                }
            });


            //监听ppt变化事件
            Mudu.Room.PPT.On('PPT.Changed', function (data, topic) {
                var obj = JSON.parse(data);
                $("#ppt_content").show().attr("src", obj.url);
            });


            //定义一个随机数生产函数
            var GetRandomNum = function (Max, Min) {
                var Range = Max - Min;
                var Rand = Math.random();
                return (Min + Math.round(Rand * Range));
            }

            //监听弹幕事件并处理
            Mudu.Room.Barrage.On('Barrage.New', function (data, topic) {
                var obj = JSON.parse(data);
                var left_1 = GetRandomNum(1200, 0)
                var top_1 = GetRandomNum(60, 0);

                var left_2 = GetRandomNum(1200, 0)
                var top_2 = GetRandomNum(60, 0);
                var $dom = $(`<span style="position:absolute;left:${left_1}px;top:${top_1}px">${obj.text}</span>`);
                $("#barrage").append($dom);
                $dom.animate({ left: left_2 + 'px', top: top_2 + 'px' });
                setTimeout(function () {
                    $dom.remove();
                }, GetRandomNum(10, 6) * 1000);
            });


            //元素添加点击事件
            $(".comment_btn").bind('click', () => {
                var $dom = $(".comment_area");
                if ($.trim($dom.val()) == "") {
                    return;
                }
                //发送评论
                Mudu.Room.Comment.Send($dom.val(), () => {
                    $dom.val('');
                });
            });

            //显示页面浏览量
            $("#act_viewnum").text(Mudu.Room.GetViewNum());
            //显示直播间名字
            $("#act_name").text(Mudu.Room.GetName());
            //显示ppt图片
            $("#ppt_content").show().attr("src", Mudu.Room.PPT.GetUrl());


            //监听开奖事件
            Mudu.Room.LuckyDraw.On('LuckyDraw.Open', (data) => {
                var jsonObj = JSON.parse(data);
                var html = '中奖用户:\n';
                $.each(jsonObj.data.luckers, function (idx, lucker) {
                    html += `用户 ${lucker.uname} 手机:${lucker.voucher} \n`;
                });
                alert(html);
            });

            //获取抽奖信息
            Mudu.Room.LuckyDraw.Get((data) => {
                var jsonData = JSON.parse(data);
                var award_name = jsonData.data.lucky_draw.award_name;
                var deadline = jsonData.data.lucky_draw.deadline;
                if (!deadline) {
                    return;
                }
                $("#luckyDrawWrap").show();
                $("#lucky_award_name").text(award_name);
                $("#lucky_deadline").text(deadline);
            });


            //直播间浏览量发生变化时,在页面上显示实时人数
            Mudu.Room.On('Room.ViewNumChanged', function (num) {
                $("#act_viewnum").text(num);
            });

            //元素添加点击事件
            $("#SignUp").bind('click', () => {
                var uname = $.trim($("#uname").val()); //获取报名人的名字
                var voucher = $.trim($("#voucher").val()); //获取凭证,这里一般是手机号码或者员工工号等等
                if (uname != "" && voucher != "") {
                    //调用抽奖报名api,进行抽奖报名
                    Mudu.Room.LuckyDraw.SignUp(uname, voucher, (data) => {
                        var jsonObj = JSON.parse(data);
                        if (jsonObj.status == 'y') {
                            $("#SignUpWrap").hide();
                            alert("报名成功");
                        } else {
                            alert(jsonObj.msg);
                        }

                    })
                }
            })
        });

    </script>
</body>

</html>

results matching ""

    No results matching ""