webrtc获取最终连接方式

Posted 2023-05-16

参考技术A webrtc获取最终连接方式可以咨询ZEGO即构科技，ZEGO即构科技功能强大满足客户的直播需求。【点击免费试用，0成本启动】

WebRTC的优点：对于用户来说，在WebRTC出现之前想要进行实时通信就需要安装插件和客户端，但是对于很多用户来说，插件的下载、软件的安装和更新这些操作是复杂而且容易出现问题的，现在WebRTC技术内置于浏览器中，用户不需要使用任何插件或者软件就能通过浏览器来实现实时通信。对于开发者来说，在Google将WebRTC开源之前，浏览器之间实现通信的技术是掌握在大企业手中，这项技术的开发是一个很困难的任务，现在开发者使用简单的html标签和javascript API就能够实现Web音/视频通信的功能。

想要了解更多关于webrtc的相关信息，推荐咨询ZEGO即构科技。即构科技有限公司是为开发者提供高品质实时音视频、实时语音、互动直播和IM即时通讯等服务的公司。核心团队成员均来自QQ，有超过20年的互联网和音视频技术开发经验，以及亿量级海内外用户运营服务能力。专注于实时音视频领域，致力提供全世界范围内最清晰稳定实时的语音视频服务，已服务4000+企业，适用于游戏、娱乐社交、在线教育、在线医疗、远程会议、智能硬件等多种用户场景。官网说心333
2022-04-06·TA获得超过323个赞知道小有建树答主回答量：采纳率：100%帮助的人：27.4万我也去答题访问个人页关注webrtc获取最终连接方式有以下三种方法
1、通过本地网络直接连接，如果两个设备都在本地网络上，则无需做任何特别的工作即可使用对等连接彼此，就是一台设备具有另一台设备的本地IP地址，则它们可以直接相互通信。
2、通过公共IP地址Internet直接连接，这样就是通过STUN获取的公共IP地址直接连接WebRTC，当设备不在同一个本地网络中时，只能通过公共IP地址来实现相互访问的方式。
3、通过WebRTC TURN服务器路由连接媒体，使用TURN来中继媒体来连接我们的WebRTC，这种情况知道公共IP地址固然好，但是可能还是够。

web技术分享| webRTC 媒体流录制

音视频的录制音视频的分为服务端录制和客户端录制，下面主要讲的是利用webrtc进行客户端录制的方式。
因为WebRTC 录制音视频流之后，最终是通过 Blob 对象将数据保存成多媒体文件的，

• Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

• Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

• 要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice()方法。要获取用户文件系统上的文件对应的 Blob 对象。

• 接受 Blob 对象的API也被列在 File 文档中。

了解完Blob的特性之后呢， 我们进入正题。

获取元素声明变量

let mediaRecorder;
let recordedBlobs;

const recordedVideo = document.querySelector(\'video#recorded\');
const recordButton = document.querySelector(\'button#record\');
const playButton = document.querySelector(\'button#play\');
const downloadButton = document.querySelector(\'button#download\');

绑定点击事件

• URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

• URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。你可以在 sourceopen 被处理之后的任何时候调用 revokeObjectURL()。这是因为 createObjectURL() 仅仅意味着将一个媒体元素的 src 属性关联到一个 MediaSource 对象上去。调用revokeObjectURL() 使这个潜在的对象回到原来的地方，允许平台在合适的时机进行垃圾收集。

recordButton.addEventListener(\'click\', () => {
    if (recordButton.textContent === \'Start Recording\') {
        startRecording();
    } else {
        stopRecording();
        recordButton.textContent = \'Start Recording\';
        playButton.disabled = false;
        downloadButton.disabled = false;
    }
});

playButton.addEventListener(\'click\', () => {
    const superBuffer = new Blob(recordedBlobs);
    recordedVideo.src = null;
    recordedVideo.srcObject = null;
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
    recordedVideo.controls = true;
    recordedVideo.play();
});

downloadButton.addEventListener(\'click\', () => {
    const blob = new Blob(recordedBlobs, {
        type: \'video/webm\'
    });
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement(\'a\');
    a.style.display = \'none\';
    a.href = url;
    a.download = \'test.webm\';
    document.body.appendChild(a);
    a.click();
    setTimeout(() => {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
});

document.querySelector(\'button#start\').addEventListener(\'click\', async () => {
    const constraints = {
        audio: {},
        video: {
            width: 1280,
            height: 720
        }
    };
    console.log(\'Using media constraints:\', constraints);
    await init(constraints);
});

点击开始初始化

• MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

• 它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

async function init(constraints) {
    try {
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        handleSuccess(stream);
    } catch (e) {
        console.error(\'navigator.getUserMedia error:\', e);
    }
}

function handleSuccess(stream) {
    recordButton.disabled = false;
    console.log(\'getUserMedia() got stream:\', stream);
    window.stream = stream;
    const gumVideo = document.querySelector(\'video#gum\');
    gumVideo.srcObject = stream;
}

开始记录方法

function startRecording() {
    recordedBlobs = [];
    try {
        mediaRecorder = new MediaRecorder(window.stream);
    } catch (e) {
        console.error(\'Exception while creating MediaRecorder:\', e);
        return;
    }

    recordButton.textContent = \'Stop Recording\';
    playButton.disabled = true;
    downloadButton.disabled = true;
    mediaRecorder.onstop = (event) => {
        console.log(\'Recorder stopped: \', event);
        console.log(\'Recorded Blobs: \', recordedBlobs);
    };
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();
}

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div id="container">
        <video id="gum" playsinline autoplay muted></video>
        <video id="recorded" playsinline loop></video>
        <div>
            <button id="start">Start camera</button>
            <button id="record" disabled>Start Recording</button>
            <button id="play" disabled>Play</button>
            <button id="download" disabled>Download</button>
        </div>
    </div>
    <script src="./main.js" async></script>
</body>
</html>

CSS

button {
    background-color: #d84a38;
    border: none;
    border-radius: 2px;
    color: white;
    font-family: \'Roboto\', sans-serif;
    font-size: 0.8em;
    margin: 0 0 1em 0;
    padding: 0.5em 0.7em 0.6em 0.7em;
}

button:active {
    background-color: #cf402f;
}

button:hover {
    background-color: #cf402f;
}

button[disabled] {
    color: #ccc;
}

button[disabled]:hover {
    background-color: #d84a38;
}

div#container {
    margin: 0 auto 0 auto;
    max-width: 60em;
    padding: 1em 1.5em 1.3em 1.5em;
}

video {
    background: #222;
    margin: 0 0 20px 0;
    --width: 100%;
    width: var(--width);
    height: calc(var(--width) * 0.75);
}

webRTC功能是非常强大的，关于webrtc和直播还有很多技术需要我们去研究，上续呢是DEMO的示例代码，感兴趣的小伙伴可以亲自试一试。