https://doc.qnsdk.com/rtn/webcss
1.申請七牛雲帳號;html
2.服務器上作token驗證接口jquery
3.web demo開發web
<!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>