如何让相机与 javascript 一起工作

Question

我知道这个问题已经被问了很多次，但我无法弄清楚我的代码中有什么问题。我已经在google、这里和许多其他我还没有找到解决方案的地方寻找过。我的 HTML 代码是：

<button id="camera">Show the camera</button>
<video id="video" class="hidden" preload="none" autoplay>
    <source src="video.webM" type="video/webM">
</video>

我的JavaScript代码是：

$("#camera").on("click",function(){ 

        var mediaConfig =  { video: true };
        var video = $("#video")[0];

        // Normalize the various vendor prefixed versions of getUserMedia.
        navigator.getMedia = (  navigator.getUserMedia ||
                                    navigator.webkitGetUserMedia ||
                                    navigator.mozGetUserMedia || 
                                    navigator.msGetUserMedia );

        // Check that the browser supports getUserMedia.
        // If it doesn't show an alert, otherwise continue.
        if (navigator.getMedia) {
          // Request the camera.
          navigator.mediaDevices.getUserMedia(
            // Constraints
            mediaConfig,

            // Success Callback
            function(localMediaStream) {
                // Grab elements, create settings, etc.
                video.removeClass("hidden");
                video.addClass("showVideo");
                console.log("Camera is activated");
                if (navigator.mozGetUserMedia) {
                    video.mozSrcObject = localMediaStream;
                }else {
                    var vendorURL = window.URL || window.webkitURL;
                    video.src = vendorURL.createObjectURL(localMediaStream);
                }
                // Create an object URL for the video stream and use this 
                // to set the video source.
                //video.src = window.URL.createObjectURL(localMediaStream);
                video.play();
            },

            // Error Callback
            function(err) {
              // Log the error to the console.
              console.log('The following error occurred when trying to use getUserMedia: ' + err);
                video.removeClass("showVideo");
                video.addClass("hidden");
                alert("error");
            }
          );

        } else {
                video.removeClass("showVideo");
                video.addClass("hidden");
          alert('Sorry, your browser does not support getUserMedia');
        }

在移动设备中，我了解到浏览器询问我是否有权访问相机，但一旦我接受，就什么也没有发生：没有错误，没有视频，没有流媒体，什么都没有。另外，我忘了说，但是网络在 SSL 服务器中，所以没有那个问题。任何人都可以说明我一点吗？？。我不知道还能做什么:( 谢谢

Answer 1

视频流设置不正确。在您的成功回调中，您需要

video.srcObject = localMediaStream;

Answer 2

您混淆了新的 navigator.mediaDevices.getUserMedia() promise API with the old deprecated navigator.getUserMedia 回调 API。

这里还有很多过时的供应商前缀（例如 video.mozSrcObject 已不存在）。

就use:

navigator.mediaDevices.getUserMedia({video: true})
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

如果您担心支持旧浏览器，请使用 adapter.js。

Answer 3

这应该有效

 navigator.mediaDevices.getUserMedia({ video: true, audio: false })
    .then(localMediaStream => {
        console.log(localMediaStream);
        video.src =window.URL.createObjectURL(localMediaStream);
    }).catch(err =>{
        console.error('oh why errors!!', err);
    });

如何让相机与 javascript 一起工作

how to make the camera work with javascript

html

javascript

camera

video-streaming

getusermedia