使用 JavaScript for Project Oxford 将视频流到画布到图像

Question

通过手动要求用户上传图片，我已经能够使用 Project Oxford，特别是 Emotions API。但是，我现在希望使用视频流来执行此操作（网页显示来自他们的网络摄像头的实时视频流，用户可以拍摄流的快照，然后选择在该图像上运行情绪 API，这将然后运行 ​​API 并在对话窗口中显示分数 - 这是我目前遇到的部分）。

下面我编写了 HTML 和 JavaScript 代码，它们在网页上设置视频流，然后允许用户拍摄快照，然后将画布转换为图像。

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
    <img id="file" src = "" alt="Emotions">
    <!--input type="file" id="file" name="filename"-->
    <button id="btn">Click here</button>

<script>

    // 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 },
            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();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(videoObj, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // WebKit-prefixed
            navigator.mozGetUserMedia(videoObj, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
            context.drawImage(video, 0, 0, 640, 480);
                            var dataURL = document.getElementById("canvas");
                            if (dataURL.getContext){
                                var ctx = dataURL.getContext("2d");
                                var link = document.createElement('a');
                                link.download = "test.png";
                                var myImage = link.href = dataURL.toDataURL("image/png").replace("image/png", "image/octet-stream");
                                link.click();
                            }
                            var imageElement = document.getElementById("file");
                            imageElement.src = myImage;
                            //document.getElementById("file").src = dataURL;
                     $('#btn').click(function () {
                            //var file = document.getElementById('file').files[0];


                        $.ajax({
                                url: "https://api.projectoxford.ai/emotion/v1.0/recognize",
                                beforeSend: function(xhrObj) {
                                    // Request headers
                                    xhrObj.setRequestHeader("Content-Type", "application/octet-stream");
                                    xhrObj.setRequestHeader("Ocp-Apim-Subscription-Key", "my-key");
                                },
                                type: "POST",
                                data: imageElement,
                                processData: false
                            })
                            .done(function(data) {
                                JSON.stringify(data);
                                alert(JSON.stringify(data));
                            })
                            .fail(function(error) {
                                //alert(error.getAllResponseHeaders());
                                alert("Error");
                            });
                        });
        });
    }, false);

</script>

将图像转换为画布后，我无法在图像上运行 API。阅读后，我相信这与图像转换为画布后赋予图像的文件扩展名有关（没有），因为 API 仅允许图像文件类型。我相信这可能是问题所在，我们将不胜感激任何帮助。非常感谢！

Answer 1

这是我用来将图片上传到后端 API 的代码，然后在添加一些业务逻辑后使用 .NET SDK。 这不是完全相同的场景，但 Javascript 代码可能会对您有所帮助：

var url = 'Home/upload';

var data = new FormData();
data.append('file', imgData);

var imgData = canvas.msToBlob('image/jpeg');

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    processData: false,
    contentType: false
})
.done(function (response) {
    loading.style.display = "none";

    if (response.error != "") {
        result.innerText = response.error;
    }
    else {
        result.innerHTML = response.result;
    }
})
.fail(function (response) {
    alert('Error : ' + response.error);
})
.complete(function (response) {
    restartButton.style.display = 'inline-block';
});

以下线程帮助了我：Pass Blob through ajax to generate a file