window.URL.createObjectURL(mediaStream) 出现 typeError 错误

转自：https://blog.csdn.net/Miss_Liang/article/details/85781396

window.URL.createObjectURL(mediaStream) 出现 typeError 错误的原因是

浏览器正在取消对 mediaStream 类型的支持

解决方案：

video.srcObject = mediaStream

代码示例:

复制代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var video = document.getElementById("video");
            var canvas = document.getElementById("canvas"),
                context = canvas.getContext("2d");
            var w;
            if (navigator.webkitGetUserMedia) {
                navigator.webkitGetUserMedia({ video: true }, function (stream) {
                    // 错误代码:
                    // video.src = window.webkitURL.createObjectURL(stream); // 浏览器正在取消对 createObjectURL 的支持
                    // 正确代码:
                    video.srcObject = stream; 
                    video.play();
                    w = new WebSocket(url);
                    w.onopen = function () {
                        sendImg();
                    }
                    w.onmessage = function (e) {
                        sendImg();
                    }

                }, function () {
                    console.log("video error");
                });


                var host = 'localhost';
                var port = 8888;
                var url = 'ws://' + host + ':' + port + '/';

                function sendImg() {
                    context.drawImage(video, 0, 0, 320, 320);
                    var imgData = canvas.toDataURL();
                    w.send(imgData);
                }
            }
        });
    </script>
</head>
<body>
    <video id="video" width="640" height="480" style="background:#000;" autoplay></video>
    <canvas style="display:none" id="canvas" width="320" height="320"></canvas>
</body>
</html>
复制代码

 

posted @   夏秋初  阅读(2587)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手