This Article: This article needs to achieve the mentioned section. Recommended reading mode: practical operation.
In order to ensure the code is simple enough case, here does not introduce any third party libraries css landscaping, but in order to make the case of the interface seems a little structured, simply write some css styles. The interface of the UI shown in Figure 2.4.1.
Figure 2.4.1 (project software interface)
The contents of this article on the complete software implementation of FIG function, first introduced to the software functions to be accomplished: it is all the configuration ①, the software is loaded, as shown in Figure 2.4.1, does not open the default camera, buttons are not available. ②, click the top left corner of the "on camera" button to start the camera success, part of the black box to collect the camera video screen will be displayed at the moment "to update the configuration, start recording, updating filters" and three buttons available. ③, after you set the "video acquisition parameters," click "update configuration", to take effect. ④, set after the completion of "video filter" parameter, click "Update Filter", you can update in real-time video filters. ⑤, click "Start Recording" button to start recording a video, while the display has a long record in the lower right corner of the black box, then "end recording" button is available. ⑥, click on the "end recording" button, the user is prompted to save the recorded video, save video when the user clicks the video is downloaded to local storage. Complete implementation by this case, device management, and audio and video data acquisition webrtc we will have a better understanding.
In this case, html, css code I do not go into details, the reader is free to download from the round-table discussion in this book, I explain the main core logic design.
First, the state of the software design. We first consider the software operating status: loaded, the camera is turned on, the recording, the camera is turned off five states. The reason to consider running state because, functionally distinct states can operate is not the same, for example, if the software is not loaded, all functions will be unavailable, including "Open Camera" function; if the cameras are not turned on, the " turn on the camera "feature, other features are not available; if not start recording video, the end of the recording feature will not be available. Only the state machine design, we can deal with the dependencies of these functions.
Second, when the software is loaded, the state of the program becomes "loaded", then turn on the camera function is available.
Third, open the camera function. This function will read the default camera and video playback to the video black label, if successful, the software update status to "turn on the camera," now update the configuration and updated filter function is available. While loading video input device to the list of available native "select acquisition device" in the drop down box. If it fails, the pop-up message "device for reading failure." Fourth, update the configuration. Here is an updated video capture parameters, then updated in real time to the role of video acquisition. Fifth, the update filter function is similar. Sixth, start recording function. If the recording start video software status is "Recording", in order to ensure the rigorous logic, only the "end recording" function is available. Seventh, the end of the recording. After the recording, the state once again become the "on camera" state, and prompts the user to download the video to a local, if the user chooses to download, the video file will be saved locally.
So far, the software logic design is completed, the next Coding.
We have to have an object, used to store software currently running,