博主在完成自己的毕业设计时，需要完成一个音视频通话功能，于是采用了腾讯云的视频接口，将其实现出来，，以下是项目截图:
以下是主要代码：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Material Design for Bootstrap fonts and icons -->
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> -->
<!-- Material Design for Bootstrap CSS -->
<link rel="stylesheet" href="./css/bootstrap-material-design.min.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/toastify.min.css">
<title>萌宠之家视频通话</title>
</head>
<body>
<div style="width:100%;height:100%;position:fixed;top:-70px;left:4px">
<form id="form" >
<div class="custom-container container">
<div class="row">
<div class="custom-row-container">
<div class="row">
<div class="col-ms">
<div class="card custom-card">
<div class="form-group" hidden/>
<label for="userId" class="bmd-label-floating">用户ID:</label>
<input type="text" class="form-control" name="userId" id="userId">
</div>
<div class="form-group bmd-form-group" hidden/>
<label for="roomId" class="bmd-label-floating">房间号:</label>
<input type="text" class="form-control" name="roomId" id="roomId">
</div>
<div class="form-group bmd-form-group">
<button id="join" type="button" class="btn btn-raised btn-primary rtc-primary-bg" style="width:45%">开 始 通 话</button>
<button id="leave" type="button" class="btn btn-raised btn-primary rtc-primary-bg"style="width:45%" >终 止 通 话</button>
<button id="publish" type="button" class="btn btn-raised btn-primary rtc-primary-bg" hidden/>开始推流</button>
<button id="unpublish" type="button" class="btn btn-raised btn-primary rtc-primary-bg" hidden/>停止推流</button>
</div>
</div>
<div class="card" hidden/>
<button class="btn btn-raised rtc-expand-btn" id="settings" data-toggle="collapse"
data-target="#setting-collapse" aria-expanded="false" aria-controls="collapse">
设置
</button>
<div id="setting-collapse" class="collapse" aria-labelledby="setting-collapse">
<div class="card-body">
<div class="form-group">
<label for="cameraId" class="bmd-label-floating">摄像头</label>
<select class="form-control" id="cameraId" name="cameraId">
</select>
</div>
<div class="form-group">
<label for="microphoneId" class="bmd-label-floating">麦克风</label>
<select class="form-control" id="microphoneId" name="microphoneId">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<div class="video-grid" id="video_grid" >
<div id="local_stream" class="video-placeholder" style="width:380px;height:300px">
<div id="local_video_info" class="video-info" ></div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- Demo 相关第三方库-->
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/popper.js"></script>
<script src="./js/toastify.js"></script>
<script src="./js/bootstrap-material-design.min.js"></script>
<script>$(document).ready(function () { $('body').bootstrapMaterialDesign(); });</script>
<!-- 引入 TRTC WEB SDK 脚本 -->
<script src="./js/trtc.js"></script>
<!-- Demo 相关脚本 -->
<script src="./js/lib-generate-test-usersig.min.js"></script>
<script src="./js/debug/GenerateTestUserSig.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/rtc-client.js"></script>
<script src="./js/index.js"></script>
</div>
</body>
</html>
来源：CSDN
作者：彭祥.
链接：https://blog.csdn.net/pengxiang1998/article/details/104114304