This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

In this paper, WebRTC function is used to open the camera on the computer, and the camera preview of the image is displayed. Pure web implementation, can support in addition to IE most browsers. Mobile browsers are also available.

Introduction of depend on

We need to import adapter-latest.js

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
Copy the code

The WebRTC Adapter was part of the WebRTC, but has now been moved out. We’re going to use the functionality that it provides.

html

Let’s put some controls on the interface.

<div id="container">
    <video id="video-local" autoplay playsinline></video>
    <button id="showVideo">Turn on the camera</button>
    <button id="stopVideo">Turn off the camera</button>
    <p>Display the preview content of the camera, which is presented by the element video on the web page.</p>
    <p>Click open camera button, the browser will ask whether to allow, please click "allow".</p>
    <div id="errorMsg"></div>
    <div id="tipMsg"></div>
</div>
Copy the code
  • Video Displays a preview video
  • Two buttons control opening and closing
  • Let’s put some more information in there

js

So just to set it up, we’re only going to use video

const constraints = window.constraints = {
  audio: false.video: true
};
Copy the code

Display some information on the web page for easy debugging.

function showErrMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeoferror ! = ='undefined') {
    console.error(error); }}function showMsg(msg) {
    const msgEle = document.querySelector('#tipMsg');
    msgEle.innerHTML += `<p>-> ${msg}</p>`;
    console.log(msg);
}
Copy the code

The complete code is in main.js. The CSS can be customized.

Turn on the camera

To open the camera, use the MediaDevices. GetUserMedia () method

async function openCamera(e) {
  try {
    showMsg('Turning on the camera');
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    showMsg('Got the stream');
    gotStream(stream);
    e.target.disabled = true;
  } catch (err) {
    onErr(err);
  }
Copy the code

MediaDevices. GetUserMedia () method after the user permission, according to the request, to the stream. A stream can contain video or audio. In the previous setup, we only used video.

If the user refuses to use the camera or the requested media is unavailable, the user is rejected. NotAllowedError is reported when the user rejects the request. NotFoundError DOMException is reported when the device that meets the request is not found.

Methods of document MediaDevices. GetUserMedia ()

Show video

Once you get the stream, let the video display the video

function gotStream(stream) {
  const videoEle = document.querySelector('video');
  const videoTracks = stream.getVideoTracks();
  showMsg('Equipment in use:${videoTracks[0].label}`);
  window.stream = stream;
  videoEle.srcObject = stream;
}
Copy the code

Document. querySelector(‘video’) gets the video control directly on the HTML. Pass the stream directly to Videoele.srCobject.

Stop the video stream

To stop the video, start with the video element, grab the stream, and stop track inside it.

function stopVideo(e) {
    showMsg("Stop the video");
    const videoElem = document.querySelector('video');
    const stream = videoElem.srcObject;

    document.querySelector('#showVideo').disabled = false; // Enable

    if(stream == null) {
        return;
    }
    const tracks = stream.getTracks();
  
    tracks.forEach(function(track) {
      track.stop();
    });
    videoElem.srcObject = null;
}
Copy the code

The stream.gettracks () method takes all tracks, walks through them and closes them all. Finally, set videoElem. SrcObject to NULL to disassociate it from the previous stream so it can be released.

Reference MediaStreamTrack – stop

summary

The WebRTC functionality used by the sample. The video is displayed from the local camera, and does not involve transmission. Get the video stream and hand it over to the video for display. GetUserMedia is the most critical method in the example. It will be used in future examples.

reference

  • webrtc-adapter github

Results the preview

See open-camera for full effect