createObjectURL
Failed to execute 'createObjectURL' on 'URL'
window . URL . createObjectURL ( data )
var binaryData = [ ] ;
binaryData . push ( data ) ;
window . URL . createObjectURL ( new Blob ( binaryData , { type : "application/zip" } ) ) ;
navigator.mediaDevices.getDisplayMedia
موجودnavigator.mediaDevices.getUserMedia
<!DOCTYPE html >
< html lang =" en " >
< head >
< meta charset =" UTF-8 " >
< meta name =" viewport " content =" width=device-width, initial-scale=1.0 " >
< meta http-equiv =" X-UA-Compatible " content =" ie=edge " >
< title > Document </ title >
</ head >
< body >
< style >
video {
width: 1000px;
height: 500px
}
</ style >
< video autoplay id =" video " > Video stream not available. </ video >
< script >
let video = document . getElementById ( 'video' ) ;
navigator . mediaDevices . getDisplayMedia ( {
video : true ,
audio : true
} )
. then ( stream => {
// we have a stream, attach it to a feedback video element
console . log ( stream ) ;
video . srcObject = stream ;
} , error => {
console . log ( "Unable to acquire screen capture" , error ) ;
} ) ;
</ script >
</ body >
</ html >
قم بتنزيل MediaRecorder
مجانًا
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}
stream
var mediaRecorder = new MediaRecorder(stream)
بتثبيت mediaRecorder
mediaRecorder
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {}
stream
,الحصول على أفضل النتائجmediaRecorder.start()
قم بتشغيل برنامج MediaRecorder.start()mediaRecorder.onstop = function(e) {}
احصل على mediaRecorder
من var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });chunks = [];
chunks
في هذه الحالة، يجب أن تكون على استعداد onstop
عن العمل والتوقف عن العملmediaRecorder.ondataavailable = function(e) {chunks.push(e.data);}
قم بتجميع stream
، قم بتقسيم القطع إلى قطع chunks
mediaRecorder.stop()
قم بالتسجيل مرة أخرىaudio
audioURL = URL.createObjectURL blob
var audioURL = URL.createObjectURL(blob);audio.src = audioURL;console.log("recorder stopped");
url
video
var constraints = { audio : true } ;
var chunks = [ ] ;
navigator . mediaDevices . getUserMedia ( constraints )
. then ( function ( stream ) {
var mediaRecorder = new MediaRecorder ( stream ) ;
record . onclick = function ( ) {
mediaRecorder . start ( ) ;
console . log ( mediaRecorder . state ) ;
}
stop . onclick = function ( ) {
mediaRecorder . stop ( ) ;
console . log ( mediaRecorder . state ) ;
}
mediaRecorder . onstop = function ( e ) {
audio . setAttribute ( 'controls' , '' ) ;
audio . controls = true ;
var blob = new Blob ( chunks , { 'type' : 'audio/ogg; codecs=opus' } ) ;
chunks = [ ] ;
var audioURL = URL . createObjectURL ( blob ) ;
audio . src = audioURL ;
console . log ( "recorder stopped" ) ;
}
mediaRecorder . ondataavailable = function ( e ) {
chunks . push ( e . data ) ;
}
} )
. catch ( function ( err ) {
console . log ( 'The following error occurred: ' + err ) ;
} )
localPeerConnection = new RTCPeerConnection ( null ) ;
localPeerConnection . onicecandidate = function ( event ) {
if ( event . candidate ) {
remotePeerConnection . addIceCandidate ( new RTCIceCandidate ( event . candidate ) ) ; //answer方接收ICE
}
} ;
remotePeerConnection = new RTCPeerConnection ( null ) ;
remotePeerConnection . onicecandidate = function ( event ) {
if ( event . candidate ) {
localPeerConnection . addIceCandidate ( new RTCIceCandidate ( event . candidate ) ) ; //offer方接收ICE
}
} ;
remotePeerConnection . onaddstream = function gotRemoteStream ( event ) {
recordedVideo . srcObject = event . stream ;
} ;
localPeerConnection . addStream ( recordStream ) ;
localPeerConnection . createOffer ( function ( description ) { //description是offer方的 SD ==> 传输的内容
localPeerConnection . setLocalDescription ( description ) ;
remotePeerConnection . setRemoteDescription ( description ) ; //answer方接收offer的SD
remotePeerConnection . createAnswer ( function ( description ) {
remotePeerConnection . setLocalDescription ( description ) ; //answer方设置本身自己的SD
localPeerConnection . setRemoteDescription ( description ) ; //offer接收answer方的SD
} , function ( error ) {
console . log ( error )
} ) ; //answer方发送自己的SD
} , function ( error ) {
console . log ( error )
} ) ;
كائن Blob
ثنائي Binary Large Object
الحجم
new Blob ( blobParts , [ options ] ) ;
blobParts: تم إنشاء Blob، وتم تصميمه خصيصًا لـ ArrayBuffer، ArrayBufferView، Blob، DOMString .
خيارات:
var data1 = "a" ;
var data2 = "b" ;
var data3 = "<div style='color:red;'>This is a blob</div>" ;
var data4 = {
"name" : "abc"
} ;
var blob1 = new Blob ( [ data1 ] ) ;
var blob2 = new Blob ( [ data1 , data2 ] ) ;
var blob3 = new Blob ( [ data3 ] ) ;
var blob4 = new Blob ( [ JSON . stringify ( data4 ) ] ) ;
var blob5 = new Blob ( [ data4 ] ) ;
var blob6 = new Blob ( [ data3 , data4 ] ) ;
console . log ( blob1 ) ; //输出:Blob {size: 1, type: ""}
console . log ( blob2 ) ; //输出:Blob {size: 2, type: ""}
console . log ( blob3 ) ; //输出:Blob {size: 44, type: ""}
console . log ( blob4 ) ; //输出:Blob {size: 14, type: ""}
console . log ( blob5 ) ; //输出:Blob {size: 15, type: ""}
console . log ( blob6 ) ; //输出:Blob {size: 59, type: ""}
تم إنشاء Blob
في slice
واحدة، وهو ما يعني أن Blob
هو أول من يقوم بذلك Blob
وهو ما يجعل Blob يتخلص من هذه المشكلة.
slice ( [ start ] , [ end ] , [ contentType ] )
Blob
هو أحد أفضل اللاعبين في Blob
. لا داعي للقلق بشأن هذا الأمر.Blob
هو أحد أفضل 10 أشخاص في العالم - 1 هو أحد أفضل Blob
لا داعي للقلق بشأن هذا الأمر. قد لا يكون الأمر كذلك بالنسبة لك.Blob
هو أحد أفضل اللاعبين في العالم. type
属性设为被传入的值. var data = "abcdef" ;
var blob1 = new Blob ( [ data ] ) ;
var blob2 = blob1 . slice ( 0 , 3 ) ;
console . log ( blob1 ) ; //输出:Blob {size: 6, type: ""}
console . log ( blob2 ) ; //输出:Blob {size: 3, type: ""}
let href = URL . createObjectURL ( blob2 ) ; //浏览器可以直接打开href连接看输出
console . log ( href ) ; //abc
URL.createObjectURL()
قم بتحديد DOMString
، قم بزيارة الرابط التالي للحصول على عنوان URL
الخاص بك. تم تحديد document
URL
الخاص بالمستند. تم إنشاء File
بواسطة Blob
.
objectURL = URL . createObjectURL ( blob ) ;
URL.revokeObjectURL()
قم بزيارة الرابط التالي URL.createObjectURL()
هذا هو URL
URL
الخاص بك. لا داعي للقلق بشأن هذا الأمر.
window . URL . revokeObjectURL ( objectURL ) ;
目前، تم إنشاء Blob
بواسطة slice
Blob
، وهي عبارة عن لوحة canvas
(تشمل crossOrigin = "Anonymous"
، حدد عنوان url
، وحدد URL.revokeObjectURL()
، createjs
، وحدد عنوان URL.
function upload ( blobOrFile ) {
var xhr = new XMLHttpRequest ( ) ;
xhr . open ( 'POST' , '/server' , true ) ;
xhr . onload = function ( e ) {
// ...
} ;
xhr . send ( blobOrFile ) ;
}
document . querySelector ( 'input[type="file"]' ) . addEventListener ( 'change' , function ( e ) {
var blob = this . files [ 0 ] ;
const BYTES_PER_CHUNK = 1024 * 1024 ; // 1MB chunk sizes.
const SIZE = blob . size ;
var start = 0 ;
var end = BYTES_PER_CHUNK ;
while ( start < SIZE ) {
upload ( blob . slice ( start , end ) ) ;
start = end ;
end = start + BYTES_PER_CHUNK ;
}
} , false ) ;
var xhr = new XMLHttpRequest ( ) ;
xhr . open ( 'GET' , '/path/to/image.png' , true ) ;
xhr . responseType = 'blob' ;
xhr . send ( )
xhr . onload = function ( e ) {
if ( this . status == 200 ) {
var blob = this . response ;
var img = document . createElement ( 'img' ) ;
var URL = window . URL || window . webkitURL ; //兼容处理
var objectUrl = URL . createObjectURL ( blob ) ;
img . onload = function ( e ) {
window . URL . revokeObjectURL ( img . src ) ; // 释放 url.
} ;
img . src = objectUrl ;
document . body . appendChild ( img ) ;
// ...
}
} ;
xhr . send ( ) ;
هذا هو | 作用 | 类型 |
---|---|---|
navigator.mediaDevices.getUserMedia(constraints).then(function(stream){}; | stream 根据音视频源头生成 | ميدياستريم |
mediaRecorder = new MediaRecorder(window.stream, options) | قم بتنزيل mediaRecorder الوسائط الخاص بك من خلال stream المباشر | مسجل الوسائط |
mediaRecorder.ondataavailable = function (event) {recordedBlobs.push(event.data);} | قم بتنزيل stream الخاص بـ BlobEvent من خلال recordedBlobs | BlobEvent |
let buffer = new Blob(recordedBlobs, {type: "video/webm"}); | لعبة Blob للترفيه عن النفس | فقاعة |
test.src = window.URL.createObjectURL(buffer); | قم بإنشاء window.URL.createObjectURL لتنزيل Blob video أو audio | src |
recordStream = test.captureStream(); | تم تطوير Blob بواسطة MediaStream | ميدياستريم |
new RTCPeerConnection(null).addStream(recordStream); | تم إنشاء recordStream RTCPeerConnection | ميدياستريم |
mediaRecorder = new MediaRecorder ( window . stream , options ) ; // 设置音频录入源、格式
mediaRecorder . ondataavailable = function ( event ) {
// 这个会不断接受BlobEvent
console . log ( event ) ;
if ( event . data && event . data . size > 0 ) {
recordedBlobs . push ( event . data ) ;
}
} ; // 存放获取的数据
let buffer = new Blob ( recordedBlobs , {
type : "video/webm"
} ) ;
console . log ( buffer ) ;
test . src = window . URL . createObjectURL ( buffer ) ;
recordStream = test . captureStream ( ) ;
RTCPeerConnection
مسجل الوسائط