一对一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();
	}

效果图如下所示:

相关推荐
aqi004 小时前
FFmpeg开发笔记(七十二)Linux给FFmpeg集成MPEG-5视频编解码器EVC
android·ffmpeg·音视频·流媒体
~央千澈~5 小时前
优雅草蜻蜓T语音会议系统私有化部署方案与RTC技术深度解析-优雅草卓伊凡|clam
webrtc·实时音视频·rtc
花开花落的个人博客6 小时前
ESP32-S3开发板播放wav音频
音视频
顾道长生'12 小时前
(Arxiv-2025)通过动态 token 剔除实现无需训练的高效视频生成
计算机视觉·音视频·视频生成
每次的天空20 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
爱分享的飘哥1 天前
【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”
人工智能·音视频
菜包eo1 天前
二维码驱动的独立站视频集成方案
网络·python·音视频
阿蒙Amon1 天前
【Python小工具】使用 OpenCV 获取视频时长的详细指南
python·opencv·音视频
old-six-programmer1 天前
NAT 类型及 P2P 穿透
服务器·网络协议·webrtc·p2p·nat
aqi001 天前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体