今天是冲刺第四天,在昨天进行了开发后,在今日的站立会议中,我们进行了内容和问题的总结
首先,我们明确了昨天的开发进度:
1.在客户端上已经实现了由客户端到服务端的连接
2.在安卓端上已经尝试性的使用了一个登录界面,实现视频功能,但是并没有完全成功
安卓端截图如下:
当前这个页面是尝试进行连接,但是没有成功
王嵘飞今日工作总结:
今天试图做了一个登录界面,查阅了很多资料,希望能够实现输入同一个房间号登录相同的房间实现互相视频
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no, shrink-to-fit=no"> <link rel="stylesheet" href="./css/bootstrap-material-design.min.css"> <link rel="stylesheet" href="./css/index.css"> <link rel="stylesheet" href="./css/room.css"> </head> <body> <div id="root"> <!-- 登录页面 --> <div id="login-root"> <!-- 登录卡片 --> <div id="login-card" class="card"> <!-- 顶部三个蓝条 --> <div class="row-div" style="width: 100%; height: 10px"> <div style="width: 190px; height: 100%; background-color: #006EFF"></div> <div style="width: 160px; height: 100%; background-color: #00A4FF"></div> <div style="width: 100px; height: 100%; background-color: #5AD5E0"></div> </div> <!-- 腾讯云logo --> <div class="row-div" style="width: 100%; height: 100px; justify-content: center"> <img style="height: 23px" src="./img/logo.png" alt=""> <div style="width: 9px"></div> <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div> <div style="width: 9px"></div> <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">视频通话</div> </div> <!-- 用户名 房间号 登录按钮--> <div class="col-div" style="width: 320px"> <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px"> <label for="userId" class="bmd-label-floating">用户名:</label> <input type="text" class="form-control" name="userId" id="userId" maxlength="18"> </div> <div class="form-group bmd-form-group is-filled" style="width: 100%; height: 80px"> <label for="roomId" class="bmd-label-floating">房间号:</label> <input type="text" class="form-control" name="roomId" id="roomId" maxlength="18"> </div> <div style="height: 24px"></div> <!-- 登录 --> <button id="login-btn" type="button" class="btn btn-raised btn-primary" style="width: 100%; height: 40px">进入房间 <div class="ripple-container"></div> </button> <!-- 摄像头 麦克风 --> <div class="row-div" style="width: 100%; height: 105px; justify-content: center"> <img id="camera" style="height: 27px" src="./img/camera.png" onClick="event.cancelBubble = true" data-toggle="popover" data-placement="top" title="" data-content=""> <!-- 选择摄像头 --> <div id="camera-option" style="display: none"></div> <div style="width: 100px"></div> <img id="microphone" style="height: 27px" src="./img/mic.png" onClick="event.cancelBubble = true" data-toggle="popover" data-placement="top" title="" data-content=""> <!-- 选择麦克风 --> <div id="mic-option" style="display: none"></div> </div> <!-- 设备检测按钮 --> <div id="device-testing-btn" class="device-testing-btn"> <div class="device-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-device"></use> </svg> </div> 设备检测 </div> <div id="device-connect-list" class="device-connect-list" style="display: none;"> <div id="connect-camera" class="connect icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-cameraIcon"></use> </svg> </div> <div id="connect-voice" class="connect icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-voice"></use> </svg> </div> <div id="connect-mic" class="connect icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-microphone"></use> </svg> </div> <div id="connect-network" class="connect icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> </div> </div> </div> </div> <!-- 设备检测界面弹窗 --> <div id="device-testing-root" style="display: none;"> <!-- 设备检测卡片 --> <div class="device-testing-card"> <!-- 设备检测准备界面 --> <div id="device-testing-prepare" class="device-testing-prepare"> <div class="testing-title">设备连接</div> <div class="testing-prepare-info">设备检测前请务必给当前页面开放摄像头,麦克风权限哦~</div> <div class="device-display"> <div id="device-camera" class="device icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-cameraIcon"></use> </svg> </div> <div id="device-voice" class="device icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-voice"></use> </svg> </div> <div id="device-mic" class="device icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-microphone"></use> </svg> </div> <div id="device-network" class="device icon-normal"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> </div> <div id="device-loading" class="loading-background"> <div class="device-loading"></div> </div> <!-- 连接结果提示 --> <div class="connect-info"> <!-- 连接结果 --> <div id="connect-info" style="max-width: 60%;"></div> <!-- 错误icon及错误解决指引 --> <div id="connect-attention-container" class="connect-attention-container" style="display: none;"> <div id="connect-attention-icon" class="connect-attention-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-warn"></use> </svg> </div> <div id="connect-attention-info" class="connect-attention-info" style="display: none;"> </div> </div> </div> <!-- 设备连接页面button --> <div class="testing-btn-display"> <div id="start-test-btn" class="test-btn start-test start-gray">开始检测</div> <div id="connect-again-btn" class="test-btn connect-again" style="display: none;">重新连接</div> </div> </div> <!-- 设备检测tab页 --> <div id="device-testing" class="device-testing" style="display: none;"> <div class="device-testing-title"> <div id="camera-testing" class="testing icon-gray"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-cameraIcon"></use> </svg> </div> <div id="voice-testing" class="testing icon-gray"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-voice"></use> </svg> </div> <div id="mic-testing" class="testing icon-gray"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-microphone"></use> </svg> </div> <div id="network-testing" class="testing icon-gray"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> </div> <!-- 设备检测-摄像头检测 --> <div id="camera-testing-body" class="testing-body" style="display: none;"> <div class="device-list camera-device-list"> <div class="select-title" style="display: block;">摄像头选择</div> <div class="select-list" style="display: block;"> <select name="select" id="camera-select" class="device-select"></select> </div> </div> <div id="camera-video" class="camera-video"></div> <div class="testing-info-container"> <div class="testing-info">是否可以清楚的看到自己?</div> <div class="button-list"> <div id="camera-fail" class="fail-button">看不到</div> <div id="camera-success" class="success-button">可以看到</div> </div> </div> </div> <!-- 设备检测-播放器检测 --> <div id="voice-testing-body" class="testing-body" style="display: none;"> <div class="device-list camera-device-list"> <div class="select-title" style="display: block;">扬声器选择</div> <div class="select-list" style="display: block;"> <select name="select" id="voice-select" class="device-select"></select> </div> </div> <div class="audio-control"> <div class="audio-control-info">请调高设备音量, 点击播放下面的音频试试~</div> <audio id="audio-player" src="https://web.sdk.qcloud.com/trtc/webrtc/assets/bgm-test.mp3" controls></audio> </div> <div class="testing-info-container"> <div class="testing-info">是否可以听到声音?</div> <div class="button-list"> <div id="voice-fail" class="fail-button">听不到</div> <div id="voice-success" class="success-button">可以听到</div> </div> </div> </div> <!-- 设备检测-麦克风检测 --> <div id="mic-testing-body" class="testing-body" style="display: none;"> <div class="device-list camera-device-list"> <div class="select-title" style="display: block;">麦克风选择</div> <div class="select-list" style="display: block;"> <select name="select" id="mic-select" class="device-select"></select> </div> </div> <div class="mic-testing-container"> <div class="mic-testing-info">对着麦克风说'哈喽'试试~</div> <div id="mic-bar-container" class="mic-bar-container"></div> <div id="audio-container"></div> </div> <div class="testing-info-container"> <div class="testing-info">是否可以看到音量图标跳动?</div> <div class="button-list"> <div id="mic-fail" class="fail-button">看不到</div> <div id="mic-success" class="success-button">可以看到</div> </div> </div> </div> <!-- 设备检测-硬件及网速检测 --> <div id="network-testing-body" class="testing-body" style="display: none;"> <div class="testing-index-list"> <div class="testing-index-group"> <div class="testing-index">操作系统</div> <div id="system"></div> </div> <div class="testing-index-group"> <div class="testing-index">浏览器版本</div> <div id="browser"></div> </div> <!-- <div class="testing-index-group"> <div class="testing-index">IP地址</div> <div id="ip"></div> </div> --> <div class="testing-index-group"> <div class="testing-index">屏幕共享能力</div> <div id="screen-share"></div> </div> <div class="testing-index-group"> <div class="testing-index">网络延迟</div> <div id="network-rtt" class="network-loading"></div> </div> <div class="testing-index-group"> <div class="testing-index">上行网络质量</div> <div id="uplink-network" class="network-loading"></div> </div> <div class="testing-index-group"> <div class="testing-index">下行网络质量</div> <div id="downlink-network" class="network-loading"></div> </div> <div class="testing-index-group"> <div class="testing-index">检测剩余时间</div> <div id="count-down"></div> </div> </div> <div class="testing-footer"> <div id="testing-report-btn" class="test-btn">查看检测报告</div> </div> </div> </div> <!-- 设备检测报告 --> <div id="device-testing-report" class="device-testing-report" style="display: none;"> <div class="testing-title">检测报告</div> <!-- 检测报告内容 --> <div class="device-report-list"> <!-- 摄像头报告信息 --> <div class="device-report camera-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-cameraIcon"></use> </svg> </div> <div id="camera-name" class="device-name"></div> </div> <div id="camera-testing-result" class="camera-testing-result"></div> </div> <!-- 扬声器报告信息 --> <div id="voice-report" class="device-report voice-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-voice"></use> </svg> </div> <div id="voice-name" class="device-name"></div> </div> <div id="voice-testing-result" class="voice-testing-result"></div> </div> <!-- 麦克风报告信息 --> <div class="device-report mic-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-microphone"></use> </svg> </div> <div id="mic-name" class="device-name"></div> </div> <div id="mic-testing-result" class="mic-testing-result"></div> </div> <!-- 网络报告信息 --> <div class="device-report network-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> <div id="network-name" class="device-name">网络延迟</div> </div> <div id="rtt-result" class="network-testing-result"></div> </div> <div class="device-report network-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> <div id="etwork-name" class="device-name">上行网络质量</div> </div> <div id="uplink-network-quality-result" class="network-testing-result"></div> </div> <div class="device-report network-report"> <div class="device-info"> <div class="report-icon"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-network"></use> </svg> </div> <div id="network-name" class="device-name">下行网络质量</div> </div> <div id="downlink-network-quality-result" class="network-testing-result"></div> </div> </div> <div class="device-report-footer"> <div id="testing-again" class="device-report-btn testing-agin">重新检测</div> <div id="testing-finish" class="device-report-btn testing-finish">完成检测</div> </div> </div> <!-- 设备检测关闭按钮 --> <div id="device-testing-close-btn" class="device-testing-close-btn"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-closeIcon"></use> </svg> </div> </div> </div> <!-- 聊天室页面 --> <div id="room-root" class="col-div"> <!-- header --> <div class="row-div card" style="width: 100%; height: 65px; justify-content: space-between"> <!-- 腾讯云logo --> <div class="row-div" style="height: 100%; width: 230px; justify-content: center"> <img style="height: 23px" src="./img/logo.png" alt=""> <div style="width: 9px"></div> <div style="width: 1px; height: 10px; background-color: #D8D8D8"></div> <div style="width: 9px"></div> <div style="width: 86px; height: 23px; font-size: 18px; color: #333333">视频通话</div> </div> <!-- 分享屏幕 退出 按钮 --> <div class="row-div" style="height: 100%; width: auto;"> <img id="screen-btn" style="width: 65px; height: 65px" src="./img/screen-off.png" alt=""> <div style="width: 20px"></div> <img id="logout-btn" style="width: 65px; height: 65px" src="./img/logout.png" alt=""> </div> <div class="col-md-6"> <a href="./webapp/Scenery1.jsp" class="btn btn-primary btn-lg btn-block"><i class="fas fa-file-upload"></i> 会议纪要</a> </div> <!-- 房间号 --> <div id="header-roomId" style="width: 230px; justify-content: flex-end; padding-right: 20px; font-size: 14px; color: #888888"> 房间号: 12345</div> </div> </div> <!-- 提醒用户用可以使用的浏览器打开 --> <div id="browser-remind" class="browser-remind"> <div id="remind-icon" style="width: 100%; font-size: 28px;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-warn"></use> </svg> <span style="display: inline-block; margin-left: 5px">提示</span> </div> <div id="remind-info" class="remind-info"></div> </div> </div> <script src="./js/jquery-3.2.1.min.js"></script> <script src="./js/popper.js"></script> <script src="./js/bootstrap-material-design.js"></script> <script> $(document).ready(function () { $('body').bootstrapMaterialDesign(); }); </script> <script src="./js/lib-generate-test-usersig.min.js"></script> <script src="./js/debug/GenerateTestUserSig.js"></script> <script src="./js/iconfont.js"></script> <script src="./js/trtc.js"></script> <script src="./js/common.js"></script> <script src="./js/rtc-client.js"></script> <script src="./js/share-client.js"></script> <script src="./js/presetting.js"></script> <script src="./js/rtc-detection.js"></script> <script src="./js/device-testing.js"></script> <script src="./js/index.js"></script> </body> </html>
胡硕阳今日工作总结:
今天尝试对安卓端的代码进行使用,初步实现了一个到服务器端的架构,起码连接是成功了
在安卓端的代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:textSize="15sp" android:layout_marginHorizontal="10dp" android:text="userID: " /> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:textSize="15sp" android:id="@+id/tv_soundlevelandspectrum_userid"/> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:textSize="15sp" android:text="streamID: " /> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:textSize="15sp" android:id="@+id/tv_soundlevelandspectrum_streamid"/> </LinearLayout> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey" /> <TextView android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/grey" /> <im.zego.advancedaudioprocessing.soundlevelandspectrum.widget.SpectrumView android:id="@+id/soundlevelandspectrum_spectrum_view" android:layout_width="match_parent" android:layout_height="200dp" app:itemHeight="200dp" android:layout_alignParentBottom="true" app:paintColor="@android:color/holo_orange_light" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sound Wave" android:textColor="@color/black" android:textSize="15sp"/> <ProgressBar android:layout_width="match_parent" android:layout_height="match_parent" style="?android:attr/progressBarStyleHorizontal" android:id="@+id/pb_sound_level" android:max="100"/> </LinearLayout> <TextView android:layout_width="match_parent" android:layout_height="3dp" android:background="@color/grey" /> </LinearLayout>
常金洋今日工作总结:
今日进行了另一个页面的开发,具体代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <im.zego.commontools.logtools.logLinearLayout android:id="@+id/logView" android:layout_width="match_parent" android:layout_height="50dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:textSize="15sp" android:layout_margin="5dp" android:text="Roomid: "/> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:textColor="@color/black" android:layout_margin="5dp" android:textSize="15sp" android:id="@+id/tv_soundlevelandspectrum_roomid" /> <TextView android:id="@+id/roomStateTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="Room state" android:layout_marginLeft="5dp" android:textColor="@color/black" android:textSize="15sp" /> <TextView android:id="@+id/roomState" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:text="" android:textColor="@color/black" android:textSize="15sp" /> </LinearLayout> <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="@+id/ll_container"> <include layout="@layout/activity_soundlevelandspectrum_layout_item"/> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp"> <Switch android:textSize="12sp" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginHorizontal="10dp" android:id="@+id/sw_soundlevelandspectrum_soundlevel_monitor" android:text="@string/start_soundlevel_monitor" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp"> <Switch android:textSize="12sp" android:layout_width="match_parent" android:layout_height="50dp" android:layout_marginHorizontal="10dp" android:id="@+id/sw_soundlevelandspectrum_spectrum_monitor" android:text="@string/start_audio_spectrum_monitor" /> </LinearLayout> </LinearLayout> </ScrollView> </LinearLayout>
标签:视频,麦克风,18,房间,网络,冲刺,2023.5,检测,连接 From: https://www.cnblogs.com/Arkiya/p/17411385.html