diff --git a/README.md b/README.md index 704b7c2b..6b3e7a5f 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ documentation is available at [thewidlarzgroup.github.io/react-native-video/](https://thewidlarzgroup.github.io/react-native-video/) ## Examples -We have examples that will show you basic usage of react-native-video [here](https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples).
-Examples shows [basic](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/BasicExample.tsx) usage and [DRM example](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/DRMExample.tsx) (with a free DRM stream). +You can find several examples demonstrating the usage of react-native-video [here](https://github.com/TheWidlarzGroup/react-native-video/tree/master/examples).
+These include a [basic](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/BasicExample.tsx) usage and [DRM example](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/DRMExample.tsx) (with a [free DRM stream](https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=drm&utm_medium=code)). ## Usage diff --git a/docs/pages/component/drm.mdx b/docs/pages/component/drm.mdx index 4dd1ab73..56704b1c 100644 --- a/docs/pages/component/drm.mdx +++ b/docs/pages/component/drm.mdx @@ -4,16 +4,14 @@ import PlatformsList from '../../components/PlatformsList/PlatformsList.tsx'; ## DRM Example -We have avaliable example for DRM usage in the [example app](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/DRMExample.tsx). -To get token needed for DRM playback you can go to [our site]() and get it. +We have available example for DRM usage in the [example app](https://github.com/TheWidlarzGroup/react-native-video/blob/master/examples/bare/src/DRMExample.tsx). +To get token needed for DRM playback you can go to [our site](https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=drm&utm_medium=docs) and get it. ## Provide DRM data (only tested with http/https assets) You can provide some configuration to allow DRM playback. This feature will disable the use of `TextureView` on Android. -```jsx - DRM object allows this members: ### `base64Certificate` @@ -49,8 +47,8 @@ your `contentId` + the provided certificate via `objc [loadingRequest streamingC contentIdentifier:contentIdData options:nil error:&spcError]; ` Also, you will receive following parameter of getLicense: -* `contentId` contentId if passed to `drm` object or loadingRequest.request.url?.host -* `loadedLicenseUrl` URL defined as `loadingRequest.request.URL.absoluteString`, this url starts with `skd://` or `clearkey://` +* `contentId` contentId if passed to `drm` object or loadingRequest.request.url?.host +* `loadedLicenseUrl` URL defined as `loadingRequest.request.URL.absoluteString`, this url starts with `skd://` or `clearkey://` * `licenseServer` prop if prop is passed to `drm` object. * `spcString` the SPC used to validate playback with drm server diff --git a/examples/bare/src/DRMExample.tsx b/examples/bare/src/DRMExample.tsx index fe260592..f0f56525 100644 --- a/examples/bare/src/DRMExample.tsx +++ b/examples/bare/src/DRMExample.tsx @@ -37,7 +37,7 @@ const DRMExample = () => { // ------------- DMR Token ------------- // This token is used to authenticate the user and get the license - // To run example please go to https://someweb.com (TODO: Insert here real website cc Kamil) and complete the form to receive the token + // To run example please go to https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=drm&utm_medium=code and complete the form to receive the token // After you receive the token, please paste it here const [token, setToken] = React.useState(''); diff --git a/examples/expo/src/BasicExample.tsx b/examples/expo/src/BasicExample.tsx index 6b049a65..98e189de 100644 --- a/examples/expo/src/BasicExample.tsx +++ b/examples/expo/src/BasicExample.tsx @@ -42,9 +42,7 @@ import { } from './constants'; import {Overlay, toast, VideoLoader} from './components'; -type Props = NonNullable; - -const VideoPlayer: FC = ({}) => { +const BasicExample = () => { const [rate, setRate] = useState(1); const [volume, setVolume] = useState(1); const [muted, setMuted] = useState(false); @@ -243,6 +241,10 @@ const VideoPlayer: FC = ({}) => { cacheSizeMB: useCache ? 200 : 0, }; + useEffect(() => { + videoRef.current?.setSource(currentSrc); + }, [currentSrc]); + return ( ); }; -export default VideoPlayer; +export default BasicExample; diff --git a/examples/expo/src/DRMExample.tsx b/examples/expo/src/DRMExample.tsx new file mode 100644 index 00000000..f0f56525 --- /dev/null +++ b/examples/expo/src/DRMExample.tsx @@ -0,0 +1,231 @@ +import * as React from 'react'; +import { + Text, + View, + StyleSheet, + Platform, + ScrollView, + TextInput, + Alert, + Button, + ActivityIndicator, +} from 'react-native'; +import Video, {DRMType, ReactVideoSourceProperties} from 'react-native-video'; + +type SourceType = ReactVideoSourceProperties | null; + +const DRMExample = () => { + const [loading, setLoading] = React.useState(false); + + const [source, setSource] = React.useState(null); + + const [hls, setHls] = React.useState( + 'https://d2e67eijd6imrw.cloudfront.net/559c7a7e-960d-4cd8-9dba-bc4e59890177/assets/47cfca69-91b5-4311-bf6c-b9b1f297ed9b/videokit-720p-dash-hls-drm/hls/index.m3u8', + ); + const [fairplayLicense, setFairplayLicense] = React.useState( + 'https://thewidlarzgroup.la.drm.cloud/acquire-license/fairplay?brandGuid=559c7a7e-960d-4cd8-9dba-bc4e59890177', + ); + const [fairplayCertificate, setFairplayCertificate] = React.useState( + 'https://thewidlarzgroup.la.drm.cloud/certificate/fairplay?brandGuid=559c7a7e-960d-4cd8-9dba-bc4e59890177', + ); + const [dash, setDash] = React.useState( + 'https://d2e67eijd6imrw.cloudfront.net/559c7a7e-960d-4cd8-9dba-bc4e59890177/assets/47cfca69-91b5-4311-bf6c-b9b1f297ed9b/videokit-720p-dash-hls-drm/dash/index.mpd', + ); + const [widevineLicense, setWidevineLicense] = React.useState( + 'https://thewidlarzgroup.la.drm.cloud/acquire-license/widevine?brandGuid=559c7a7e-960d-4cd8-9dba-bc4e59890177', + ); + + // ------------- DMR Token ------------- + // This token is used to authenticate the user and get the license + // To run example please go to https://www.thewidlarzgroup.com/services/free-drm-token-generator-for-video?utm_source=drm&utm_medium=code and complete the form to receive the token + // After you receive the token, please paste it here + const [token, setToken] = React.useState(''); + + const handlePlayStopVideo = () => { + if (source !== null) { + setSource(null); + return; + } + + if (token === '') { + Alert.alert('Error', 'Please enter the token received from the website'); + return; + } + + setLoading(true); + + const newSource: ReactVideoSourceProperties = {}; + + if (Platform.OS === 'ios') { + if (fairplayLicense && fairplayCertificate) { + newSource.uri = hls; + newSource.drm = { + type: DRMType.FAIRPLAY, + licenseServer: fairplayLicense, + certificateUrl: fairplayCertificate, + getLicense: (spcString, contentId, licenseUrl, loadedLicenseUrl) => { + const formData = new FormData(); + formData.append('spc', spcString); + + const resultURL = loadedLicenseUrl.replace('skd://', 'https://'); + + return fetch(`${resultURL}&userToken=${token}`, { + method: 'POST', + headers: { + 'Content-Type': 'multipart/form-data', + Accept: 'application/json', + }, + body: formData, + }) + .then((response) => response.json()) + .then((response) => { + return response.ckc; + }) + .catch((error) => { + console.error('Error', error); + }); + }, + }; + } else { + Alert.alert('Error', 'Please enter Fairplay License and Certificate'); + setLoading(false); + } + } + + if (Platform.OS === 'android') { + if (widevineLicense) { + newSource.drm = { + type: DRMType.WIDEVINE, + licenseServer: widevineLicense, + }; + newSource.uri = dash; + } else { + Alert.alert('Error', 'Please enter Widevine License'); + setLoading(false); + } + } + + setSource(newSource); + }; + + if (Platform.OS !== 'ios' && Platform.OS !== 'android') { + return ( + + DRM is not supported on this platform + + ); + } + + return ( + + DRM Protected Stream Player + + {loading && } + {source && source.uri && ( +