【Серия SSD】Поделитесь рабочим столом, создайте его за 3 минуты и услышите звук микрофона

внешний интерфейс JavaScript

Это 6-й день моего участия в августовском испытании обновлений.Подробности о мероприятии:Испытание августовского обновления.

предисловие

О 【Серии SSD】:
Некоторый интересный контент на переднем конце, нацеленный на 500-1000 слов за 3-10 минут, чтобы получить что-то, не перегружаясь.
Делитесь настольными программами, вау, высокий и благородный! На самом деле, позвольте мне занять вас 3 минуты, чтобы реализовать программу совместного использования рабочего стола, и вы также можете услышать противоположную сторону.

Демонстрация эффекта и исходный код

Две вкладки, одна для пользователей, а другая для зрителей.Поделитесь исходным кодом рабочего стола
Кстати, как сохранить звук в гифку? ? ? ?

deskShare.gif

идеи


用户1 ==> Screen Capture API  ===>  Web RTC  ===>  User2 Video 标签播放

его ядроScreen Capture API + WebRTC API, давайте разбираться вместе.

Screen Capture API- API захвата экрана

МДН объясняет:

API захвата экрана, который дополняет существующие API захвата и потоковой передачи мультимедиа, позволяет пользователю выбрать экран или часть экрана (например, окно) для захвата в качестве медиапотока. Затем поток можно записать или поделиться с другими пользователями по сети.

Сначала посмотрите на динамику, затем посмотрите на код:

desk1.gif

нужно10Разве не остыть, что вы можете отобразить рабочий стол на веб-странице всего несколькими строками кода.

    <video id="deskVideo" autoplay controls></video>
    <script>
        (async function captureDesk() {
            deskVideo.srcObject = await navigator.mediaDevices.getDisplayMedia({
                video: {
                    cursor: "always"
                },
                audio: false
            });
        })();
    </script>

Web RTC

MDN

WebRTC(Web Real-Time Communications) — технология связи в режиме реального времени, позволяющая сетевым приложениям или сайтам устанавливать одноранговые (Peer-to-Peer) соединения между браузерами без использования посредников для достижения потоковой передачи видео и (или) Передача аудиопотоков или других произвольных данных.

Мы понимаем, что это технология передачи «точка-точка», и этого достаточно, чтобы решить проблему передачи.

выполнить

Следуйте рекомендациям серии SSD: 500–1000 слов за 3–10 минут, выиграйте что-нибудь, не перегружаясь. Реализую сам, количество слов превысит, и должен быть сервер пересылки. Вот и все, с помощью звукового интернет-кафе.

звук чистой агоры, зачем он, ведь он месяц свободен10000минут, для тестирования и личного использования вполне достаточно. Основополагающие базовые принципы были упомянуты выше, и ядром являетсяScreen Capture API + Web RTC.

Конечно, звуковая сеть также поддерживает передачу других потоков, таких как камеры, микрофоны и т. д. Камера и микрофонMediaDevicesСвязанное содержание не объясняется слишком много.

Зарегистрировать аккаунт

Консоль управления звуковой сетью Войти или Зарегистрироваться, адрес ссылки дан, можете сделать сами.

Создать приложение

Подробнее см.Выполните пример проекта, Есть подробные шаги, чтобы научить вас создавать приложение и получатьAppIDа такжеToken

скачать SDK

иди сюда скачатьАгора SDK скачать

Написание общего кода

Вот параметр для понимания:

  1. appId: идентификатор приложения
  2. канал: канал, вы можете понимать это как комнату
  3. жетон: билет
  4. uid: идентификатор пользователя
  5. роль: роль пользователя, есть два вида якоря и аудитории

Основной код:

async function startBasicLive() {
    rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" }); // 初始化客户端
    rtc.client.setClientRole(options.role);  // 设置角色

    const uid = await rtc.client.join(options.appId, options.channel, options.token, options.uid);       
    rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack(); // 麦克风
    rtc.localVideoTrack = await AgoraRTC.createScreenVideoTrack();  // 桌面

    // 将这些音视频轨道对象发布到频道中。
    await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
    console.log("publish success!");
}
btnShareDesk.onclick = startBasicLive; // 注册点击事件

Написание кода аудитории

основной код

async function startBasicLive() {
    rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
    rtc.client.setClientRole(options.role);

    rtc.client.on("user-published", async (user, mediaType) => {
         // 开始订阅远端用户。
        await rtc.client.subscribe(user, mediaType);
        console.log("subscribe success", mediaType);

        // 表示本次订阅的是视频。
        if (mediaType === "video") {
            // 订阅完成后，从 `user` 中获取远端视频轨道对象。
            const remoteVideoTrack = user.videoTrack;
            // 动态插入一个 DIV 节点作为播放远端视频轨道的容器。
            const playerContainer = document.createElement("div");
            // 给这个 DIV 节点指定一个 ID，这里指定的是远端用户的 UID。
            playerContainer.id = user.uid.toString();
            playerContainer.style.width = "640px";
            playerContainer.style.height = "480px";
            document.body.append(playerContainer);

            // 订阅完成，播放远端音视频。
            // 传入 DIV 节点，让 SDK 在这个节点下创建相应的播放器播放远端视频。
            remoteVideoTrack.play(playerContainer);
        }

        // 表示本次订阅的是音频。
        if (mediaType === "audio") {
            // 订阅完成后，从 `user` 中获取远端音频轨道对象。
            const remoteAudioTrack = user.audioTrack;
            // 播放音频因为不会有画面，不需要提供 DOM 元素的信息。
            remoteAudioTrack.play();
        }
    });   
    const uid = await rtc.client.join(options.appId, options.channel, options.token, null);
    console.log("uid", uid);
}

демонстрационный полный код

Поделитесь исходным кодом рабочего стола

резюме

Не правда ли, все очень просто, все не кажется таким сложным, чтобы можно было легко попасть в яму.

напиши в конце

Писать нелегко, ваши лайки и комментарии — самая большая мотивация для меня двигаться вперед.

ссылка

Web RTC
Screen Capture API
Media Devices
Реализовать живое видео
Выполните пример проекта

Категории