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

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

效果图如下所示:

相关推荐
脑子缺根弦2 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
肥or胖11 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频
DogDaoDao13 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
张海森-1688201 天前
视频码率是什么?视频流分辨率 2688x1520_25fps采用 h264格式压缩,其码率为
音视频
_可乐无糖2 天前
AWS WebRTC 并发 Viewer 拉流失败分析:0.3 秒等待为何如此关键?
云计算·webrtc·aws
DogDaoDao2 天前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
IoT砖家涂拉拉2 天前
萌宠语聊新模板!借助On-App AI降噪与音频处理技术,远程安抚宠物更轻松、更安心!
人工智能·ai·app·音视频·智能家居·智能硬件·宠物
AI视觉网奇2 天前
截取视频 截取mp4 视频缩放
音视频
DogDaoDao3 天前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成
todoitbo3 天前
docker搭建freeswitch实现点对点视频,多人视频
docker·容器·音视频·freeswitch·视频聊天