javascript - Angular .js : taking a picture from a subpage - ng-view issue

Question

我想在我的 Angular 应用程序中添加一个新的子页面，我可以在其中使用网络摄像头拍摄照片。我找到了使用 HTML5 拍照的工作示例 here .对于应用程序内的路由，我使用 ng-view .

这就是问题所在:当我将示例中的 html 部分直接粘贴到我的 index.html 中时一切正常(但没有路由)。当我将它粘贴到 subpage.html 时它不起作用 -> 没有权限弹出窗口，我看不到网络摄像头提要。

我修改了我的项目如下:

添加到 index.html:

  <script src="js/vendor/jquery.min.js"></script>
  <script src="js/scripts/camera.js"></script> 

camera.js 包含 <script>来自示例的一部分。

subpage.html:

<div class="camcontent">
    <video id="video" autoplay></video>
    <canvas id="canvas" width="640" height="480">
</div>
<div class="cambuttons">
    <button id="snap" style="display:none;">  Capture </button> 
    <button id="reset" style="display:none;">  Reset  </button>     

 </div>

一般情况下，路由是有效的，但我猜问题出在使用 ng-view 上和 camera.js .

知道如何修复它吗？

相机.js:

// Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d"),
            video = document.getElementById("video"),
            videoObj = { "video": true },
            image_format= "jpeg",
            jpeg_quality= 85,
            errBack = function(error) {
                console.log("Video capture error: ", error.code); 
            };


        // Put video listeners into place
        if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(videoObj, function(stream) {
                video.src = stream;
                video.play();
                $("#snap").show();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
                $("#snap").show();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // moz-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
                $("#snap").show();
            }, errBack);
        }
              // video.play();       these 2 lines must be repeated above 3 times
              // $("#snap").show();  rather than here once, to keep "capture" hidden
              //                     until after the webcam has been activated.  

        // Get-Save Snapshot - image 
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
            // the fade only works on firefox?
            $("#video").fadeOut("slow");
            $("#canvas").fadeIn("slow");
            $("#snap").hide();
            $("#reset").show();
            $("#upload").show();
        });
        // reset - clear - to Capture New Photo
        document.getElementById("reset").addEventListener("click", function() {
            $("#video").fadeIn("slow");
            $("#canvas").fadeOut("slow");
            $("#snap").show();
            $("#reset").hide();
            $("#upload").hide();
        });

    }, false);

Answer 1

DomContentLoaded DOM 事件不会在加载 ng-view 内容时触发。因为这是 camera.js 代码使用的内容，所以它永远不会被初始化。这就是为什么它只有在包含在 index.html 中时才有效。

一种选择是使用 $viewContentLoaded事件:

 $scope.$on('$viewContentLoaded', function(){
    //Could do stuff here
  });

或者，更好的是，创建一个指令来完成这项工作。这将是最佳选择，因为它正是为此目的而设计的。

虽然您不需要重新发明轮子。查看评论中@OriDrori 突出显示的指令:

• https://github.com/jonashartmann/webcam-directive
• https://github.com/onemightyroar/angular-camera