html实现视频会议 （web端+手机端）,支持多人在线，窗口切换，分享 - Cover 七牛
生活随笔
收集整理的這篇文章主要介紹了
html实现视频会议 （web端+手机端）,支持多人在线，窗口切换，分享 - Cover 七牛
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
站在巨人的肩膀上，總是簡單一些，但是看文檔還有寫這些demo還是用了1天的時間
電腦端：
本地窗口
?
遠程窗口切換
?
手機端：
? ? ? ?
源碼：server部分用了php，換成 java 或? python 都是可以的
<?phpheader("Content-type:text/html;charset=utf8");//獲取room 和 title$room = @$_GET["room"];$title = @$_GET["title"];$uid = time(); //訪問時間設置為uid//獲取roomtokenif(empty($room)||empty($title)){echo "failure";exit;}$room = "zt".$room;$uid = "ztu".$uid;$expireTime = time()+60*60*24; //1天后過期//test$appid = "七牛appid"; //申請地址：https://doc.qnsdk.com/rtn$secretKey = "七牛sk";$accessKey = "七牛ak";//base64 以下為php版校驗keyfunction base64_urlSafeEncode($data) {$find = array('+', '/');$replace = array('-', '_');return str_replace($find, $replace, base64_encode($data));} //data$tokenDesc = array('appId' => $appid,'roomName' => $room,'userId' => $uid,'expireAt' => $expireTime,'permission' => "user");$tokenDescJson = json_encode($tokenDesc);$encodedTokenDesc = base64_urlSafeEncode($tokenDescJson);$sign = hash_hmac('sha1', $encodedTokenDesc, $secretKey, TRUE);$encodedSign = base64_urlSafeEncode($sign);$roomToken = $accessKey.":".$encodedSign.":".$encodedTokenDesc; ?> <html> <head><title><?php echo $title; ?>-視頻會議</title><meta name="decorator" content="default"/><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><style type="text/css">body{position: relative;margin:0;padding:0;overflow:hidden;background-color:#212121;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;margin: 0px;padding: 0px;}html,body{width: 100%;height: 100%;}.bigd{width: 100%;height: 100%}.title{position: absolute;left: 0px; top: 10px; color: #fff; font-size: 14px; width:100%; text-align:center; }.fqr{position: absolute;right: 10px; top: 10px; color: #fff; font-size: 14px;}.wjt{outline: none;width: 50px; height:50px; border-radius: 50px; border: none; background: url("./wjt.png") no-repeat; background-size: 50px 50px;position: absolute;bottom: 10px; left: 48%;}.gd{outline: none;width: 50px; height:50px; border-radius: 50px; border: none; background: url("./gd.png") no-repeat; background-size: 50px 50px;position: absolute;bottom: 10px; left: 48%;}.mylist{width: 100%;height: 5rem;position: absolute;left: 0px;bottom: 70px;}.list{display: block; height: 5rem;}.list .one{width: 100px;height: 100%; margin-left: 10px; float: left; position: relative;background-color: #4a4a4a; cursor: pointer}.one_video{width: 100%; height: 100%;}.one_text{position: absolute; left: 0px; width: 100%;bottom: 5px;width: 100%; text-align: center; color: #fff;font-size: 12px;}#share-2{position: absolute;left: 10px; bottom: 10px;}video{width:100%; height:100%};audio{visibility:hidden}.max{position: fixed!important; z-index: -1!important;left: 0px!important; top: 0px!important; width: 100%!important; height: 100%!important;bottom: auto!important;background-color:#212121!important;}.max .one_text{display:none;}</style> </head> <body onbeforeunload="checkLeave()"><!--房間標題--> <div class="title"><?php echo $title; ?></div> <!--掛斷按鈕--> <button class="wjt" onclick="myleave(this)"></button> <!--已在線人--> <div class="mylist"><div class="list"><div class="one max" onclick="swithDialog('local')"><div class="one_video" id="videolocal" ></div><div class="one_text">本機</div></div></div> </div> <!--分享--> <script type="text/javascript" src="./jquery-1.10.2.js"></script> <link rel="stylesheet" href="./share.min.css" /> <script type="text/javascript" src="./jquery.share.min.js?V4"></script> <div id="share-2"></div> <script type="text/javascript"> if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { } else {$('#share-2').share({sites: ['qq', 'weibo','wechat']}); } </script> <script type="text/javascript" src="./scrollBar.js"></script> <script type="text/javascript" src="./pili-rtc-web.js"></script> <script>var RoomToken = '<?php echo $roomToken; ?>';// 確認引入成功console.log("current version", QNRTC.version);var myRoom_this = null;// 這里采用的是 async/await 的異步方案，您也可以根據需要或者習慣替換成 Promise 的寫法async function joinRoom() {$(".wjt").attr("class","gd");// 初始化一個房間 Session 對象, 這里使用 Stream 模式const myRoom = new QNRTC.StreamModeSession();myRoom_this = myRoom;// 這里替換成剛剛生成的 RoomTokenawait myRoom.joinRoomWithToken(RoomToken);console.log("joinRoom success!");//顯示已連接的流視頻autoSubscribe(myRoom);//播放本地視頻攝像頭try{await publish(myRoom);}catch(e){alert("權限獲取失敗，請允許攝像頭訪問");}}// 增加一個函數 publish，用于采集并發布自己的媒體流// 這里的參數 myRoom 是指剛剛加入房間時初始化的 Session 對象async function publish(myRoom) {// 調用采集模塊采集本地的音頻和視頻數據，返回一個包含這些數據的 Stream 對象const localStream = await QNRTC.deviceManager.getLocalStream({audio: { enabled: true },video: { enabled: true },});// 將剛剛的 Stream 對象發布到房間中await myRoom.publish(localStream);console.log("publish success!");// 在這里添加// 獲取頁面上的一個元素作為播放畫面的父元素const localElement = document.getElementById("videolocal");// 調用 Stream 對象的 play 方法在這個元素下播放媒體流，其中第二個參數代表 靜音播放localStream.play(localElement, true);}if(confirm("我們將采集您的攝像頭/麥克風數據并與房間其他用戶進行音視頻通話")){joinRoom();//啟動} // 這里的參數 myRoom 是指剛剛加入房間時初始化的 Session 對象, 同上// userId 是指訂閱對象的用戶名async function subscribe(myRoom, userId) {//判斷是否存在該視頻if($("#video"+userId).length==0){var html = '<div class="one" onclick="swithDialog(\''+userId+'\')">\n' +' <div class="one_video" id="video'+userId+'" ></div>\n' +' <div class="one_text">'+userId+'</div>\n' +' </div>';$(".list").append(html);}// 調用訂閱方法發起訂閱，成功會返回一個 Stream 對象，這就是遠端的流了const remoteStream = await myRoom.subscribe(userId);// 選擇頁面上的一個元素作為父元素，播放遠端的流const remoteElement = document.getElementById("video"+userId);remoteStream.play(remoteElement);}// 這里的參數 myRoom 是指剛剛加入房間時初始化的 Session 對象, 同上function autoSubscribe(myRoom) {const users = myRoom.users;console.log("room current users", users)// 遍歷房間當前所有用戶for (const user of users) {// 如果存在一個用戶，用戶名不是自己并且已經發布// 就可以發起訂閱了if (user.userId !== myRoom.userId && user.published) {// 調用我們剛剛編寫的 subscribe 方法// 注意這里我們沒有使用 async/await，而是使用了 Promise，大家可以思考一下為什么subscribe(myRoom, user.userId).then(() => console.log("subscribe success!")).catch(e => console.error("subscribe error", e));}}//width change$(".list").css("width",$(".list .one").length*110+"px");$(".mylist").scrollBar();// 接下來我們需要處理第二種情況，也就是監聽事件來感知房間內有用戶發布了myRoom.on("user-publish", (user) => {console.log("user", user.userId, "is published!");subscribe(myRoom, user.userId).then(() => console.log("subscribe success!")).catch(e => console.error("subscribe error", e));});//遠程用戶離開房間myRoom.on("user-leave",(user)=>{console.log("user", user.userId, "go leave!");if($("#video"+user.userId).length>0){//存在用戶$("#video"+user.userId).parent(".one").remove();//去掉UI}});}//離開房間function myleave(obj){$(obj).attr("class","wjt");myRoom_this.leaveRoom();}//交換窗口function swithDialog(zid){$("#video"+zid).parent(".one").addClass("max");$("#video"+zid).parent(".one").siblings().removeClass("max");}//離開頁面function checkLeave(){myRoom_this.leaveRoom();} </script> </body> </html>未做太多業務的處理，只是簡單的視頻，未涉及文件傳遞或聊天socket功能！
有想法的可以研究，研究啦~
百度網盤：https://pan.baidu.com/s/1jv8dppNcjc3gpffGQnWVGw? 提取碼：67jz
感謝您的支持，寫的文章如對您有所幫助，開源不易，請您打賞，謝謝啦~
總結
以上是生活随笔為你收集整理的html实现视频会议 （web端+手机端）,支持多人在线，窗口切换，分享 - Cover 七牛的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DropBox系列-安卓DropBox介
- 下一篇： 爱情忠告