本系列博客主要记录WebRtc实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。
一、创建html页面
简单添加input、button、video控件的布局。
<html>
<head>
<title>WebRTC demo</title>
</head>
<h1>WebRTC demo</h1>
<!-- 按钮 -->
<div id="buttons">
<input id="RoomId" type="text" placeholder="Please enter the room ID" maxlength="50"/><br/>
<!-- 加入房间 -->
<button id="joinBtn" type="button">join-room</button>
<!-- 离开房间 -->
<button id="leaveBtn" type="button">leave-room</button>
</div>
<!-- 视频 -->
<div id="videos">
<!-- 本地 不出声音 -->
<video id="localVideo" autoplay muted playsinline>本地窗口</video><br/>
<video id="remoteVideo" autoplay playsinline>远端窗口</video>
</div>
</html>
显示本地视频时，利用
muted参数使得视频只显示画面，没有声音。
页面效果如下：
二、打开本地摄像头并在页面中显示画面
在html末尾处添加下列代码，用来引入JavaScript文件。
<script src="js/main.js"></script>
打开摄像头流程如下：
1.通过navigator.mediaDevices.getUserMedia函数请求本地摄像头和麦克风权限，
2.在权限允许的情况下打开本地视频流。
3.将本地视频流绑定到localVideo元素上，从而实现远程视频通信。
//获取本地视频元素和远程视频元素
var localVideo = document.querySelector('#localVideo');
var remoteVideo = document.querySelector('#remoteVideo');
var localStream = null;
//打开本地流
function openLocalStream(stream){
console.log('Open loacl stream success:',stream);
localVideo.srcObject = stream;
localStream = stream;
}
//初始化本地流
function initLocalStream(){
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
.then(openLocalStream)
.catch(function(e){
alert("getUserMedia() error: " + e.name);
});
}
//监听加入按钮点击事件
document.getElementById('joinBtn').onclick = function () {
console.log("joinBtn clicked");
//初始化本地码流
initLocalStream();
}
效果图如下所示：
![[NSSCTF]prize_p1](https://img-blog.csdnimg.cn/direct/ce7aa1b1709d45859204557b7a9c99cb.png)
![[基础] Unity Shader：顶点着色器（vert）函数](https://img-blog.csdnimg.cn/direct/a185b2a2157a432d8c2639941ad883ed.png)
