Javascript桌面瀏覽器從相機獲取頭像

Question

我發現很酷的功能在https://trello.com/從相機加載頭像。

1. 是否有簡單的方法可以在我的rails站點上獲取&這個特性？
2. 是否可以爲不支持的瀏覽器隱藏/處理此功能？

Answer 1

我做這個代碼覆蓋3-RE情況：

1. 從文件加載
從URL
2. 負載
從相機
3. 負載
於一體的js控制

@avatarUploader = 
    hasGetUserMedia: -> 
    !!(navigator.getUserMedia or navigator.webkitGetUserMedia or navigator.mozGetUserMedia or navigator.msGetUserMedia) 
    localMediaStream: null 
    stopCam:()-> 
    if avatarUploader.localMediaStream 
     avatarUploader.localMediaStream.stop(); 
    initWebCam: (picker)-> 
    navigator.getUserMedia = navigator.getUserMedia or navigator.webkitGetUserMedia or navigator.mozGetUserMedia or navigator.msGetUserMedia 

    video = picker.find("video") 
    canvas = picker.find("canvas") 
    image = picker.find('.camera-avatar') 

    snapshot = -> 
     if avatarUploader.localMediaStream 
     canvas.attr('width', video.width()) 
     ctx = canvas[0].getContext("2d") 
     ctx.drawImage video[0], 0 , 0, video.width(), 120 
     # "image/webp" works in Chrome 18. In other browsers, this will fall back to image/png. 
     image.attr('src', canvas[0].toDataURL("image/jpeg")) 
     picker.find('[name="avatar_data"]').val(canvas[0].toDataURL("image/png")) 

    onFailSoHard = -> 
     picker.find('.header').children().last().hide() 

    video.on 'click', snapshot 
    picker.find('.snap').on 'click', snapshot 

    # Not showing vendor prefixes or code that works cross-browser. 
    navigator.getUserMedia 
     video: true 
    , ((stream) -> 
     video.attr('src', window.URL.createObjectURL(stream)) 
     avatarUploader.localMediaStream = stream 
    ), onFailSoHard 
    avatarUploader.webCamInited = true 
    init:()-> 
    picker = $('.avatar-picker') 

    picker.on 'change', '.btn-avatar input[type=file]',()-> 
     $in=$(this) 
     $in.closest('.btn-avatar').find('.filename').html($in.val()) 

    picker.on 'change', '[name="option"]',()-> 
     picker.find('.content').children().addClass('hide') 
     picker.find('#'+$(this).val()+'-block').removeClass('hide') 
     if $(this).val() == 'camera' 
     avatarUploader.initWebCam(picker) 
     else 
     avatarUploader.stopCam() 
    unless avatarUploader.hasGetUserMedia() 
     picker.find('.header').children().last().hide()