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

您将新的navigator.mediaDevices.getUserMedia() promise API与旧的已弃用的navigator.getUserMedia回调API混淆。

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

只需use：

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

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

Answer 2

这应该有效

delete.NULLs

Answer 3

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

video.srcObject = localMediaStream;

如何使相机与JavaScript一起工作

3 个答案: