一对一WebRTC视频通话系列（一）—— 创建页面并显示摄像头画面

本系列博客主要记录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();}