小编Car*_*ler的帖子

我正在尝试创建一个拖放菜单,用户可以将图像缩略图从div拖动到画布.

问题是源div使用精灵来显示它的背景缩略图,所以我必须使用setDragImage来允许在拖动div时显示图像.

我可以成功地将div拖动到画布并将图像拖放得很好,但是我的问题是拖动鬼图像直到我第二次拖动div时才会显示.

我使用上一个答案的代码:[ HTML5拖放事件和setDragImage浏览器支持

这是我对此代码的略微修改版本:

var isIE =  (typeof document.createElement("span").dragDrop === "function");


$.fn.customDragImage = function(options) {
    var offsetX = 0,
        offsetY = 0;

    var createDragImage = function($node, x, y) {
        var $img = $(options.createDragImage($node));
        icon = "icon" + window.draggedimgsrc;
        offsetX = window[icon][2] / 2;
        offsetY = window[icon][3] / 2;
        $img.css({
            "top": Math.max(0, y-offsetY)+"px",
            "left": Math.max(0, x-offsetX)+"px",
            "position": "absolute",
            "pointerEvents": "none"
        }).appendTo(document.body);

        setTimeout(function() {
            $img.remove();
        });

        return $img[0];
    };

    if (isIE) {
        $(this).on("mousedown", function(e) {
            var originalEvent = e.originalEvent,
                node …

如果我使用以下代码录制画布动画：

        streamInput = parent.document.getElementById('whiteboard');
        stream = streamInput.captureStream();
        const recorder = RecordRTC(stream, {
             // audio, video, canvas, gif
            type: 'video',
            mimeType: 'video/webm',
            recorderType: MediaStreamRecorder,
            disableLogs: false,
            timeSlice: 1000,
            ondataavailable: function(blob) {},
            onTimeStamp: function(timestamp) {},
            bitsPerSecond: 3000000,
            frameInterval: 90,
            frameRate: 60,
            bitrate: 3000000,
        });

    recorder.stopRecording(function() {
            getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
                url = URL.createObjectURL(recorder.getBlob());
                $("#exportedvideo").attr("src", url);
                $("#exportedvideo").attr("controls", true);
                $("#exportedvideo").attr("autoplay", true);
            })                                      
        });

视频播放正常，我可以在 chrome/edge/firefox 等中找到它。

当我使用以下代码下载视频时：

getSeekableBlob(recorder.getBlob(), function(seekableBlob) {
        var file = new File([seekableBlob], "test.webm", {
            type: 'video/webm'
        });
        invokeSaveAsDialog(file, file.name);
}

视频下载和播放正常，搜索栏更新正常。

如果我然后将搜索栏移动到任何位置，只要我移动它，我就会收到一条媒体播放器消息：无法播放，无法播放，因为该项目的文件格式不受支持。检查商店以查看此商品是否在此处可用。0xc00d3e8c …

我正在使用 MediaStream 和 MediaRecorder 录制浏览器窗口。

但需要禁用鼠标光标被记录，所以当我创建视频轨道时，我使用以下代码：

stream[\'input\'] = await navigator.mediaDevices.getDisplayMedia({\n    audio: true,\n    video: {\n    cursor: \'never\',\n    frameRate: 40,\n}\n});\nconsole.log( stream[\'input\'].getVideoTracks()[0].getSettings() );\n

但是 chrome、opera 和 Edge 控制台显示：

aspectRatio: 1.7777777777777777\ncursor: "motion"\ndeviceId: "window:200730:1"\ndisplaySurface: "window"\nframeRate: 40\nheight: 1080\nlogicalSurface: true\nresizeMode: "crop-and-scale"\nwidth: 1920\n

但似乎忽略了该设置，因此光标正在被记录。

我可以看到我的控制台中正在设置帧速率约束，但是我似乎无法禁用光标。

然而，Firefox 不会记录光标并在控制台中显示它

frameRate: 40\n\xe2\x80\x8bheight: 924\n\xe2\x80\x8bwidth: 1263\n

有没有人成功地用 Chrome、Edge 和 Opera 完全禁用光标？

我什至尝试过使用

stream[\'input\'].getVideoTracks()[0].applyConstraints( { \nvideo: { cursor: \'never\', frameRate: 30 } \n} );\n

这不起作用:-(

更新：\n我可以从这里的图表中看到：\n https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

游标约束应该只在 Opera 上受支持。然而 …