Angular.js：从子页面拍照 - ng-view 问题

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.

知道如何解决吗？

camera.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

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

中时才有效

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

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

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

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

Angular.js：从子页面拍照 - ng-view 问题

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

javascript

angularjs

html

html5-canvas

ng-view