「手把手」实现网页视频聊天功能
16 / 10 / 创建于 4年前 /
LiamHao 的个人博客
在前面的两篇文章里，我们通过laravel-echo和laravel-websocket实现了网页和服务器间的双向通信功能，网页和网页之前的通信也很简单，原 文档 中也有说明，就不再单写文章了。但这些都是 文字 形式的通信，现在我们来个升级，将文字形式改为 音频/视频 的形式，也就是类似于微信的视频通话功能（鉴于本人电脑没有摄像头/麦克风等设备，就先以电脑屏幕作为视频源吧）。
新手必看
主要流程
创建页面
我们在routes/web.php中加入一个新的路由：
Route::get('/rtc-local', function () {
return view('web-rtc-local');
});并在resources/views目录下新建web-rtc-local.blade.php视图文件，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>WebRTC Local</title>
<!-- 本地双窗口测试时会报错，但不影响，加上这个可以去掉报错 -->
<script src="https://cdn.jsdelivr.net/npm/adapterjs@0.15.5/publish/adapter.min.js"></script>
</head>
<body>
<video class="remote-video" controls autoplay playsinline style="max-width: 800px;"></video>
<video class="local-video" controls autoplay playsinline style="max-width: 800px;"></video>
<script type="text/javascript">
// TODO
</script>
</body>
</html>本地窗口播放
现在我们先尝试下获取屏幕的视屏流，并在 video 标签中进行播放。在 script 标签中加入以下代码：
// 从可用设备列表中获取屏幕设备，并将视频流放入 video 标签内进行播放
navigator.mediaDevices.getDisplayMedia({video: true}).then((stream) => {
document.querySelector('.local-video').srcObject = stream;
});大功告成，我们来看下效果，打开浏览器，输入http://<your.host>/rtc-local回车：
哈？什么玩意？啥都没有啊，而且还有个「错误」？淡定下，这里报错是因为 WebRTC 标准中规定，只有https、localhost和通过file:///协议打开的本地文件才可访问媒体设备列表，这也是出于安全考虑。那么既然知道原因了，解决这个「错误」就迎刃而解了，只需要把你的域名加一个证书，然后改为https就可以了。
注意：通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境。 其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined：
- localhost 域
- 开启了 HTTPS 的域
- 使用 file:/// 协议打开的本地文件
哈？还要安装证书？我只是想在自己的服务器上简单测试下，好麻烦啊有木有！好吧，针对自己测试的情况，还有个更简单的方案，这需要你使用Chrome浏览器才可以。在Chrome浏览器的地址栏中输入chrome://flags/#unsafely-treat-insecure-origin-as-secure后回车，会出现黄色标记的选项：
把你的域名写入输入框，然后将后面的Disabled改为Enabled，此操作需要重启Chrome浏览器。重启后，再输入http://<your.host>/rtc-local看下效果：
浏览器会弹出一个窗口，这个窗口提供了浏览器可以抓取到的屏幕，包括完整的屏幕（我有两个显示器，所以会是两个）、开启的各程序窗口、单独的标签页等。我们只需点击需要抓取的屏幕，然后点击右下角的分享，即可看到神奇的画中画效果：
本地视频流转换
上面实现了有意思的小功能，我们着实小兴奋了一把。接下来，我们要向两个视频窗口间的「协商」过程更深入一步了。在写代码之前，我们先看个协商过程的时序图，理解下协商过程：
图片转自 这里，原文大家也可以看看。结下来，我们重新写 js 代码：
// 定义本地媒体流对象
var localStream = null;
// PeerConnection：对等连接，为通信的双方提供一个相同的接口/协议
var pc1 = null;
var pc2 = null;
// 获取 DOM 对象
var localVideo = document.querySelector('.local-video');
var remoteVideo = document.querySelector('.remote-video');
var call = function(){
// 创建对等连接
pc1 = new RTCPeerConnection();
pc2 = new RTCPeerConnection();
// 设置回调方法
pc1.onicecandidate = function(e){
// 向 ICE 代理添加远程候选对象
pc2.addIceCandidate(e.candidate);
}
pc2.onicecandidate = function(e){
pc1.addIceCandidate(e.candidate);
}
// 设置回调方法
pc2.ontrack = function(e){
remoteVideo.srcObject = e.streams[0];
}
// 获取全部的媒体列表，并将这些媒体的源改为本地媒体流对象
localStream.getTracks().forEach((track)=>{
pc1.addTrack(track,localStream);
});
// 要求浏览器正确构建一个 SDP（会话描述协议）对象，该对象代表发起方的媒体和要传达给远程方的功能
pc1.createOffer().then(sendOffer).catch((err) => {
console.log(err);
});
}
var sendOffer = function(description){
// 将这个 SDP 对象设为 pc1 的本地会话描述协议
pc1.setLocalDescription(description);
// 将这个新描述协议设为 pc2 的远程连接描述协议
pc2.setRemoteDescription(description);
// 根据 pc2 新的远程连接描述协议生成应答会话描述协议
pc2.createAnswer().then(sendAnswer).catch((err) => {
console.log(err);
});
}
// 这里 setLocalDescription 和 setRemoteDescription 所指定的 pc 对象和上面的正好相反，意思就是双方都确认了对方的远程链接描述协议，达成协商
var sendAnswer = function(description){
// 将这个 SDP 对象设为 pc2 的本地会话描述协议
pc2.setLocalDescription(description);
// 将这个新描述协议设为 pc1 的远程连接描述协议
pc1.setRemoteDescription(description);
}
navigator.mediaDevices.getDisplayMedia({video: true}).then((stream) => {
// document.querySelector('.local-video').srcObject = stream;
// 将视频流存入变量
localStream = stream;
// 将视频流放入页面中的「本地视频」窗口
localVideo.srcObject = localStream;
// 本地双窗口测试
call();
})
.catch((e) => {
console.log(e);
});保存文件，然后再次访问页面。此时会显示两个视频窗口，内容都是一样的。虽然内容一样，但一定要理解他们之间是通过 WebRTC 规范进行的媒体流交互的:
远程视频流转换
最后是重头戏了，我们来实现远程的视频流交互。这里需要用到 websocket 通信，所以你需要自己搭建好一个可以正常通信的 websocket 服务，这里就不再赘述了。因为我的项目中已经使用了laravel-echo和laravel-websockets这两个软件包，所以就继续用他们吧。
添加频道
我们打开routes/channels.php文件，在里面新增一个chatting-room频道：
Broadcast::channel('chatting-room', function ($user) {
return $user;
});将项目中config/websockets.php文件内的enable_client_messages（打开客户端事件）参数设为true：
return [
'apps' => [
[
...
'enable_client_messages' => true,
...
];
];记得.env文件中的相关变量要赋值：
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=joker
PUSHER_APP_KEY=joker
PUSHER_APP_SECRET=joker
PUSHER_APP_CLUSTER=mt1注意：改完参数记得重启
laravel-websockets服务。
添加登陆模块
因为远程链接时使用laravel-echo的join方法，这个方法需要进行授权验证，也就是当前必须是登陆状态才可以（如果你你已经实现了登陆接口，则可以跳过此步骤）。为了省去自己写登陆页面和登陆接口，我们安装官方文档中推荐的 Jetstream 软件包，就可以直接进行登陆操作了。我们在项目根目录下执行：
// 安装软件包
> composer require laravel/jetstream
// 发布配置文件
> php artisan jetstream:install livewire
// 安装相关依赖
> npm install
// 编译前端
> npm run dev此时，我们再输入http://<your.host>/login便可以看到登陆页了：
输入http://<your.host>/register是注册账号页面，我们随便注册两个账号即可：
实现
修改 html 的 header，加入laravel-echo和pusher插件：
<head>
<title>WebRTC Websocket</title>
<!-- 引入laravel-echo工具，其实使用Larave自带的也可以。但是，使用自带的还需要用到node前端构建工具，我这里只简单的演示后端实现过程，就不用node了 -->
<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.10.0/dist/echo.iife.js"></script>
<!-- 引入pusher工具，pusher是Laravel-echo底层，Laravel-echo是pusher的一层封装 -->
<script src="https://cdn.jsdelivr.net/npm/pusher-js@7.0.3/dist/web/pusher.min.js"></script>
</head>为了区分明确，我们调整一下本地显示窗口的大小为 400px：
<video class="remote-video" controls autoplay playsinline style="max-width: 800px;"></video>
<video class="local-video" controls autoplay playsinline style="max-width: 400px;"></video>接下来我们需要重写一下 js 代码：
// 通信方式：websocket，使用 Laravel-echo + Laravel-websockets
// 为了方便，使用 whisper() 方法进行广播
var wsHost = location.hostname;
var wsPort = 2020;
var laravelEcho = new Echo({
broadcaster: 'pusher',
key: 'joker',
wsHost: wsHost,
wsPort: wsPort,
forceTLS: false,
enabledTransports: ['ws'],
});;
// 本地媒体流对象，这里说的是「媒体」流，其包括「视频」流和「音频」流
var localStream = null;
// PeerConnection：对等连接，为通信的双方提供一个相同的接口/协议
var pc = null;
// 对等连接配置
var pcConfig = {
'iceServers':[
{
'urls':'stun:'+wsHost+':'+wsPort,
}
]
}
// 本地视频窗口对象
var localVideo = document.querySelector('.local-video');
// 远程视频窗口对象
var remoteVideo = document.querySelector('.remote-video');
// 发起媒体连接请求
var call = function(){
if(pc){
var options = {
offerToReceiveAudio: true,
offerToReceiveVideo: true,
}
// 要求浏览器正确构建一个 SDP（会话描述协议）对象，该对象代表发起方的媒体和要传达给远程方的功能
pc.createOffer(options).then((description) => {
// 将这个 SDP 对象设为本地会话描述协议
pc.setLocalDescription(description);
// 并将这个会话描述协议广播给当前房间的所有人
laravelEcho.join('chatting-room').whisper('VS', description);
})
.catch((err) => {
console.log(err);
});
}
}
// 创建一个对等连接
var createPeerConnection = function(){
if(!pc){
// 初始化对等连接
pc = new RTCPeerConnection(pcConfig);
// 设置回调方法，每当浏览器内部的 ICE 协议机器将新候选者提供给本地对等方（调用 setLocalDescription() 方法）时，就会触发 onicecandidate 处理程序。
pc.onicecandidate = function(e){
if(e.candidate){
// 如果事件中有「候选人」参数，则通过 websocket 广播将「候选人」信息给当前房间内的所有人。
laravelEcho.join('chatting-room').whisper('VS', {
type:'candidate',
label:e.candidate.sdpMLineIndex,
candidate:e.candidate.candidate
});
}
}
// 设置回调方法，当调用 addTrack() 方法时会触发 ontrack 处理程序。
pc.ontrack = function(e){
// 将事件中的远程媒体流赋值给「远程视频窗口」并自动播放
remoteVideo.srcObject = e.streams[0];
}
if(localStream){
// 获取全部的媒体列表，并将这些媒体的源改为本地媒体流对象
localStream.getTracks().forEach((track)=>{
pc.addTrack(track,localStream);
});
}
}
}
// 关闭对等连接
var closePeerConnection = function (){
if(pc){
pc.close();
pc = null;
}
}
// 关闭本地媒体流
var closeLocalMedia = function (){
if (localStream&&localStream.getTracks()) {
localStream.getTracks().forEach((track)=>{
track.stop();
});
}
localStream = null;
}
// 开始连接
var conn = function(){
// 选择房间
laravelEcho.join('chatting-room')
.here((user) => {
// 当前用户加入频道时触发，返回当前频道中在线的人员列表
console.log("here");
console.table(user);
// 创建对等连接
createPeerConnection();
})
.joining((user) => {
// 其他人加入频道时会触发，返回加入人的信息
console.log("joining");
// 创建对等连接
createPeerConnection();
// 发起媒体连接请求
call();
})
.leaving((user) => {
// 其他人离开频道时会触发，返回离开人的信息
console.log("leaving");
// 关闭对等连接
closePeerConnection();
// closeLocalMedia();
})
.listenForWhisper('VS', (data) => {
// 监听事件，事件名称自定义，触发和监听保持一致即可。
if(data){
if(data.type === 'offer'){
// 如果会话描述协议的类型 (type) 是媒体连接请求
// 通过会话描述协议创建一个新的 RTCSessionDescription 描述协议
// 并将这个新描述协议设为远程连接描述协议
pc.setRemoteDescription(new RTCSessionDescription(data));
// 根据新的远程连接描述协议生成应答会话描述协议
pc.createAnswer().then((description) => {
// 将这个应答会话描述协议设为本地会话描述协议
pc.setLocalDescription(description);
// 并将这个应答会话描述协议广播给当前房间的所有人
laravelEcho.join('chatting-room').whisper('VS', description);
})
.catch((err) => {
console.log(err);
});
} else if(data.type === 'answer'){
// 如果会话描述协议的类型 (type) 是应答
// 通过应答会话描述协议创建一个新的 RTCSessionDescription 描述协议
// 并将这个新描述协议设为远程连接描述协议(经过一问一答，双方的远程连接描述协议已经保持一致)
pc.setRemoteDescription(new RTCSessionDescription(data));
} else if(data.type === 'candidate'){
// 如果会话描述协议的类型 (type) 是候选人
// 向 ICE 代理添加远程候选对象
pc.addIceCandidate(new RTCIceCandidate({
sdpMLineIndex:data.label,
candidate:data.candidate
}));
} else {
console.log('the message is invalid!',data)
}
}
});
}
// 调用 Chrome 浏览器的 API，获取媒体设备(显示器、摄像头、麦克风等)
navigator.mediaDevices
// 获取屏幕设备的图像和音频
.getDisplayMedia({
video: true,
audio: true,
})
.then((stream) => {
// 将媒体流存入变量
localStream = stream;
// 将媒体流放入页面中的「本地视频」窗口
localVideo.srcObject = localStream;
// 这个函数的调用时机特别重要,一定要在获取到本地媒体流之后再调用，否则会出现绑定失败的情况
conn();
})
.catch((e) => {
console.log(e);
});注意：使用
join方法需要进行频道授权，也就是你需要先登陆到应用里，有会话状态后才能加入成功。whisper()这个方法需要将enable_client_messages参数设为true才可以使用。
我们打开登陆页http://<your.host>/login，输入最开始注册的账号，登陆成功后，再打开新的标签页，输入http://<your.host>/rtc-local回车。然后我们再打开一个「无痕模式」的Chrome浏览器（Mac快捷键：Shift+Command+N），同样是先登陆一个用户，然后打开http://<your.host>/rtc-local页面，此时，两个浏览器中的视频窗口便会连通，实现远程视频流播放。我们再来看下效果：
注意：如果没有看到视频窗口变化，打开浏览器的开发者工具，在网络请求中找到
/broadcasting/auth接口，看是否授权成功。必须是登陆过的用户才会授权通过。
再加「亿」点点细节（以下效果需要自己简单修改下代码实现，鉴于动图太大没法上传，就先用图片吧）。因为代码与上面差别不大，就不再写一遍了，想看代码的可以点 这里：
一旦双方达成协商，那么，他们之间便可直接进行通信。此时，即使我们停止 websocket 服务，双方仍然是连通的。因为 websocket 只是作为协商时的通信工具（这个工具可以换成普通的 ajax 请求实现），并不是媒体流的接收和转发服务器。文章中实现了类似远程桌面的功能，其实只要将代码中的navigator.mediaDevices.getDisplayMedia改为navigator.mediaDevices.getUserMedia即可调取摄像头和麦克风等设备，实现视频通话功能。奈何手头没有这些设备，没完全展示了，以后有机会再补充吧。
参考文章
- webRTC（十）：webrtc 实现web端对端视频
- MediaDevices.getUserMedia` undefined 的问题
- WebRTC >RTCPeerConnection-建立连接的全过程
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：