2.2, audio and video capture (a)

Chapter Introduction: This section realize the collection from the camera and microphone to the data stream and displayed. Recommended reading way: understanding + practical operation.

　 API used in this section - "navigator.mediaDevices.getUserMedia (Constraints)", where "Constraints" are the parameters, the method also returns a Promise. To practice this demo, I created a new demo2.2.html, the following code to achieve.

<!-- demo2.2.html -->
<html>
    <head>
        <meta charset="UTF-8">
        <Title> demo 2.2 audio and video capture </ title>
    </head>
    <body>
        <video autoplay playsinline id="myvideo"></video>
    </body>
　　<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script src="./js/demo2.2.js"></script>

</html>

In the code, we add a body tag video tag, id is "myvideo", for displaying acquired through the camera in real-time video stream. Js corresponding logic code in the demo2.2.js. In js, first, the usability judgment do objects, as follows.

'use strict'
let localVideo = document.getElementById("myvideo");
if(!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia)
{
    throw new Error("getUserMedia is not supported");
}

Before webrtc1.0 out of specification, various browser vendors have begun to realize their webrtc API, different browsers might API is not the same name, took getUserMedia speaking, there are three possible names: getUserMedia, webkitGetUserMedia, mozGetUserMedia . For developers concerned have to consider these cases. So, the code may become so.

const getUserMedia = navigator.mediaDevices.getUserMedia | navigator.mediaDevices.webkitGetUserMedia | navigator.mediaDevices.mozGetUserMedia

So it will bring inconvenience to developers, so Google maintains a library adaptation --adapter.js. Address: https://webrtc.github.io/adapter/adapter-latest.js (the latest version of the adapter), the latest code changes at any time to " Adapter-latest.js " in, so in the actual project development, The best lock a version, the version in the format: https://webrtc.github.io/adapter/adapter-NNNjs , for example https://webrtc.github.io/adapter/adapter-1.0.2.js .

　　Next, write to get the callback function flow successful, the code is as follows.

the let localVideoElement = document.getElementById ( "myVideo"); // read video element

// Get the success of the media stream 
function getLocalMediaStreamSuccess (to mediaStream) {

　　localVideoElement .srcObject = // direct assignment to object to the media stream; to mediaStream 
}

// Get the local media streams failed callback

function getLocalMediaStreamException(error) {

　console.log('navigator.getUserMedia error: ', error);

}

Then start calling getUserMedia, the following code.

// audio and video capture configuration 
const mediaStreamConstraints = {
    Video: to true , // Video Capture
    Audio: to true , // audio capture
};
navigator.mediaDevices.getUserMedia(mediaStreamConstraints).then(getLocalMediaStreamSuccess).catch(gotLocalMediaStreamError)

The complete code is as follows:

// demo2.2.js
'use strict'
let localVideoElement = document.getElementById("myvideo");
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    throw new Error("getUserMedia is not supported");
}

// Get Local media stream success callback 
function getLocalMediaStreamSuccess (to mediaStream) {
    localVideoElement.srcObject = MediaStream;
}

// get local media streams failed callback 
function getLocalMediaStreamException (error) {
    console.log('navigator.getUserMedia error: ', error);
}

// audio and video capture configuration 
const mediaStreamConstraints = {
    video: true,
    audio: true,
};
navigator.mediaDevices.getUserMedia (mediaStreamConstraints)
    .then(getLocalMediaStreamSuccess).catch(gotLocalMediaStreamError)

2.2, audio and video capture (a)

Guess you like