使用Oxford项目的JavaScript从视频流到画布再到图像

我已经能够使用ProjectOxford，特别是通过手动请求用户上传图片来使用情感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>

快照
点击这里
//将事件侦听器放置到位
addEventListener（“DOMContentLoaded”，function（））{
//抓取元素、创建设置等。
var canvas=document.getElementById（“canvas”），
context=canvas.getContext（“2d”），
video=document.getElementById（“视频”），
videoObj={“video”：true}，
errBack=函数（错误）{
日志（“视频捕获错误：”，错误代码）；
};
//将视频侦听器放置到位
if（navigator.getUserMedia）{//Standard
getUserMedia（videoObj，函数（流）{
video.src=流；
video.play（）；
}，errBack）；
}else if（navigator.webkitGetUserMedia）{//WebKit前缀
webkitGetUserMedia（videoObj，函数（流）{
video.src=window.webkitURL.createObjectURL（流）；
video.play（）；
}，errBack）；
}else if（navigator.mozzetusermedia）{//WebKit前缀
mozGetUserMedia（videoObj，函数（流）{
video.src=window.URL.createObjectURL（流）；
video.play（）；
}，errBack）；
}
//触发拍照
document.getElementById（“snap”）.addEventListener（“单击”，函数）（）{
drawImage（视频，0，0，640，480）；
var dataURL=document.getElementById（“画布”）；
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”）。替换（“image/png”、“image/octet-stream”）；
link.click（）；
}
var imageElement=document.getElementById（“文件”）；
imageElement.src=myImage；
//document.getElementById（“文件”）.src=dataURL；
$（'#btn'）。单击（函数（）{
//var file=document.getElementById（'file'）.files[0]；
$.ajax({
url:“https://api.projectoxford.ai/emotion/v1.0/recognize",
发送前：函数（xhrObj）{
//请求头
setRequestHeader（“内容类型”、“应用程序/八位字节流”）；
setRequestHeader（“Ocp Apim订阅密钥”、“我的密钥”）；
},
类型：“POST”，
数据：imageElement，
processData:false
})
.完成（功能（数据）{
stringify（数据）；
警报（JSON.stringify（数据））；
})
.失败（功能（错误）{
//警报（error.getAllResponseHeaders（））；
警报（“错误”）；
});
});
});
}，假）；

---

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

这是我用来将图片上传到后端API的代码，后端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';
});

---

以下线程帮助了我：

，给它一个文件名，API应该接受它。您好，谢谢您的评论@kaido。我尝试了以下方法，但仍然无法将blob转换为jpeg:

canvas.toBlob（函数（blob）{url=url.createObjectURL（blob）；newImg.onload=function（）{url.revokeObjectURL（url）；}；newImg.src=url；}，“图像/jpeg”，0.95）FormData

对象，如链接答案中所示。还要注意的是，

canvas.toBlob

仍然没有得到广泛的支持，或者随着实现的变化，仍然建议手动执行dataURI到blob的转换。再次感谢@kaido的评论。我感谢你的帮助！我试图理解这一点，因为我是全新的