七牛實時音視頻雲視頻連線demo（web部分）

時間 2019-11-20

標籤七牛 7牛實時音視頻視頻連線 demo web 部分欄目 HTML 简体版

原文原文鏈接

七牛實時音視頻雲視頻連線demo（web部分）

官方文檔：

https://doc.qnsdk.com/rtn/webcss

步驟

1.申請七牛雲帳號；html

2.服務器上作token驗證接口jquery

3.web demo開發web

注意事項

由於屏幕和攝像頭採集只能在 localhost 或者 https 下完成;
由於項目涉及到和客戶端視頻連線，一開始客戶端取不到web發佈的視頻流，後面仔細查看文檔才知道須要把客戶端打不得track流設置Master爲true（默認false）

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視頻連線</title>
</head>
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="src/layui/css/layui.css">
<body>
<div class="title">演播室</div>
<div id="localtracks"></div>
<div class="title">遠方記者</div>
<div id="subtracks"></div>
<div class="button">
    <button class="layui-btn layui-btn-normal" onclick="page.joinRoom()">加入房間</button>
    <button class="layui-btn layui-btn-normal" onclick="page.leaveRoom()">離開房間</button>
</div>
</body>
<script src="src/js/public/pili-rtc-web.js"></script>
<script src="src/js/public/jquery-3.3.1.min.js"></script>
<script src="src/layui/layui.all.js"></script>
<script>
    var page = {};
    page.uid = 6;
    page.roomname = '123456';
    page.token = '';
    myRoom = null;


    page.getToken = async function () {
        await $.ajax({
            url: '/QiuNiu/getToken',
            type: 'POST',
            data: {
                uid: page.uid,
                roomname: page.roomname
            },
            success: function (res) {
                res = JSON.parse(res)
                if (res.code == 200) {
                    page.token = res.data.token
                } else {
                    console.log(res.msg)
                    layer.msg(res.msg,{icon:2})
                }
            }
        });
    }

    page.joinRoom = function () {
        layer.prompt({title: '請輸入房間號', value: page.roomname, maxlength: 64}, function(pass, index){
            const roomReg = /[a-zA-Z0-9_-]{3,64}/;
            if(roomReg.exec(pass)){
                page.roomname = pass
                layer.close(index);
                page.startConnect();
            } else {
                layer.msg('房間號必須爲3位以上字母和數字組成！',{icon:2})
            }
        });
    }
    page.startConnect = async function () {
        await page.leaveRoom();
        await page.getToken();
        // 這裏替換成剛剛生成的 RoomToken
        await  myRoom.joinRoomWithToken(page.token);
        await page.publish();
        page.autoSubscribe();
    }

    page.leaveRoom = async function () {
        myRoom.leaveRoom();
        $('#localtracks').html('');
        const tracks = await QNRTC.deviceManager.getLocalTracks({
            audio: {enabled: true, tag: "audio"},
            video: {enabled: true, tag: "video"},
        });

        // 遍歷 tracks，逐個銷燬釋放
        for (const track of tracks) {
            track.release();
        }
    }
    page.publish = async function () {
        // 咱們打開了 3 個參數，即採集音頻，採集視頻，採集屏幕共享。
        // 這個函數會返回一個列表，列表中每一項就是一個音視頻軌對象
        const localTracks = await QNRTC.deviceManager.getLocalTracks({
            audio: {enabled: true, tag: "audio"},
            video: {enabled: true, tag: "video"},
        });
        for (const localTrack of localTracks) {
            localTrack.setMaster(true);
        }
        // 將剛剛的 Track 列表發佈到房間中
        await myRoom.publish(localTracks);
        console.log("publish success!");

        const localElement = document.getElementById("localtracks");
        // 遍歷本地採集的 Track 對象
        for (const localTrack of localTracks) {
            localTrack.setMaster(true);
            // 若是這是麥克風採集的音頻 Track，咱們就不播放它。
            if (localTrack.info.tag === "audio") continue;
            // 調用 Track 對象的 play 方法在這個元素下播放視頻軌
            localTrack.play(localElement, true);
        }
    }

    // 這裏的參數 myRoom 是指剛剛加入房間時初始化的 Session 對象, 同上
    // trackInfoList 是一個 trackInfo 的列表，訂閱支持多個 track 同時訂閱。
    page.subscribe =  async function (trackInfoList) {
        // 經過傳入 trackId 調用訂閱方法發起訂閱，成功會返回相應的 Track 對象，也就是遠端的 Track 列表了
        const remoteTracks = await myRoom.subscribe(trackInfoList.map(info => info.trackId));

        // 選擇頁面上的一個元素做爲父元素，播放遠端的音視頻軌
        const remoteElement = document.getElementById("subtracks");
        // 遍歷返回的遠端 Track，調用 play 方法完成在頁面上的播放
        for (const remoteTrack of remoteTracks) {
            remoteTrack.play(remoteElement);
        }
    }

    page.autoSubscribe =  function () {
        const trackInfoList = myRoom.trackInfoList;
        // 調用咱們剛剛編寫的 subscribe 方法
        // 注意這裏咱們沒有使用 async/await，而是使用了 Promise，你們能夠思考一下爲何
        page.subscribe(trackInfoList)
            .then(() => console.log("subscribe success!"))
            .catch(e => console.error("subscribe error", e));

        // 添加事件監聽，當房間中出現新的 Track 時就會觸發，參數是 trackInfo 列表
        myRoom.on("track-add", (trackInfoList) => {
            page.subscribe(trackInfoList)
                .then(() => console.log("subscribe success!"))
                .catch(e => console.error("subscribe error", e));
        });
        // 就是這樣，就像監聽 DOM 事件同樣經過 on 方法監聽相應的事件並給出處理函數便可
    }

    page.initRoom = async function () {
        myRoom = new QNRTC.TrackModeSession();
    }

    $(function () {
        page.initRoom();
    });

    // localhost 或者 127.0.0.1 訪問剛剛那 2 個頁面(由於屏幕和攝像頭採集只能在 localhost 或者 https 下完成),
</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。