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

君莫笑lucky2024-05-10 13:29

本系列博客主要记录WebRtc实现过程中的一些重点，代码全部进行了注释，便于理解WebRTC整体实现。

一、创建html页面

简单添加input、button、video控件的布局。

javascript 复制代码

	<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文件。

javascript 复制代码

	<script src="js/main.js"></script>

打开摄像头流程如下：

1.通过navigator.mediaDevices.getUserMedia函数请求本地摄像头和麦克风权限，

2.在权限允许的情况下打开本地视频流。

3.将本地视频流绑定到localVideo元素上，从而实现远程视频通信。

javascript 复制代码

	//获取本地视频元素和远程视频元素
	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();
	}

效果图如下所示：