专栏首页实时音视频小程序端WebRTC实时音视频-小程序端WebRTC互通
原创

实时音视频-小程序端WebRTC互通

版本支持

我们在 LiteAVSDK 的最新版本里面加入了对 WebRTC 的支持能力,并且已经跟随微信APP的 6.6.6 版本发布出来,此文档主要介绍如何使用原生的 <live-pusher> 和 <live-player> 标签实现 WebRTC 互通能力。

接入成本

此文档介绍的方法接入成本偏高,适合喜欢全面定制的同学;我们同步提供了一套封装度更高的自定义组件方案 —— <webrtc-room> ,更加推荐您来使用。

接入流程

step1. 开通云服务

小程序跟 WebRTC 的互通是基于实时音视频TRTC服务实现的,需要开通该服务。

注册账号之前点先领取腾讯云2860元代金券,用于购买腾讯云CVM云服务器、云数据库产品时可以用来抵用,节约财务成本。

  • 进入实时音视频管理控制台,如果服务还没有开通,点击申请开通,之后会进入腾讯云人工审核阶段,审核通过后即可开通。
  • 服务开通后,进入管理控制台 创建实时音视频应用,点击【确定】按钮即可。
  • 从实时音视频控制台获取sdkAppID、accountType、privateKey,在 step4 中会用的:

step2. 生成key信息

按照如下表格获取关键的key信息,这是使用腾讯云互通直播服务所必须的几个信息:

KEY

示例

作用

获取方案

sdkappid

1400087915

用于计费和业务区分

上文中有介绍

userid

xiaoming

用户名

可以由您的服务器指定,或者使用小程序的openid

usersig

加密字符串

相当于 userid 对应的登录密码

由您的服务器签发(PHP / JAVA)

roomid

12345

房间号

可以由您的服务器指定

privateMapKey

加密字符串

进房票据:相当于是进入 roomid 的钥匙

由您的服务器签发(PHP / JAVA)

下载 sign_src.zip 可以获得服务端签发 usersig 和 privateMapKey 的示例代码。

生成 usersig 和 privateMapKey 的签名算法是 ECDSA-SHA256

step3. 获取roomsig

小程序端可以通过如下 url 向腾讯云请求 roomsig,roomsig 是小程序跟 WebRTC 互通必须的关键信息,请求 roomsig 所使用的关键信息已经在 step2 中做了详细描述 (这里的 identifier 就是上文中的 userid ):

https://official.opensso.tencent-cloud.com/v4/openim/jsonvideoapp?
       sdkappid=xxx&identifier=xiaoming&usersig=yyy&random=9999&contenttype=json
body:
{
    "ReqHead":
    {
        "Cmd":1,                               //命令字,固定填1
        "SeqNo":1,                             //请求序列号,uint32
        "BusType": 7,                          //业务类型,固定填7
        "GroupId": 10001                       //群组Id(房间Id),uint32
    },
    "ReqBody":
    {
        "PrivMap": 255,                        //非必填,明文权限位
        "PrivMapEncrypt": "ed868cdc281d8b",    //必填,权限位加密串
        "IsIpRedirect": 0,                     //非必填,默认0;0非重定向;1是重定向
        "TerminalType": 1,                     //必填,终端类型,对应0x109中的TERMINAL_TYPE;Android:4;ios:2;
        "FromType": 3,                         //必填,请求来源类型:1:avsdk;2:webrtc;3:微信小程序;
        "SdkVersion": 26280566                 //非必填,整型版本号
    }
}

Attention: 获取roomsig的操作必须在客户端完成,后台完成会引入选路错位问题,导致视频卡顿严重。

step4. 拼装URL

如果希望将小程序跟 WebRTC 打通,不能使用普通的 rtmp:// 推流地址,而是使用新的 room:// 协议的推流地址,该地址的格式如下:

room://cloud.tencent.com?sdkappid=xxx&roomid=12345&userid=xiaoming&roomsig=yyy

step5. 加入(或创建)房间

在小程序的 <live-pusher> 标签里,指定 url 属性为 step4 中拼装出的url,这相当于进入指定的 roomid, <live-pusher> 的 视频画面会显示本地摄像头的影像。

如果您指定的 roomid 是第一次使用,腾讯云后台会自动为您创建一个房间号为 roomid 的房间。

step6. 远程的视频画面

step5 解决了本地camera画面的问题,远程的画面怎么获取呢?

当 <live-pusher> 开始推流后,腾讯云会通过 onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020) 通知您的小程序代码:房间里还有哪些人?

