Javascript Angular.js：从子页面拍照-ng视图问题

我想给我的Angular应用程序添加一个子页面，在这个页面上我可以从网络摄像头抓拍一张照片。我找到了使用HTML5拍照的工作示例。对于我正在使用的应用程序内的路由

ng view

问题是：当我将示例中的html部分直接粘贴到我的

index.html

中时，一切都能正常工作（但没有路由）。当我将它粘贴到subpage.html时，它不工作->没有权限弹出窗口，我看不到网络摄像头提要

我修改了我的项目如下：

添加到index.html：

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

---

加载

ng视图

内容时，不会触发

DomContentLoaded

DOM事件。因为这是camera.js代码所使用的，所以它永远不会被初始化。这就是为什么它只在包含在

index.html

中时才起作用

一个选项是使用事件：

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

不过，你不需要重新发明轮子。查看注释中@OriDrori突出显示的指令：

---

仅供参考-摄像机的角度指令，如、、谢谢@OriDrori。我尝试了网络摄像头指令，它就像一个符咒。

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

// 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);

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