diff --git a/en/application-dev/media/audio-playback.md b/en/application-dev/media/audio-playback.md index 2fccef4e22c1f1779b7dee4cb5ccf583bfb86675..004be69abbed405f4ec02ff9fb56739ffa180834 100644 --- a/en/application-dev/media/audio-playback.md +++ b/en/application-dev/media/audio-playback.md @@ -6,7 +6,13 @@ You can use audio playback APIs to convert audio data into audible analog signal **Figure 1** Playback status -![en-us_image_20220117](figures/en-us_image_20220117.jpg) +![en-us_image_audio_state_machine](figures/en-us_image_audio_state_machine.png) + + + +**Figure 2** Layer 0 diagram of audio playback + +![en-us_image_audio_player](figures/en-us_image_audio_player.png) ## How to Develop @@ -98,7 +104,7 @@ audioPlayer.stop(); // Trigger the 'stop' event cal // 9. Reset the playback resources. audioPlayer.reset(); // Trigger the 'reset' event callback, and reconfigure the src attribute to switch to the next song. // 10. Release the resource. -audioPlayer.release(); // Release the AudioPlayer resource. +audioPlayer.release(); // Release the AudioPlayer instance. audioPlayer = undefined; ``` diff --git a/en/application-dev/media/figures/en-us_image_20220117.jpg b/en/application-dev/media/figures/en-us_image_20220117.jpg deleted file mode 100644 index 3442add1bf969cc8ea89d201cf2e6e6c42321b99..0000000000000000000000000000000000000000 Binary files a/en/application-dev/media/figures/en-us_image_20220117.jpg and /dev/null differ diff --git a/en/application-dev/media/figures/en-us_image_audio_player.png b/en/application-dev/media/figures/en-us_image_audio_player.png new file mode 100644 index 0000000000000000000000000000000000000000..4edcec759e7b8507d605823f157ba9c6c1108fcd Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_audio_player.png differ diff --git a/en/application-dev/media/figures/en-us_image_audio_recorder_state_machine.png b/en/application-dev/media/figures/en-us_image_audio_recorder_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..8cd657cf19c48da5e52809bad387984f50d5a3c7 Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_audio_recorder_state_machine.png differ diff --git a/en/application-dev/media/figures/en-us_image_audio_recorder_zero.png b/en/application-dev/media/figures/en-us_image_audio_recorder_zero.png new file mode 100644 index 0000000000000000000000000000000000000000..7c33fcc1723fcdcc468bd3a6004de8b03b20100b Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_audio_recorder_zero.png differ diff --git a/en/application-dev/media/figures/en-us_image_audio_state_machine.png b/en/application-dev/media/figures/en-us_image_audio_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..61dff28765ff16f37cc05e33d6e8464343e2a5ae Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_audio_state_machine.png differ diff --git a/en/application-dev/media/figures/en-us_image_video_player.png b/en/application-dev/media/figures/en-us_image_video_player.png new file mode 100644 index 0000000000000000000000000000000000000000..f9b4aabdc7215f22788d92c68ef353fafffda1c3 Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_video_player.png differ diff --git a/en/application-dev/media/figures/en-us_image_video_recorder_state_machine.png b/en/application-dev/media/figures/en-us_image_video_recorder_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..3e81dcc18d1f47b6de087a7a88fd75b308ea51a0 Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_video_recorder_state_machine.png differ diff --git a/en/application-dev/media/figures/en-us_image_video_recorder_zero.png b/en/application-dev/media/figures/en-us_image_video_recorder_zero.png new file mode 100644 index 0000000000000000000000000000000000000000..a7f7fa09392eb916132d891a84d62f31f0f27782 Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_video_recorder_zero.png differ diff --git a/en/application-dev/media/figures/en-us_image_video_state_machine.png b/en/application-dev/media/figures/en-us_image_video_state_machine.png new file mode 100644 index 0000000000000000000000000000000000000000..c0595ed5120b632142d6da8841c9e45277b10f55 Binary files /dev/null and b/en/application-dev/media/figures/en-us_image_video_state_machine.png differ diff --git a/en/application-dev/media/video-playback.md b/en/application-dev/media/video-playback.md new file mode 100644 index 0000000000000000000000000000000000000000..23bf8b98dbdc11b3663c04c9490661c4b216c420 --- /dev/null +++ b/en/application-dev/media/video-playback.md @@ -0,0 +1,373 @@ +# Video Playback Development + +## When to Use + +You can use video playback APIs to convert video data into visible signals, play the signals using output devices, and manage playback tasks. This document describes the following video playback development scenarios: full-process, normal playback, video switching, and loop playback. + +**Figure 1** Video playback state transition + +![en-us_image_video_state_machine](figures/en-us_image_video_state_machine.png) + + + +**Figure 2** Layer 0 diagram of video playback + +![en-us_image_video_player](figures/en-us_image_video_player.png) + +Note: Video playback requires hardware capabilities such as display, audio, and codec. + +1. A third-party application obtains a surface ID from the Xcomponent. +2. The third-party application transfers the surface ID to the VideoPlayer JS. +3. The media service flushes the frame data to the surface buffer. + +## How to Develop + +For details about the APIs used for video playback, see [js-apis-media.md](../reference/apis/js-apis-media.md). + +### Full-Process Scenario + +The full video playback process includes creating an instance, setting the URL, setting the surface ID, preparing for video playback, playing video, pausing playback, obtaining track information, seeking to a playback position, setting the volume, setting the playback speed, stopping playback, resetting the playback configuration, and releasing resources. + +```js +let videoPlayer = undefined; // Used to store instances created by calling the createVideoPlayer method. +let surfaceID = undefined; // Used to save the surface ID returned by the Xcomponent interface. + +// Report an error in the case of a function invocation failure. +function failureCallback(error) { + console.info(`error happened,error Name is ${error.name}`); + console.info(`error happened,error Code is ${error.code}`); + console.info(`error happened,error Message is ${error.message}`); +} + +// Report an error in the case of a function invocation exception. +function catchCallback(error) { + console.info(`catch error happened,error Name is ${error.name}`); + console.info(`catch error happened,error Code is ${error.code}`); + console.info(`catch error happened,error Message is ${error.message}`); +} + +// Used to print the video track information. +function printfDescription(obj) { + for (let item in obj) { + let property = obj[item]; + console.info('key is ' + item); + console.info('value is ' + property); + } +} + +// Call createVideoPlayer to create a VideoPlayer instance. +await media.createVideoPlayer().then((video) => { + if (typeof (video) != 'undefined') { + console.info('createVideoPlayer success!'); + videoPlayer = video; + } else { + console.info('createVideoPlayer fail!'); + } +}, failureCallback).catch(catchCallback); + +// Set the URL of the video file selected by the user. +videoPlayer.url = 'file:///data/data/ohos.xxx.xxx/files/test.mp4'; + +// Call the Xcomponent interface to obtain the surface ID and save it to the surfaceID variable. + +// Set the surface ID to display the video image. +await videoPlayer.setDisplaySurface(surfaceID).then(() => { + console.info('setDisplaySurface success'); +}, failureCallback).catch(catchCallback); + +// Call the prepare interface to prepare for playback. +await videoPlayer.prepare().then(() => { + console.info('prepare success'); +}, failureCallback).catch(catchCallback); + +// Call the play interface to start playback. +await videoPlayer.play().then(() => { + console.info('play success'); +}, failureCallback).catch(catchCallback); + +// Pause playback. +await videoPlayer.pause().then(() => { + console.info('pause success'); +}, failureCallback).catch(catchCallback); + +// Use a promise to obtain the video track information. +let arrayDescription; +await videoPlayer.getTrackDescription().then((arrlist) => { + if (typeof (arrlist) != 'undefined') { + arrayDescription = arrlist; + } else { + console.log('video getTrackDescription fail'); + } +}, failureCallback).catch(catchCallback); + +for (let i = 0; i < arrayDescription.length; i++) { + printfDescription(arrayDescription[i]); +} + +// Seek to the 50s position. For details about the input parameters, see the interface document. +let seekTime = 50000; +await videoPlayer.seek(seekTime, media.SeekMode._NEXT_SYNC).then((seekDoneTime) => { + console.info('seek success'); +}, failureCallback).catch(catchCallback); + +// Set the volume. For details about the input parameters, see the interface document. +let volume = 0.5; +await videoPlayer.setVolume(volume).then(() => { + console.info('setVolume success'); +}, failureCallback).catch(catchCallback); + +// Set the playback speed. For details about the input parameters, see the interface document. +let speed = media.PlaybackRateMode.SPEED_FORWARD_2_00_X; +await videoPlayer.setSpeed(speed).then(() => { + console.info('setSpeed success'); +}, failureCallback).catch(catchCallback); + +// Stop playback. +await videoPlayer.stop().then(() => { + console.info('stop success'); +}, failureCallback).catch(catchCallback); + +// Reset the playback configuration. +await videoPlayer.reset().then(() => { + console.info('reset success'); +}, failureCallback).catch(catchCallback); + +// Release playback resources. +await videoPlayer.release().then(() => { + console.info('release success'); +}, failureCallback).catch(catchCallback); + +// Set the related instances to undefined. +videoPlayer = undefined; +surfaceID = undefined; +``` + +### Normal Playback Scenario + +```js +let videoPlayer = undefined; // Used to store instances created by calling the createVideoPlayer method. +let surfaceID = undefined; // Used to save the surface ID returned by the Xcomponent interface. + +// Report an error in the case of a function invocation failure. +function failureCallback(error) { + console.info(`error happened,error Name is ${error.name}`); + console.info(`error happened,error Code is ${error.code}`); + console.info(`error happened,error Message is ${error.message}`); +} + +// Report an error in the case of a function invocation exception. +function catchCallback(error) { + console.info(`catch error happened,error Name is ${error.name}`); + console.info(`catch error happened,error Code is ${error.code}`); + console.info(`catch error happened,error Message is ${error.message}`); +} + +// Set the 'playbackCompleted' event callback, which is triggered when the playback is complete. +function SetCallBack(videoPlayer) { + videoPlayer.on('playbackCompleted', () => { + console.info('video play finish'); + + await videoPlayer.release().then(() => { + console.info('release success'); + }, failureCallback).catch(catchCallback); + + videoPlayer = undefined; + surfaceID = undefined; + }); +} + +// Call createVideoPlayer to create a VideoPlayer instance. +await media.createVideoPlayer().then((video) => { + if (typeof (video) != 'undefined') { + console.info('createVideoPlayer success!'); + videoPlayer = video; + } else { + console.info('createVideoPlayer fail!'); + } +}, failureCallback).catch(catchCallback); + +// Set the event callbacks. +SetCallBack(videoPlayer); + +// Set the URL of the video file selected by the user. +videoPlayer.url = 'file:///data/data/ohos.xxx.xxx/files/test.mp4'; + +// Call the Xcomponent interface to obtain the surface ID and save it to the surfaceID variable. + +// Set the surface ID to display the video image. +await videoPlayer.setDisplaySurface(surfaceID).then(() => { + console.info('setDisplaySurface success'); +}, failureCallback).catch(catchCallback); + +// Call the prepare interface to prepare for playback. +await videoPlayer.prepare().then(() => { + console.info('prepare success'); +}, failureCallback).catch(catchCallback); + +// Call the play interface to start playback. +await videoPlayer.play().then(() => { + console.info('play success'); +}, failureCallback).catch(catchCallback); +``` + +### Switching to the Next Video Clip + +```js +let videoPlayer = undefined; // Used to store instances created by calling the createVideoPlayer method. +let surfaceID = undefined; // Used to save the surface ID returned by the Xcomponent interface. + +// Report an error in the case of a function invocation failure. +function failureCallback(error) { + console.info(`error happened,error Name is ${error.name}`); + console.info(`error happened,error Code is ${error.code}`); + console.info(`error happened,error Message is ${error.message}`); +} + +// Report an error in the case of a function invocation exception. +function catchCallback(error) { + console.info(`catch error happened,error Name is ${error.name}`); + console.info(`catch error happened,error Code is ${error.code}`); + console.info(`catch error happened,error Message is ${error.message}`); +} + +// Set the 'playbackCompleted' event callback, which is triggered when the playback is complete. +function SetCallBack(videoPlayer) { + videoPlayer.on('playbackCompleted', () => { + console.info('video play finish'); + + await videoPlayer.release().then(() => { + console.info('release success'); + }, failureCallback).catch(catchCallback); + + videoPlayer = undefined; + surfaceID = undefined; + }); +} + +// Call createVideoPlayer to create a VideoPlayer instance. +await media.createVideoPlayer().then((video) => { + if (typeof (video) != 'undefined') { + console.info('createVideoPlayer success!'); + videoPlayer = video; + } else { + console.info('createVideoPlayer fail!'); + } +}, failureCallback).catch(catchCallback); + +// Set the event callbacks. +SetCallBack(videoPlayer); + +// Set the URL of the video file selected by the user. +videoPlayer.url = 'file:///data/data/ohos.xxx.xxx/files/test.mp4'; + +// Call the Xcomponent interface to obtain the surface ID and save it to the surfaceID variable. + +// Set the surface ID to display the video image. +await videoPlayer.setDisplaySurface(surfaceID).then(() => { + console.info('setDisplaySurface success'); +}, failureCallback).catch(catchCallback); + +// Call the prepare interface to prepare for playback. +await videoPlayer.prepare().then(() => { + console.info('prepare success'); +}, failureCallback).catch(catchCallback); + +// Call the play interface to start playback. +await videoPlayer.play().then(() => { + console.info('play success'); +}, failureCallback).catch(catchCallback); + +// Send the instruction to switch to the next video clip after a period of time. +// Reset the playback configuration. +await videoPlayer.reset().then(() => { + console.info('reset success'); +}, failureCallback).catch(catchCallback); + +videoPlayer.url = 'file:///data/data/ohos.xxx.xxx/files/next.mp4'; + +// Set the surface ID to display the video image. +await videoPlayer.setDisplaySurface(surfaceID).then(() => { + console.info('setDisplaySurface success'); +}, failureCallback).catch(catchCallback); + +// Call the prepare interface to prepare for playback. +await videoPlayer.prepare().then(() => { + console.info('prepare success'); +}, failureCallback).catch(catchCallback); + +// Call the play interface to start playback. +await videoPlayer.play().then(() => { + console.info('play success'); +}, failureCallback).catch(catchCallback); +``` + +### Looping a Video Clip + +```js +let videoPlayer = undefined; // Used to store instances created by calling the createVideoPlayer method. +let surfaceID = undefined; // Used to save the surface ID returned by the Xcomponent interface. + +// Report an error in the case of a function invocation failure. +function failureCallback(error) { + console.info(`error happened,error Name is ${error.name}`); + console.info(`error happened,error Code is ${error.code}`); + console.info(`error happened,error Message is ${error.message}`); +} + +// Report an error in the case of a function invocation exception. +function catchCallback(error) { + console.info(`catch error happened,error Name is ${error.name}`); + console.info(`catch error happened,error Code is ${error.code}`); + console.info(`catch error happened,error Message is ${error.message}`); +} + +// Set the 'playbackCompleted' event callback, which is triggered when the playback is complete. +function SetCallBack(videoPlayer) { + videoPlayer.on('playbackCompleted', () => { + console.info('video play finish'); + + await videoPlayer.release().then(() => { + console.info('release success'); + }, failureCallback).catch(catchCallback); + + videoPlayer = undefined; + surfaceID = undefined; + }); +} + +// Call createVideoPlayer to create a VideoPlayer instance. +await media.createVideoPlayer().then((video) => { + if (typeof (video) != 'undefined') { + console.info('createVideoPlayer success!'); + videoPlayer = video; + } else { + console.info('createVideoPlayer fail!'); + } +}, failureCallback).catch(catchCallback); + +// Set the event callbacks. +SetCallBack(videoPlayer); + +// Set the URL of the video file selected by the user. +videoPlayer.url = 'file:///data/data/ohos.xxx.xxx/files/test.mp4'; + +// Call the Xcomponent interface to obtain the surface ID and save it to the surfaceID variable. + +// Set the surface ID to display the video image. +await videoPlayer.setDisplaySurface(surfaceID).then(() => { + console.info('setDisplaySurface success'); +}, failureCallback).catch(catchCallback); + +// Call the prepare interface to prepare for playback. +await videoPlayer.prepare().then(() => { + console.info('prepare success'); +}, failureCallback).catch(catchCallback); + +// Set the loop playback attribute. +videoPlayer.loop = true; + +// Call the play interface to start playback. +await videoPlayer.play().then(() => { + console.info('play success'); +}, failureCallback).catch(catchCallback); +```