WebRTC 使用之 —— 使用 RTCPeerConnection 建立视频连接

最新推荐文章于 2024-05-11 00:15:00 发布

weixin_42058472

最新推荐文章于 2024-05-11 00:15:00 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/weixin_42058472/article/details/106694362

版权

接下来的例子，将展示如何使用 WebRTC 的 RTCPeerConnection API 建立视频连接。

创建工程
创建如下的工程：

一个 index.html + 一个main.js。

在 html 中添加 video
在 index.html 中，添加两个 video，分别是 localVideo 和 remoteVideo，用于模拟建立视频连接的两端。

在创建三个按钮：Start、Call、Hang Up，用来模拟视频建立过程中的操作：

Start：localVideo 打开摄像头并显示视频

Call：localVideo 向 remoteVideo 发出请求，并显示 remoteVideo 的视频

Hang Up：remoteVideo 挂断

因此 index.html 的代码为：下面展示一些 内联代码片。

<!DOCTYPE html>
 
<html>
 
<body>
 
<div id="container">
 
    <video id="localVideo" playsinline autoplay muted></video>
    <video id="remoteVideo" playsinline autoplay></video>
 
    <div class="box">
        <button id="startButton">Start</button>
        <button id="callButton">Call</button>
        <button id="hangupButton">Hang Up</button>
    </div>
 
</div>
 
<script src="js/main.js" async></script>
 
</body>
</html>
复制代码

显示的效果如下：

Index.html 里的布局实现后，开始在 main.js

最低0.47元/天解锁文章

weixin_42058472

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
WebRTC 使用之 —— 使用 RTCPeerConnection 建立视频连接

接下来的例子，将展示如何使用 WebRTC 的 RTCPeerConnection API 建立视频连接。创建工程创建如下的工程：一个 index.html + 一个main.js。在 html 中添加 video在 index.html 中，添加两个 video，分别是 localVideo 和 remoteVideo，用于模拟建立视频连接的两端。在创建三个按钮：Start、Call、Hang Up，用来模拟视频建立过程中的操作：Start：localVideo 打开摄像头并显示视频Cal
复制链接

扫一扫