بالنسبة للبث المباشر للفيديو، قمت بدراسة العديد من الحلول في المرحلة المبكرة، بما في ذلك websocket. ولأسباب مختلفة، لم أعتمد هذا الحل في النهاية، ولكن ما زلت أرغب في تسجيل تجربتي التعليمية.
WebSocket هو بروتوكول للاتصال مزدوج الاتجاه على اتصال TCP واحد بدأ HTML5 في توفيره.
في WebSocket API، يحتاج المتصفح والخادم فقط إلى تنفيذ إجراء المصافحة، ثم يتم تشكيل قناة سريعة بين المتصفح والخادم. يمكن نقل البيانات مباشرة بين الاثنين.
يرسل المتصفح طلبًا إلى الخادم لإنشاء اتصال WebSocket من خلال JavaScript. بعد إنشاء الاتصال، يمكن للعميل والخادم تبادل البيانات مباشرة من خلال اتصال TCP.
بعد الحصول على اتصال WebSocket، يمكنك إرسال البيانات إلى الخادم من خلال طريقة الإرسال () وتلقي البيانات التي يتم إرجاعها بواسطة الخادم من خلال حدث onmessage.
أثناء العملية، الفكرة الرئيسية هي: استخدام setTimeout() في صفحة التسجيل لتحويل الفيديو إلى صورة إطار بإطار من خلال لوحة الرسم على فترات زمنية محددة، ثم استخدام مقبس websocket.send() لإرسال بيانات الصورة إلى الخادم. في صفحة البث المباشر، عليك أولاً إنشاء بنية <img>، والحصول على بيانات الصورة من خلال المقبس ()socket.onmessage الخاص بمقبس الويب، وعرضها على علامة <img> لتشكيل بث مباشر.
الكود المرفق
هيكل HTML لصفحة الفيديو
<معرف التشغيل التلقائي للفيديو=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>
صفحة الفيديو js
<script type=text/javascript charset=utf-8> // إنشاء مثيل + varocket = new WebSocket(ws://+document.domain+:8080); var back = document.getElementById('output'); / إرجاع بيئة للرسم على القماش. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var Success = function(stream){ // احصل على دفق الفيديو وقم بتحويله إلى عنوان url video.src = window.URL.createObjectURL(stream); } //فتح المقبس المقبس.onopen = function(){ draw(); ارسم إطارات فيديو على كائن Canvas، وسيقوم Canvas بتبديل الإطارات كل 100 مللي ثانية لتكوين تأثير فيديو بالعين المجردة var draw = function(){try{ backcontext.drawImage(video,0,0, back.width, back.height). }catch( e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100); if(video.src){ // يتم تحويل محتوى Canvas إلى URI لبيانات PNG وإرساله إلى الخادم، 0.5 هو معامل الضغط المقبس.send(back.toDataURL(image/jpeg, 0.5) } setTimeout(draw , 100) } // اتصل بكاميرا الجهاز وضع المورد في علامة الفيديو navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||.navigator.mozGetUserMedia ||. navigator.msGetUserMedia;هيكل HTML للصفحة المباشرة:
<img id=receiver style=width:1600px;height:900px/>
الصفحة الحية JS
<script type=text/javascript charset=utf-8> // إنشاء مثيل مأخذ توصيل var استقبال_socket = new WebSocket(ws://+document.domain+:8008); تنبيه(ws://+document.domain+:8008) var image = document.getElementById('receiver'); // الاستماع للرسائلreceiver_socket.onmessage = function(data) { image.src=data.data } </script>; تلخيصما ورد أعلاه هو تطبيق websocket في HTML5 الذي قدمه لك المحرر وآمل أن يكون مفيدًا لك. إذا كانت لديك أي أسئلة، فيرجى ترك رسالة لي وسيقوم المحرر بالرد عليك في الوقت المناسب. أود أيضًا أن أشكر الجميع على دعمكم لموقع VeVb للفنون القتالية!