【SSD系列】共享桌面,3分钟自己实现一个吧,还能听见麦克风声音哦

简介: 关于【SSD系列】:前端一些有意思的内容,旨在3-10分钟里, 500-1000字,有所获,又不为所累。共享桌面程序,哇,高大尚耶!其实不然,让我带你3分钟实现桌面共享程序,还能听到对面说话哦。

前言


关于【SSD系列】:


前端一些有意思的内容,旨在3-10分钟里, 500-1000字,有所获,又不为所累。


共享桌面程序,哇,高大尚耶!其实不然,让我带你3分钟实现桌面共享程序,还能听到对面说话哦。


效果演示和源码


两个Tab标签,一个是分享者,一个是观众。分享桌面源码


顺便问一下,怎么把声音保存到gif图里面去????


1.JPG


思路


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


其核心 Screen Capture API +  WebRTC API, 我们一起来了解一波。


Screen Capture API - 屏幕捕捉API


MDN解释:


屏幕捕获API,对现有的媒体捕获和流API进行了补充,让用户选择一个屏幕或屏幕的一部分(如一个窗口)作为媒体流进行捕获。然后,该流可以被记录或通过网络与他人共享。


先看动态,再看代码:


2.JPG


仅仅只需 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系列的准则: 3-10分钟里, 500-1000字,有所获,又不为所累。 我自行实现,字数会超,而且还要有中转服务器。罢了,借助声网吧。


声网 agora, 为什么是他,因为他一个月免费 10000 分钟, 做测试和个人使用是完全够了的。 其底层的基本原理上面已经说过了,核心就是Screen Capture API + Web RTC


当然声网还支持摄像头,麦克风等等其他流的推送,摄像头和麦克风是 MediaDevices相关的内容不做过多的解释。


注册账号


声网管理台登录或者注册,链接地址已给,自行操作即可。


创建应用


详情参见 跑通示例项目, 里面有详细的步骤教你创建应用,以及获得AppIDToken


SDK下载


去这里下载 Agora SDK下载


分享者代码编写


这里有一个参数理解一下:


  1. appId: 应用ID
  2. channel:  渠道,你可以理解为房间
  3. token:票证
  4. uid: 用户ID
  5. role: 用户角色,有主播和观众两种


核心代码:


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);
}
复制代码


demo完整的代码


分享桌面源码


小结


是不是很简单,一切都看起来没那么难,这样,你才容易入坑啊。


写在最后


写作不易,你的一赞一评就是我前行的最大动力。





相关文章
|
6月前
|
Shell 文件存储 Android开发
智能电视安装VLC配合frpc实现播放远程群晖NAS上的电影
智能电视安装VLC配合frpc实现播放远程群晖NAS上的电影
983 0
|
Android开发 开发者
Android平台GB28181设备接入端如何实现本地录像?
实现Android平台GB28181设备接入的时候,有个功能点不可避免,那就是本地录像,实际上,在实现GB28181设备接入模块之前,我们前些年做RTMP推送和轻量级RTSP服务的时候,早已经实现了本地录像功能。
101 0
|
Android开发 开发者
Android平台GB28181设备接入端如何调节实时音量?
我们在对接Android平台GB28181设备接入端的时候,有开发者提出这样的疑惑,如何调整设备接入端的实时音量?
|
Android开发 iOS开发
【资源共享】手机共享摄像头给电脑用
【资源共享】手机共享摄像头给电脑用
431 0
|
存储 人工智能 编解码
全国产化GB28181播放器(国产芯片、操作系统、摄像头等)
MetaX 国产播放器 ,支持国产操作系统(麒麟、统信等)、国产芯片、国产CPU等
455 0
成功解决电脑麦克风不管用、电脑无法录制声音之出现的麦克风Realtek(R) Audio未插入
成功解决电脑麦克风不管用、电脑无法录制声音之出现的麦克风Realtek(R) Audio未插入
成功解决电脑麦克风不管用、电脑无法录制声音之出现的麦克风Realtek(R) Audio未插入
|
存储 固态存储 前端开发
【SSD系列】五分钟,100余行代码,纯web技术一起实现摄像头和麦克风视频录制,并带历史记录功能
关于关于【SSD系列】: 前端一些有意思的内容,旨在3-10分钟里, 500-1500字,有所获,又不为所累。 如题,今天我们用纯web技术,实现摄像头+麦克风 视频的录制功能,代码约100余行
219 0
【SSD系列】五分钟,100余行代码,纯web技术一起实现摄像头和麦克风视频录制,并带历史记录功能