html5换头像，摄像头调用大揭秘

1.项目背景

老板脑洞大开，想让我们的网站也能像微信那样换头像，大家自信满满地说html5就能搞定。可真干起来发现，这活儿不好对付，有点棘手。

2.如何调用摄像头

学习如何用AngularJS的$scope调用摄像头？so easy！接着让navigator这个“导游”带我们启动浏览器的相机通道！有四个选择哦——getUserMedia、webkitGetUserMedia、mozGetUserMedia和msGetUserMedia，对应各大浏览器。搞定之后，把视频流数据扔给video标签，就可以看到实时画面了~

想用摄像头？记住这三个要点就行了：多媒体类型知道不？拿到数据怎么操作？遇到问题该咋办？学会这些，让你不仅能看视频，还能录音录像！一切顺利的话，摄像头打开会给你返回视频流数据，放到video标签上，实时画面马上就能看到

$scope.photoErr = false;
$scope.photoBtnDiable = true;
var mediaStream = null,track = null;
navigator.getMedia = (navigator.getUserMedia ||
                      navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
                      navigator.msGetUserMedia);
        if (navigator.getMedia) {
            navigator.getMedia(
           {
               video: true
           },
           // successCallback
           function (stream) {
               var s = window.URL.createObjectURL(stream);
               var video = document.getElementById('video');
               video.src = window.URL.createObjectURL(stream);
               mediaStream = stream;
               track = stream.getTracks()[0];
               $scope.photoBtnDiable = false;               $scope.$apply();
           },
           // errorCallback
           function (err) {
               $scope.errorPhoto();
               console.log("The following error occured:" + err);
           });
              } else {
            $scope.errorPhoto();
        }

3.拍照

小伙伴们拍照片得依靠Canvas这个厉害标签。首先，咱得准备个Canvas标签，设置好要拍多大的照片。再把现场录制的视频截图保存在Canvas上，最后将图片变为本地Base64格式，这样手机摄像头就可以下岗。

看看这效率多高！之后，咱们再来说说$uibModalInstance。这可不是个小角色，在项目里是负责跳出窗口展示功能的！

4.如何关闭摄像头

{
      video: true，
      audio: true
}

想让摄像头停止工作？Chrome浏览器上的mediaStream和track帮了大忙！不过记住只有Chrome才能用这招关闭摄像头；其他浏览器就得换个办法了。像Chrome 45及以后的版本还有好多新花样等你去探索哦～

5.集成到AngularJs

首先要说要是你想把老男孩拍的照片用在别处，那就先把它取出来！这个不难喔～只需要用AngularJS的service功能弄成一个服务，然后加到项目里就行了。以后无论在哪里，都可以轻易地使用这个功能！

$scope.snap = function () {
        var canvas = document.createElement('canvas');
            canvas.width = "400";
            canvas.height = "304";
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, 400, 304);
            $scope.closeCamera();
            $uibModalInstance.close(canvas.toDataURL("image/png"));
};

装上拍照服务后，就可以放回我们平时用的h5TakePhotoService控制器中了。接下来，就是处理这些服务发过来的照片数据，最后再把它们展示出来给你们看！

6.兼容问题

Chrome这玩意儿在兼容性上实在让人头痛，网页浏览起来像断网似的，得等官方修好了才行。总的来说就是想用视野相机，Chrome得先拿到https图像数据才能用。

$scope.closeCamera = function () {
            if (mediaStream != null) {
                if (mediaStream.stop) {
                    mediaStream.stop();
                }
                $scope.videosrc = "";
            }
            if (track != null) {
                if (track.stop) {
                    track.stop();
                }
            }
        }

记住！要让这个东西动起来，得先上传到服务器，别想着随便一个file://url就能搞定。不管是Visual Studio还是Java Web、PHP什么平台都行，咱们就是绰绰有余。