This Article: Following the contents of the previous section, this section is to be done to complete the video content acquisition parameters and filter parameters of the dynamic configuration capabilities. Recommended reading mode: practical operation.
In order to better explain the code, we posted the screenshot of the software, as Figure 2.5.1.
Figure 2.5.1 (screen shots)
Let's look at the first function to be achieved in this section: Dynamic configuration parameters for video capture. Do not want to filter parameter is a parameter or video capture, we can be seen as the same kind of business, so we create a new object to manage: configManager, currently the object has two methods: reading video acquisition parameters getConstrains
Reading Filter Parameters getFilterConfig. The first method to implement a first --getConstrains, this method requires reading JS form element value, therefore, we need to add to form the corresponding element id, easy to operate, as follows.
<div class="constraints-item"> <label>是否启用音频</label> <input id="useAudio" type="checkbox"> </div> <div class="constraints-item"> <label>视频宽</label> <input value="300" id="videoWidth" type="number"> </div> <div class= "Constraints-Item" > < label > Video high </ label > < INPUT value = "200 is" ID = "videoHeight" type = "Number" > </ div > < div class = "Constraints-Item" > < label > acquisition device selected </ label > < sELECT Aria-placeholder = "choose acquisition device" name = "" ID = "devicesList" > </select> </div> <div class="constraints-item"> <label>视频帧率</label><input value="30" id="frameRate" type="number"> </div>
The above code, in addition to setting id to form elements, but also set a default value, but the "acquisition device select" this option special need to be read to the device list camera available for the machine by webrtc code that when read camera the list of devices it? According to 2.1 learned what we know, first of all users to read the default device media stream by getUserMedia, this process will trigger ask the program to access the camera in this field, microphone permissions browser, and only through this validation, we can "smooth" access other webrtc API, such as enumerateDevices (include audio and video equipment available for the machine). According to this idea, only "open the camera," the logic calls getUserMedia, so we will go to enumerate and display a list of available devices after opening the camera successfully, this logic portion still belongs to the management operation of the camera, so we add in cameraManager in a method --enumerateVideoDevices, as the name suggests, we only need to include a video input device to other devices such as audio input, audio output not to consider this work as part of the expansion of this chapter for the reader.
First analysis of enumerateVideoDevices under cameraManager to be achieved, we must first read the list of available devices to read through the relevant API webrtc, pay attention to the default list of available devices includes "audio input (audioinpt), audio output (audiooutput), video input (videoinput) "three device types, all we have to filter out the video input (videoinput) equipment out; secondly, screened video input device we want to dynamically create dom elements into the" <select aria-placeholder = "Please select collection device "name =" "id =" devicesList ">" tag, for users to choose. Functional analysis is completed, the following code.
// Load the camera for the user to select the async enumerateVideoDevices () { the let Devices = the await navigator.mediaDevices.enumerateDevices () the let devicesListDom = domManager.getDom ( "devicesList" ); devicesListDom.innerHTML = ""; // Clear subelements IF (Devices ) { for (D of the let Devices) { IF (D && (d.kind == 'videoinput' )) { the let Element = document.createElement ( "Option" ); IF (Element) { element.value = d.deviceId; element.innerHTML = d.label; devicesListDom.appendChild(element); } } } } },
So far, cameraManager object is more than a method that is called Where? Calling code as that of the openCamera cameraManager method.
// camera is turned on the async openCamera (mediaStreamconstrains) { the let Media = the await navigator.mediaDevices.getUserMedia (mediaStreamconstrains); the this .enumerateVideoDevices (); // call to include a listing of available video equipment the this .mediaStream = Media; return Media; },
Here, "initialization" video acquisition parameters work done, then start reading these parameters, we said above, management parameters using an object --configManager to manage, to manage video that argument is very simple, just You need to read the corresponding value of the form element value, and can construct a webrtc objects can be identified constrains. code show as below.
// configuration parameter management object const configmanager = { // read configuration parameter acquisition getConstrains () { / * * read the video acquisition parameters Start * / the let Constrains = { Audio: to false , Video: {} } // whether the read on the audio constrains.audio = domManager.getDom ( "useAudio" ) .checked; constrains.video.width = domManager.getDom ( "videoWidth" ) .Value; constrains.video.height = domManager.getDom ( "videoHeight" ) .Value ; constrains.video.frameRateDomManager.getDom = ( "the frameRate" ) .Value; constrains.video.deviceId = domManager.getDom ( "devicesList" ) .Value; / * * read the video acquisition parameters End * / return Constrains; }, }
The code above, it is noted that "useAudio" The form element is a "selection button", it is determined whether the selected attributes need to determine checked.
Video acquisition parameters management (getConstrains) to achieve complete, the next you want to use, and where to use this method? Obviously it is to call when you click "update configuration", so we need to add the event manager --eventManager an event listener, listening button "Update Configuration" click event. code show as below.
// update the configuration event listener domManager.getDom ( "updateConstrains") the onclick = () =>. { // read the configuration information of video capture the let Constrains = configManager.getConstrains () // turn off the camera cameraManager.closeCamera (); / / then open the new configuration parameters camera cameraManager.openCamera (Constrains) .then (Media => { domManager.getDom ( "myVideo") = srcObject. Media; statusManager.openedCamera (); }). the catch (ERR => { the console.log ( "fail-readable medium" , error) }) }
The code is no difficulty, the only areas requiring attention is the need to re-open the camera configuration updates to collect, so we became a logical order: reading configuration parameters ---> close an open camera ---> new parameter open the camera. At this point the "Update Configuration" feature to get. Then complete the second function: Update Filter. After the completion of this function again, we show the complete code in this article.