请选择 进入手机版 | 继续访问电脑版

默认
打赏 发表评论 11
想开发IM:买成品怕坑?租第3方怕贵?找开源自已撸?尽量别走弯路了... 找站长给点建议
零基础入门:基于开源WebRTC,从0到1实现实时音视频聊天功能
微信扫一扫关注!

本文由微医云技术团队前端工程师张宇航分享,原题“从0到1打造一个 WebRTC 应用”,即时通讯网有修订和改动。


1、引言


去年初,突如其来的新冠肺炎疫情让线下就医渠道几乎被切断,在此背景下,在线问诊模式快速解决了大量急需就医病患的燃眉之急。而作为在线问诊中重要的一环——医患之间的视频问诊正是应用了实时音视频技术才得以实现。

众所周之,实时音视频聊天技术门槛很高,一般的公司要想在短时间内从零补齐这方面的技术短板相当困难,而开源音视频工程WebRTC提供了这样一个捷径(包括笔者公司的产品在内,同样是基于WebRTC技术才得以达成)。

本文将基于笔者公司开发的在线问诊产品中WebRTC技术的实践经验,讲述的如何基于WebRTC从零开发一个实时音视频聊天功能。文章会从WebRTC的基本知识、技术原理开始,基于开源技术为你演示如何搭建一个WebRTC实时音视频聊天功能。

cover-opti.png

本文已同步发布于“即时通讯技术圈”公众号,欢迎关注。公众号上的链接是:点此进入

2、本文源码


完整源码附件下载:
learn-webrtc-master(52im.net).zip (128.78 KB , 下载次数: 61 , 售价: 1 金币)

即时通讯网 - 即时通讯开发者社区! 来源: - 即时通讯开发者社区!

本帖已收录至以下技术专辑

推荐方案
评论 11
之前也有幸使用了WebRTC搭建了公司项目中的音视频通话模块,这里借这篇文章也回顾总结一下:

WebRTC是基于P2P通信的,但是在连接通道建立好之前,需要经历以下两个过程:
信令交换:交换媒体信息,使通信双方能够对音视频正确地编解码;
网络穿透:交换网络信息,使位于不同局域网的通信双方能够正常建立P2P连接。
这两个过程中涉及的信息都需要服务器帮忙传递,之前在我司做的即时通讯APP中是作为一种特殊类型的消息,交由聊天服务器进行转发的。
连接通道建立完成后,通信双方就可以直接传输媒体流并渲染播放了。
引用:椎锋陷陈 发表于 2021-08-24 11:26
之前也有幸使用了WebRTC搭建了公司项目中的音视频通话模块,这里借这篇文章也回顾总结一下:

WebRTC是基 ...

p2p不通的情况下,也用中转是吧。
你这个应用,应该不是移动端?
签名: 天气忽然就这么冷了!
引用:JackJiang 发表于 2021-08-24 12:56
p2p不通的情况下,也用中转是吧。
你这个应用,应该不是移动端?

就是移动端的
引用:椎锋陷陈 发表于 2021-08-24 13:43
就是移动端的

用是的AppRTC是吧。
签名: 天气忽然就这么冷了!
引用:JackJiang 发表于 2021-08-24 15:09
用是的AppRTC是吧。

用的是Github上的开源项目Signal所封装的WebRTC库:https://github.com/signalapp/lib ... master/release/libs
引用:椎锋陷陈 发表于 2021-08-24 17:17
用的是Github上的开源项目Signal所封装的WebRTC库:https://github.com/signalapp/libwebrtc-android/tre ...

ok 了解了
签名: 天气忽然就这么冷了!
这个demo只能端到端通信?不能实现多端通信吗
引用:Mr.Potter 发表于 2021-08-24 18:43
这个demo只能端到端通信?不能实现多端通信吗

WebRTC本身是针对一对一的,如果要实现多人音视频,你需要找开源的第3方服务
签名: 天气忽然就这么冷了!
我运行demo调用网络端地址的时候 会报错显示
引用:No navigator.mediaDevices

找百度说是1、地址为localhost:// 访问时;2、地址为https:// 时;3、为文件访问file:///;才可以访问到,但我的网络地址是http的,请问这个应该怎么处理呢
签名: 今日签到
引用:edward13th 发表于 2021-08-30 15:54
我运行demo调用网络端地址的时候 会报错显示
找百度说是1、地址为localhost:// 访问时;2、地址为https:// ...

你可以自已搞个自签名的证书
签名: 天气忽然就这么冷了!
打赏楼主 ×
使用微信打赏! 使用支付宝打赏!

返回顶部