当有新的人加入房间以后,<live-pusher> 也会重新通知 onPushEvent (PUSH_EVT_ROOM_USERLIST = 1020),这样客户可以根据 ROOM_USERLIST 的变化,了解房间里有哪些人进入了,或者哪些人离开了。

ROOM_USERLIST 里每一项都是一个二元组(如果是 1v1 的视频通话,ROOM_USERLIST 里只会有一个人): useridplayurl。 userid 代表是哪个用户, playurl 则是这个用户远程画面的播放地址。

ROOM_USERLIST内容格式如下:

{
    "userlist": [
        {
            "userid": "webrtc11",
            "playurl": "room://183.3.225.15:1935/webrtc/1400037025_107688_webrtc11"
        },
        {
            "userid": "webrtc12",
            "playurl": "room://183.3.225.15:1935/webrtc/1400037025_107688_webrtc12"
        }
    ]
}

之后,使用 <live-player> 标签,并指定 src 为 ROOM_USERLIST 里的 playurl, 即可看到远程画面了。

小程序跟 WebRTC 的互通是基于实时音视频TRTC服务实现的,需要开通该服务。

注册账号之前点先领取腾讯云2860元代金券,用于购买腾讯云CVM云服务器、云数据库产品时可以用来抵用,节约财务成本。

1、腾讯云产品3折特惠,热门云产品3折起,服务更稳,速度更快,价格更优

2、腾讯云服务器钜惠,助力中小微企业发展

step7. Chrome 对接

了解腾讯云官网的 webrtc 服务,可以对接 Chrome 端的 H5 视频通话,因为不是本文档的重点,此处不做赘述。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

相关文章

  • 腾讯云网站备案咨询解答:如何进行备案

    在腾讯云备案网站过程中难免会遇到这样那样的问题,幸好老魏总结了一部分答案,可以帮助大家顺利过关。现在分享出来,希望对正在备案中或者打算要备案的你有用。

    魏艾斯博客www.vpsss.net
  • 服务器登录ssh配置:快速免密登录

    在本地客户端环境 (MAC) 上配置 ssh-config,使其更方便地访问云服务器

    用户2936213
  • 使用腾讯云服务器搭建网站【PHP+MYSQL环境】教程

    到目前为止本人做网站已经有半年了,对服务器配置略有了解。目前基本掌握了在cent os和windows server 2008/2012系统下搭建PHP+MYS...

    用户6475907
  • 10分钟在腾讯云搭建Web服务器,就是快

    Web服务器由于它的安全,方便,简洁等优点,已经成为目前使用规模最广的服务器。个人或者企业搭建网站是万万不能离开它的,然而搭建Web服务器却对于一部分非专业人士...

    用户6494714
  • 服务器IP如何绑定域名(基于腾讯云)?

    现在很多提供SSL证书的商家,各品牌SSL证书价格与几千到十几万不等,腾讯云作为云计算领域的大公司,也提供有付费SSL证书产品,点击查看腾讯云SSL证书产品。点...

    用户6486648
  • 国内品牌云服务器综合评价 云服务器哪家好?

    云服务器哪家好?如今云服务在国内的应用越来越广泛,不仅仅是企业和站长,很多办公软件和应用平台也在使用云。而主机市场上目前的云服务商众多,以至于用户在选择的时候不...

    用户6494883
  • 腾讯云首次备案流程--新手必看教程

    在国内建站就得提前做好备案,有了备案号就可以开通网站了。今天和大家唠唠腾讯云首次备案如何操作。

    用户6495635
  • 腾讯云服务器web环境配置教程

    腾讯云服务器是现在越来越多站长以及企业建站的首选了,因为腾讯云背靠腾讯这颗大树,有10亿微信用户和10亿QQ用户流量考验验做为背书,有足够的技术实力和奖金实力让...

    用户6479256
  • 如何通过远程服务器搭建网站

    首先,申明下本文所指的新人是指会上网站看网页,会自己聊QQ,会在新浪、网易等平台上写博客的人。当然你要说这个只要会上网的人都会了,是的,我所指的新人就是会上网的...

    用户2924633
  • 开发部署移动APP如何选择腾讯云服务器配置?

    开发部署移动APP如何选择腾讯云服务器配置呢?随着移动互联网的飞速发展,智能手机的逐渐普及,现在大部分人用的手机都是智能手机,大家在手机上安装自己喜欢和常用的a...

    用户6488268

扫码关注云+社区

领取腾讯云代金券