npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@daiosfoundation/react-native-vlc-media-player

v0.0.2

Published

React native media player for video streaming and playing. Supports RTSP,RTMP and other protocols supported by VLC player

Downloads

1

Readme

Forked By DaiosFoundation

react-native-vlc-media-player

A <VLCPlayer> component for react-native project was initially cloned from react-native-yz-vlcplayer And been actively maintaining it as original repo is not been maintained by the owner.

Supported RN Versions

0.59,0.60,0.61, 0.62 and up PODs are updated to works with 0.61 and up.(Tested in 0.61.5 and 0.62)

Sample repo

VLC Media Player test

Supported formats

Support for network streams, RTSP, RTP,RTMP, HLS, MMS. Play all files, in all formats, including exotic ones, like classic VLC media player. Play MKV, multiple audio tracks (including 5.1), and subtitles tracks (including SSA!)

Add it to your project

Run

npm i react-native-vlc-media-player --save

Run react-native link react-native-vlc-media-player

android

Should work without any specific settings

ios

  1. cd to ios
  2. run pod init (if only Podfile has not been generated in ios folder)
  3. (No need if you are running RN 0.61 and up) add pod 'MobileVLCKit', '3.3.10' to pod file
  4. run pod install (you have to delete the app on the simulator/device and run react-native run-ios again)

Optional(only for ios)

Enable Bitcode in root project select Build Settings ---> find Bitcode and select Enable Bitcode

More formats

Container formats: 3GP, ASF, AVI, DVR-MS, FLV, Matroska (MKV), MIDI,QuickTime File Format, MP4, Ogg, OGM, WAV, MPEG-2 (ES, PS, TS, PVA, MP3), AIFF, Raw audio, Raw DV, MXF, VOB, RM, Blu-ray, DVD-Video, VCD, SVCD, CD Audio, DVB, HEIF, AVIF Audio coding formats: AAC, AC3, ALAC, AMR, DTS, DV Audio, XM, FLAC, It, MACE, MOD, Monkey's Audio, MP3, Opus, PLS, QCP, QDM2/QDMC, RealAudio, Speex, Screamtracker 3/S3M, TTA, Vorbis, WavPack, WMA (WMA 1/2, WMA 3 partially). Capture devices: Video4Linux (on Linux), DirectShow (on Windows), Desktop (screencast), Digital TV (DVB-C, DVB-S, DVB-T, DVB-S2, DVB-T2, ATSC, Clear QAM) Network protocols: FTP, HTTP, MMS, RSS/Atom, RTMP, RTP (unicast or multicast), RTSP, UDP, Sat-IP, Smooth Streaming Network streaming formats: Apple HLS, Flash RTMP, MPEG-DASH, MPEG Transport Stream, RTP/RTSP ISMA/3GPP PSS, Windows Media MMS Subtitles: Advanced SubStation Alpha, Closed Captions, DVB, DVD-Video, MPEG-4 Timed Text, MPL2, OGM, SubStation Alpha, SubRip, SVCD, Teletext, Text file, VobSub, WebVTT, TTML Video coding formats: Cinepak, Dirac, DV, H.263, H.264/MPEG-4 AVC, H.265/MPEG HEVC, AV1, HuffYUV, Indeo 3,MJPEG, MPEG-1, MPEG-2, MPEG-4 Part 2, RealVideo 3&4,Sorenson, Theora, VC-1,[h] VP5,VP6, VP8, VP9, DNxHD, ProRes and some WMV.

TODO

  1. Android video Aspect ratio and other params does not work(Events are called but all events come through a single event onVideoStateChange but the JS side does not implement it.).

Got a few minutes to spare? Please help us to keep this repo up to date and simple to use.

Our idea was to keep the repo simple, and people can use it with newer RN versions without any additional config.

  1. Get a fork of tis repo and clone VLC Media Player test
  2. Run it for ios and android locally using your fork, and do the changes. (remove this package using npm remove react-native-vlc-media-player and install the forked version from git hub npm i https://git-address-to-your-forked-repo)
  3. Verify your changes and make sure everything works on both platforms. (If you need a hand with testing I might be able to help as well)
  4. Send PR.
  5. Be happy, Coz you are a Rockstart 🌟 ❤️

Use

  (1) import { VLCPlayer, VlCPlayerView } from 'react-native-vlc-media-player';

  (2)
    <VLCPlayer
           ref={ref => (this.vlcPlayer = ref)}
           style={[styles.video]}
           videoAspectRatio="16:9"
           paused={this.state.paused}
           source={{ uri: this.props.uri}}
           onProgress={this.onProgress.bind(this)}
           onEnd={this.onEnded.bind(this)}
           onBuffering={this.onBuffering.bind(this)}
           onError={this._onError}
           onStopped={this.onStopped.bind(this)}
           onPlaying={this.onPlaying.bind(this)}
           onPaused={this.onPaused.bind(this)}
       />
  (3) or use
    <VlCPlayerView
           autoplay={false}
           url={this.state.url}
           Orientation={Orientation}
           //BackHandle={BackHandle}
           ggUrl=""
           showGG={true}
           showTitle={true}
           title=""
           showBack={true}
           onLeftPress={()=>{}}
           startFullScreen={() => {
              this.setState({
              isFull: true,
             });
           }}
           closeFullScreen={() => {
              this.setState({
              isFull: false,
             });
           }}
       />

credits

ammarahm-ed Nghi-NV xuyuanzhou

sponsors

Huge thanks to "smartlife - one of the best custom home automation companies in new zealand" for helping me to keep this repo maintained

Author - Roshan Milinda -> roshan.digital