RN的WebRTC模块 – react-native-webrtc

2019-09-12 11:49:04 268 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

weixin_38054276 墨衍会员 · AI 创作全网分发关注 + 加入社区

微信H5网页授权通用方案：中转页破解域名限制，适配Hash/History路由在Web开发中，OAuth 2.0授权码模式是实现第三方登录的通用标准，其核心原理是通过授权服务器颁发临时代码，再由客户端交换访问令牌。这一机制在微信公众号H5开发中尤为重要，用于安全获取用户身份。然而，微信平台对网页授权回调域名有严格的数量限制，这成为多子域名、多环境及微前端架构下业务扩展的主要瓶颈。其技术价值在于通过设计一个统一的中转授权页，将授权逻辑与业务逻辑解耦，让所有业务页面共享一个已配置的授权入口，从而突破域名配额限制。该方案的关键在于适配不同的前端路由模式，需精准处理Hash模式与Histor 阅读详情

react-native-webrtc React Native的WebRTC模块。支持目前支持iOS 和 Android. 支持视频和音频交流. 支持数据通道你可以使用它创建一个 iOS/Android应用，可以与web浏览器交流. 使用方法你可以像在浏览器中一样使用WebRTC，在你的index.ios.js/index.android.js你可以require WebRTC 以导入RTCPeerConnection, RTCSessionDescription等。 var WebRTC = require('react-native-webrtc'); var { RTCPeerConnection, RTCIceCandidate, RTCSessionDescription, RTCView, MediaStream, MediaStreamTrack, getUserMedia, } = WebRTC; 使用RTCPeerConnection, RTCSessionDescription 和 RTCIceCandidate类似浏览器。 var configuration = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]}; var pc = new RTCPeerConnection(configuration); let isFront = true; MediaStreamTrack.getSources(sourceInfos => { console.log(sourceInfos); let videoSourceId; for (const i = 0; i < sourceInfos.length; i++) { const sourceInfo = sourceInfos[i]; if(sourceInfo.kind == "video" && sourceInfo.facing == (isFront ? "front" : "back")) { videoSourceId = sourceInfo.id; } } getUserMedia({ audio: true, video: { mandatory: { minWidth: 500, // Provide your own width, height and frame rate here minHeight: 300, minFrameRate: 30 }, facingMode: (isFront ? "user" : "environment"), optional: (videoSourceId ? [{sourceId: videoSourceId}] : []) } }, function (stream) { console.log('dddd', stream); callback(stream); }, logError); }); pc.createOffer(function(desc) { pc.setLocalDescription(desc, function () { // Send pc.localDescription to peer }, function(e) {}); }, function(e) {}); pc.onicecandidate = function (event) { // send event.candidate to peer }; // also support setRemoteDescription, createAnswer, addIceCandidate, onnegotiationneeded, oniceconnectionstatechange, onsignalingstatechange, onaddstream 渲染RTCView. var container; var RCTWebRTCDemo = React.createClass({ getInitialState: function() { return {videoURL: null}; }, componentDidMount: function() { container = this; }, render: function() { return ( <View> <RTCView streamURL={this.state.videoURL}/> </View> ); } }); 设置RTCView的stream container.setState({videoURL: stream.toURL()});

...全文