首页 > 其他分享 >react native 直播试探之旅

react native 直播试探之旅

时间:2022-12-07 10:15:12浏览次数:67  
标签:预览 react 直播 拉流 推流 native

第一次做直播功能,一次尝试
使用腾讯云直播
结果:android可以观看直播,有延迟
ios:
The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain".
推流使用 obs
1,推流地址可以先从腾讯云直播控制台生成
2,推流,使用obs
在这里插入图片描述

3,查看直播是否开始

在这里插入图片描述

可以看预览
4,拉流 获取观看地址
收集了一些关于获取拉流的信息

在这里插入图片描述

不过都没有什么luan用
实际上在并没有找到应该填写的拉流地址,
因为在控制台中可以看到直播预览,所以我心生一计,他这个直播预览是从哪拿的呢,于是我按下了F12

在这里插入图片描述

可以看到有一条先一直在延续,每错就是他了,点开查看

在这里插入图片描述

将它的请求地址复制,放到react-native 视频播放插件的source上,android上就出现了画面

import { Video } from "expo-av";
//...
      <Video
        ref={videoRef}
        rate={1.0}
        source={{
          uri: "https://125087.liveplay.myqcloud.com/live/testpush.flv",
        }}
        volume={1.0}
        isMuted={false}
        resizeMode="cover"
        // shouldPlay
        // isLooping
        useNativeControls
        style={{ width: "100%", height: 200 }}
        one rror={onError}
      />

这并不算是实现了,不过这是一个开始,让我开始下一次探索
腾讯云CNAME配置
https://blog.csdn.net/qq_40826452/article/details/105752050

标签:预览,react,直播,拉流,推流,native
From: https://www.cnblogs.com/sexintercourse/p/16962249.html

相关文章

  • reactNative之react-native-picker
    在rn中使用react-native-picker选择器,总结如下。一、下载npminstallreact-native-picker--savereact-nativelink二、安卓端配置1.文件./android/settings.grad......
  • Airbnb 宣布放弃使用 React Native,回归使用原生技术
    昨日,Airbnb技术团队在Medium 上宣布,Airbnb放弃使用ReactNative,将回归到使用基于原生技术的自有框架开发App。Airbnb表示,尽管很多团队都依赖ReactNative并计......
  • React Native是初创企业的正确选择
    Ifyouhaveeverworkedatastartuporknowsomeonewhodoes,youknowthatingeneral,employeeshavetheirhandsfull,everydayoftheworkweek,whichi......
  • ReactNative入门 —— 动画篇(上)
    ReactNative入门——动画篇(上) 在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式......
  • 最灵活的UI控件库:React Native UI Lib
    最灵活的UI控件库:ReactNativeUILib猿类素敌已关注32018.02.0414:50:48字数2,513阅读46,152前言我从11年开始写Objective-C。记得当时开源的UI控件库还不是......
  • React Native实现基于HLS协议的视频直播应用
    ReactNative实现基于HLS协议的视频直播应用hsay已关注0.4422017.12.2809:11:31字数921阅读6,395ReactNative(以下简称RN)给我们提供了一种开发原生应用的新......
  • Taro 3.2 版本正式发布:React Native 支持,王者归来
    Taro3.2版本正式发布:ReactNative支持,王者归来凹凸实验室软件更新1年前阅读222Taro 是一个开放式 跨端跨框架 解决方案,支持使用React/Vue/Nerv等框架来开发......
  • 前端react面试题指北
    在调用setState之后发生了什么状态合并,触发调和:setState函数之后,会将传入的参数对象与当前的状态合并,然后出发调用过程根据新的状态构建虚拟dom树经过调和过程,rea......
  • React的useLayoutEffect和useEffect执行时机有什么不同
    我们先看下React官方文档对这两个hook的介绍,建立个整体认识useEffect(create,deps):该Hook接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内(这......
  • react面试题总结一波,以备不时之需
    React组件的构造函数有什么作用?它是必须的吗?构造函数主要用于两个目的:通过将对象分配给this.state来初始化本地状态将事件处理程序方法绑定到实例上所以,当在Reactcl......